UZU-DEV

1. HTML은 왜 구조가 필요할까?

1.1 사람이 읽는 방식 vs 기계가 읽는 방식

아래 두 텍스트 덩어리를 비교해 보자.

웹의 기초 공부 시작 오늘은 HTML을 배웠다 HTML은 HyperText Markup Language의 약자다 
태그로 문서 구조를 표현한다 내일은 CSS를 공부할 예정이다 2026년 6월 장유주

<article>
  <h1>웹의 기초 공부 시작</h1>
  <p>오늘은 HTML을 배웠다. HTML은 HyperText Markup Language의 약자다.
     태그로 문서 구조를 표현한다.</p>
  <p>내일은 CSS를 공부할 예정이다.</p>
  <footer>
    <time datetime="2026-06">2026년 6월</time>
    <span>장유주</span>
  </footer>
</article>

사람은 두 덩어리를 모두 이해할 수 있다. 경험과 문맥으로 의미를 추측하기 때문이다. 그러나 검색 엔진·스크린 리더·브라우저 같은 기계는 태그를 통해서만 의미를 파악한다.

• 첫 번째 덩어리에서 기계는 "이 페이지의 제목이 무엇인지", "작성자가 누구인지", "작성일이 언제인지"를 알 방법이 없다.
• 두 번째 코드에서는 <h1> 이 제목, <p> 가 문단, <time> 이 날짜임을 명확히 선언한다.

구조는 기계뿐만 아니라 사람에게도 중요하다. 6개월 뒤 자신이 쓴 코드를 다시 열었을 때, 또는 팀원이 코드를 처음 봤을 때 — 구조가 있는 코드와 없는 코드의 가독성 차이는 크다.

1.2 구조가 없을 때 생기는 세 가지 문제

① 검색 엔진이 중요도를 파악하지 못한다

검색 엔진 크롤러는 페이지 내 텍스트를 수집하되, 어느 텍스트가 제목이고 어느 텍스트가 부가 설명인지를 태그 구조로 판단한다. 구조가 없으면 모든 텍스트가 동등한 중요도를 갖는 것으로 처리되어, 해당 페이지가 무엇에 관한 내용인지 파악하기 어렵다. 결과적으로 검색 결과 노출이 불리해진다.

② 스크린 리더 사용자가 탐색하기 어렵다

스크린 리더는 구조 태그를 단서로 삼아 사용자를 안내한다. "다음 제목으로 이동"이나 "다음 링크로 이동" 같은 키보드 단축키가 작동하려면 제목과 링크가 의미 있는 태그로 표시되어 있어야 한다. <div> 로만 이루어진 페이지에서 스크린 리더 사용자는 페이지 전체를 처음부터 끝까지 들어야만 원하는 정보에 도달할 수 있다.

③ 코드 유지보수가 어렵다

<!-- 한 달 뒤에 코드를 다시 봤을 때 -->
<div class="wrap">
  <div class="top">
    <div class="logo">...</div>
    <div class="menu">...</div>
  </div>
  <div class="content">
    <div class="main-area">...</div>
    <div class="side-area">...</div>
  </div>
  <div class="bottom">...</div>
</div>

class 이름이 없다면 각 <div> 가 무엇인지 전혀 알 수 없다. class 이름이 있어도 개발자마다 명명 규칙이 달라 혼란이 생긴다. 시맨틱 태그는 코드 자체가 설명이 되는(self-documenting) 구조를 만든다.

2. 시맨틱(Semantic)이란

2.1 언어학적 의미

시맨틱(Semantic) 은 그리스어 'sēmantikós'에서 온 단어로, 언어학에서는 의미론(Semantics) 의 어원이다. 언어학의 의미론은 단어·문장이 어떤 의미를 담고 있는지를 연구하는 분야다.

HTML에서 시맨틱은 태그가 '보이는 것'이 아닌 '의미하는 것'을 표현한다는 개념이다.

2.2 HTML에서의 시맨틱: 보이는 것 vs 의미하는 것

아래 두 코드는 브라우저에서 시각적으로 동일하게 보인다.

<!-- 시각적으로 동일한 두 코드 -->

<!-- 비시맨틱 -->
<div style="font-size: 24px; font-weight: bold;">웹의 기초</div>

<!-- 시맨틱 -->
<h1>웹의 기초</h1>

화면에는 둘 다 굵고 큰 텍스트로 표시된다. 그러나 기계(검색 엔진, 스크린 리더)가 읽으면 완전히 다르다.

• <div style="...">: "이 텍스트는 굵고 크게 보여라" — 시각적 지시만 있다.
• <h1>: "이 텍스트는 이 페이지의 최상위 제목이다" — 의미가 있다.

이것이 시맨틱 HTML의 핵심이다. 태그는 외양이 아니라 내용의 성격을 표현한다.

2.3 시맨틱 웹: 팀 버너스리의 비전

'시맨틱 웹(Semantic Web)'은 웹의 창시자 팀 버너스리가 2001년 제안한 개념이다. 현재의 웹이 사람이 읽기 위한 정보를 담고 있다면, 시맨틱 웹은 컴퓨터가 웹 문서의 내용과 문맥을 스스로 이해하고 처리할 수 있는 웹을 지향한다.

오늘날 HTML5의 시맨틱 태그들은 이 비전을 실현하는 구체적인 수단 중 하나다. <article>, <nav>, <time> 같은 태그들은 사람뿐 아니라 기계도 해당 콘텐츠의 성격을 파악할 수 있게 한다.

3. 시맨틱 태그가 필요한 세 가지 이유

3.1 SEO (검색 엔진 최적화)

검색 엔진은 구조화된 HTML을 선호한다. 시맨틱 태그는 크롤러에게 다음을 알린다.

• <h1>: 이 페이지의 핵심 주제
• <article>: 독립적인 완결 콘텐츠 단위
• <nav>: 탐색 링크 묶음
• <time datetime="...">: 기계가 읽을 수 있는 날짜·시간

특히 구글은 구조화된 데이터(Structured Data) 를 활용해 검색 결과에 풍부한 스니펫(별점, 가격, 이벤트 날짜 등)을 표시한다. 시맨틱 태그는 이 구조화된 데이터의 토대가 된다.

3.2 접근성 (Accessibility)

WCAG(웹 콘텐츠 접근성 지침) 4원칙 중 하나는 '인식 가능(Perceivable)' 이다. 시각·청각·운동 장애가 있는 사용자도 동등하게 웹에 접근할 수 있어야 한다.

• 스크린 리더 사용자는 <nav> 를 만나면 "탐색 영역 진입"이라는 안내를 받는다.
• <main> 태그는 "주요 콘텐츠로 바로 이동(Skip to main content)" 기능의 기준점이 된다.
• <table> 의 <th> (헤더 셀)는 스크린 리더가 각 데이터 셀이 어느 열·행에 속하는지 알려주는 단서다.

CSS나 JavaScript로 시각적 효과를 아무리 잘 구현해도, 기반이 되는 HTML 구조가 잘못되면 접근성 보조 기술이 작동하지 않는다.

3.3 유지보수성 (Maintainability)

시맨틱 태그는 코드를 자기 설명적(self-documenting) 으로 만든다. 주석 없이도 코드 구조만으로 각 영역의 역할을 이해할 수 있다.

<div> 기반 코드는 id·class 작명 규칙이 개발자마다 달라 협업 시 혼란을 준다. 시맨틱 태그는 W3C가 정의한 공통 언어이므로, 처음 보는 코드도 구조를 빠르게 파악할 수 있다.

4. [실습] <div> 로만 짜인 코드를 시맨틱하게 분석하기

4.1 분석할 코드

아래는 초보자가 흔히 작성하는, <div> 만으로 구조를 잡은 코드다. 이 코드를 줄 단위로 분석하고 시맨틱 버전으로 변환한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내 스터디 블로그</title>
</head>
<body>

  <div class="header">
    <div class="logo">uzu-dev</div>
    <div class="gnb">
      <div class="menu-item"><a href="/">홈</a></div>
      <div class="menu-item"><a href="/blog">블로그</a></div>
      <div class="menu-item"><a href="/about">소개</a></div>
    </div>
  </div>

  <div class="content-wrap">
    <div class="main-content">
      <div class="post">
        <div class="post-title">HTML 기초 스터디 1일차</div>
        <div class="post-date">2026-06-24</div>
        <div class="post-body">
          <p>오늘은 HTML 문서의 기본 구조를 공부했다.</p>
          <p>DOCTYPE 선언, head, body의 역할을 정리했다.</p>
        </div>
        <div class="tags">
          <div class="tag">HTML</div>
          <div class="tag">Web 기초</div>
        </div>
      </div>
    </div>

    <div class="sidebar">
      <div class="widget">
        <div class="widget-title">최근 포스트</div>
        <div class="widget-item"><a href="#">CSS 기초 1일차</a></div>
        <div class="widget-item"><a href="#">HTML 기초 1일차</a></div>
      </div>
    </div>
  </div>

  <div class="footer">
    <div class="copyright">© 2026 uzu-dev.kr</div>
  </div>

</body>
</html>

4.2 줄 단위 분석

4.3 시맨틱으로 변환한 코드

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>내 스터디 블로그</title>
</head>
<body>

  <header>
    <p><a href="/">uzu-dev</a></p>
    <nav>
      <ul>
        <li><a href="/">홈</a></li>
        <li><a href="/blog">블로그</a></li>
        <li><a href="/about">소개</a></li>
      </ul>
    </nav>
  </header>

  <div class="content-wrap">   <!-- 레이아웃 목적의 감싸기는 div 유지 -->

    <main>
      <article>
        <h2>HTML 기초 스터디 1일차</h2>
        <time datetime="2026-06-24">2026년 6월 24일</time>
        <p>오늘은 HTML 문서의 기본 구조를 공부했다.</p>
        <p>DOCTYPE 선언, head, body의 역할을 정리했다.</p>
        <ul>
          <li>HTML</li>
          <li>Web 기초</li>
        </ul>
      </article>
    </main>

    <aside>
      <section>
        <h3>최근 포스트</h3>
        <ul>
          <li><a href="#">CSS 기초 1일차</a></li>
          <li><a href="#">HTML 기초 1일차</a></li>
        </ul>
      </section>
    </aside>

  </div>

  <footer>
    <small>© 2026 uzu-dev.kr</small>
  </footer>

</body>
</html>

4.4 변환 후 달라진 것

레이아웃 목적의 <div> 는 그대로 둬도 된다

시맨틱 전환이 "모든 <div> 를 없애라"는 의미는 아니다. .content-wrap 처럼 CSS 레이아웃을 위한 감싸기 역할만 하는 <div> 는 대체할 시맨틱 태그가 없으므로 그대로 유지하는 것이 올바르다. 핵심은 의미를 표현할 수 있는 자리에는 반드시 시맨틱 태그를 쓰는 것이다.