시맨틱 태그

🎯 학습 목표

이 강을 마치면 여러분은 페이지의 각 영역을 의미 있는 이름의 태그로 구분해, 사람과 컴퓨터 모두가 이해하기 좋은 구조를 짤 수 있게 됩니다. 이번 강은 HTML 기초 파트를 마무리하는 강으로, 지금까지 배운 요소들을 짜임새 있는 페이지 구조 안에 담는 법을 다룹니다.

구체적으로는 세 가지를 배웁니다. 첫째, 시맨틱 태그가 무엇이고 왜 필요한지 이해합니다. 둘째, header·nav·main·section·article·footer 같은 주요 시맨틱 태그를 익힙니다. 셋째, 이런 태그를 쓸 때의 접근성·SEO 이점을 파악합니다.

🏷️ 시맨틱 태그란 무엇인가 — div와의 차이

이 섹션에서는 시맨틱 태그의 개념을 div와 비교하며 살펴보겠습니다.

시맨틱(semantic)이란 '의미의'라는 뜻입니다. 즉 시맨틱 태그는 그 이름만으로 어떤 역할의 영역인지 알 수 있는 태그를 말합니다. 예를 들어 <header>는 '머리말 영역', <footer>는 '바닥글 영역'임을 이름이 그대로 알려 줍니다.

이와 대비되는 것이 <div> 태그입니다. div는 화면의 한 영역을 묶는 가장 일반적인 상자이지만, 그 자체로는 아무런 의미가 없습니다. div로 감싼 영역이 머리말인지 본문인지 바닥글인지, 태그만 봐서는 알 수 없습니다. 과거에는 이 의미 없는 div로 모든 영역을 나누었기에, 코드를 봐도 구조를 파악하기 어려웠습니다.

그래서 최신 HTML은 자주 쓰이는 영역들을 위해 의미가 담긴 전용 태그들을 마련했습니다. 이것이 시맨틱 태그입니다. 이제는 그냥 <div>로 뭉뚱그리는 대신, 머리말은 <header>, 본문은 <main>처럼 역할에 맞는 태그를 골라 씁니다. 겉으로 보이는 결과는 div와 같지만, 코드가 스스로 구조를 설명한다는 큰 차이가 있습니다.

🧩 주요 시맨틱 태그 살펴보기

이 섹션에서는 페이지 구조를 이루는 대표적인 시맨틱 태그들을 살펴보겠습니다.

웹 페이지는 대체로 비슷한 영역들로 이루어집니다. 각 영역에 맞는 태그가 있습니다.

• <header> — 페이지나 영역의 머리말. 보통 로고, 사이트 제목이 들어갑니다.
• <nav> — 내비게이션(메뉴). 다른 페이지로 가는 링크 묶음이 들어갑니다.
• <main> — 그 페이지의 핵심 본문. 한 페이지에 하나만 씁니다.
• <section> — 주제별로 묶은 구획. 내용의 한 단락을 이룹니다.
• <article> — 그 자체로 완결되는 독립적 콘텐츠. 게시글, 뉴스 기사 등입니다.
• <aside> — 본문 옆의 부가 정보. 광고, 관련 링크 등입니다.
• <footer> — 페이지나 영역의 바닥글. 저작권, 연락처가 들어갑니다.

이 이름들을 외우려 하기보다, '페이지에는 머리말·메뉴·본문·바닥글이 있고 각각에 맞는 태그가 있다'는 큰 그림으로 이해하면 자연스럽게 익혀집니다.

🏗️ 시맨틱 구조로 페이지 짜기

이 섹션에서는 앞의 태그들을 조합해 실제 페이지 골격을 짜 보겠습니다.

지금까지 배운 시맨틱 태그로 전형적인 페이지 구조를 만들면 다음과 같습니다.

<body>
  <header>
    <h1>나의 블로그</h1>
    <nav>
      <a href="index.html">홈</a>
      <a href="about.html">소개</a>
    </nav>
  </header>

  <main>
    <article>
      <h2>첫 번째 글</h2>
      <p>오늘 배운 내용을 정리합니다.</p>
    </article>
  </main>

  <footer>
    <p>© 2026 나의 블로그</p>
  </footer>
</body>

이 코드를 읽어 보면, 태그 이름만으로도 어디가 머리말이고 어디가 본문이며 어디가 바닥글인지 한눈에 들어옵니다. 맨 위 <header> 안에 사이트 제목과 메뉴(<nav>)가 있고, 가운데 <main>에 핵심 내용인 글(<article>)이 있으며, 맨 아래 <footer>에 저작권 표시가 있습니다. 지난 강들에서 배운 <h1>, <a>, <p> 같은 태그들이 이 구조 안에 자연스럽게 담긴 것도 볼 수 있습니다.

이렇게 시맨틱 태그로 뼈대를 세워 두면, 나중에 CSS로 각 영역을 꾸밀 때도 'header를 이렇게, main을 저렇게'처럼 의미 단위로 다루기가 훨씬 편합니다.

🌟 시맨틱 태그의 이점 — 접근성과 SEO

이 섹션에서는 시맨틱 태그가 왜 중요한지, 그 실질적 이점을 정리하겠습니다.

첫째는 접근성입니다. 앞서 여러 번 나온 개념이지요. 눈이 불편한 사람이 쓰는 화면 낭독기는 시맨틱 태그를 이정표(landmark)로 삼아, '본문으로 바로 가기', '메뉴로 가기'처럼 페이지를 구조 단위로 넘나들 수 있게 해 줍니다. 모든 것을 의미 없는 div로 만들면 이런 편의가 사라집니다.

둘째는 SEO(검색 엔진 최적화)입니다. 검색 엔진(구글 등)은 시맨틱 태그를 보고 페이지의 구조와 중요한 내용을 더 정확히 파악합니다. 무엇이 핵심 본문(main)이고 무엇이 부가 정보(aside)인지 알면, 검색 결과에 그 페이지를 더 잘 노출할 수 있습니다. 즉 시맨틱 태그는 검색에서 더 잘 발견되도록 돕습니다.

셋째는 코드 가독성입니다. 앞서 본 것처럼 시맨틱 태그로 짠 코드는 사람이 읽기에도 훨씬 명확합니다. 나중에 자신이나 동료가 코드를 다시 볼 때, 구조를 빠르게 이해할 수 있습니다. 이처럼 시맨틱 태그는 기계(낭독기·검색엔진)와 사람 모두를 위한 배려입니다.

⚠️ 자주 하는 실수

이 섹션에서는 시맨틱 태그를 쓸 때 흔한 실수를 정리하겠습니다.

첫 번째, 모든 것을 div로만 만드는 것입니다. div가 익숙하다고 머리말·본문·바닥글까지 전부 div로 짜면, 시맨틱의 이점을 하나도 못 누립니다. 역할이 분명한 영역에는 그에 맞는 시맨틱 태그를 쓰세요.

두 번째, main을 여러 개 쓰는 것입니다. <main>은 그 페이지의 유일한 핵심 본문이므로 한 페이지에 하나만 써야 합니다. 여러 개를 쓰면 무엇이 진짜 본문인지 모호해집니다.

세 번째, 시맨틱 태그를 겉모습 때문에 고르는 것입니다. 시맨틱 태그는 특별한 디자인을 주지 않습니다. 겉모습은 나중에 CSS로 정하는 것이고, 태그는 어디까지나 의미(역할)에 맞게 선택해야 합니다.

📝 핵심 요약

이번 강에서는 시맨틱 태그를 배웠습니다.

• 시맨틱 태그 — 역할이 이름에 담긴 태그로, 의미 없는 div와 달리 코드 스스로 구조를 설명합니다.
• 주요 태그 — header(머리말)·nav(메뉴)·main(본문)·section(구획)·article(독립 콘텐츠)·aside(부가)·footer(바닥글)가 있습니다.
• 구조 짜기 — 이 태그들로 뼈대를 세우면 코드가 명확해지고, CSS로 영역을 다루기도 편합니다. main은 하나만 씁니다.
• 이점 — 접근성(화면 낭독기 이정표), SEO(검색 노출), 코드 가독성이라는 세 가지 이득을 줍니다.

여기까지가 HTML 기초입니다. 이제 뼈대를 세우는 법을 익혔으니, 다음 강부터는 그 뼈대에 색과 디자인을 입히는 CSS의 세계로 들어갑니다. 다음 강 「CSS 시작하기」에서 이어가겠습니다.

📚 참고 자료

• 시맨틱(Semantics)의 의미 — MDN Web Docs
• 문서와 웹사이트 구조 — MDN Web Docs
• <main> 요소 — MDN Web Docs