1. 왜 시멘틱한 마크업을 해야할까?

시멘틱 마크업은 인터넷에 떠다니는 정보들을 컴퓨터가 이해할 수 있고, 그 정보를 가공할 수 있도록 하는 것이 목적입니다. 또한, 웹 접근성을 향상시켜 정보 격차를 해소하는 데 도움을 줍니다.

2. header 태그

소개 및 탐색에 도움을 줍니다.
회사명, 제목, 로고, 검색 폼, 작성자 이름 등의 요소가 포함 될 수 있어요.
<head> 태그와 혼동하지 마세요!
HTML 문서가 여러 섹션으로 구성되어 있을 때 각 섹션의 시작 부분에 <header>를 사용할 수 있습니다.

헤더를 중첩 사용하거나 헤더 안에 푸터를 사용할 수 없습니다

<!-- 잘못된 예 -->
<header>
  <header></header>
</header>
 
<header>
  <footer></footer>
</header>

<!-- 잘못된 예 -->
<header>
  <header></header>
</header>
 
<header>
  <footer></footer>
</header>

3. nav 태그

navigation bar
문서의 부분 중 현재 페이지 내, 또는 다른 페이지로의 링크를 보여줍니다.

내부에는 메뉴, 목차, 브레드크럼(breadcrumb)이 포함됩니다.

메뉴

<nav>
  <ul>
    <li><a href="#">위니브</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

<nav>
  <ul>
    <li><a href="#">위니브</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

브레드크럼

<nav>
  <ol>
    <li><a href="#">위니브</a></li>
    <li><a href="#">캐릭터소개</a></li>
    <li>라이캣</li>
  </ol>
</nav>

<nav>
  <ol>
    <li><a href="#">위니브</a></li>
    <li><a href="#">캐릭터소개</a></li>
    <li>라이캣</li>
  </ol>
</nav>

문서의 모든 링크가 <nav> 안에 있을 필요는 없어요. 페이지의 주요 탐색 링크를 위한 태그입니다.
하나는 사이트 전체 탐색, 다른 하나는 현재 페이지 내 탐색으로 사용하는 등, 하나의 웹페이지에 여러 개의 <nav> 태그를 가질 수 있습니다.

4. footer 태그

페이지의 작성자, 저작권정보, 페이지 관련 문서 등의 내용을 담습니다.

5. main 태그

body의 주요 콘텐츠를 나타냅니다.
웹페이지에서 한 번만 사용할 수 있습니다.
사이드바, 탐색 링크, 저작권정보, 사이트 로고, 검색 폼 등 여러 페이지에 반복되는 콘텐츠를 포함해서는 안 됩니다.
- 검색 폼이 주요 기능이라면 예외입니다.

6. article 태그

독립적으로 구분해 배포하거나 재사용할 수 있는 구획을 나타냅니다.
- 사이트의 다른 기능에 영향을 주지 않고 독립적인 기능을 수행합니다.
- 아티클 영역을 제거해도 페이지는 정상적으로 돌아갑니다.
아티클이 대표적으로 사용되는 곳은 뉴스 홈페이지입니다.
- 다양한 기사들이 한 페이지에 담겨있지만, 이 기사들은 각각 독립적으로 사용됩니다.
- 시간마다 노출되는 기사가 달라져도 홈페이지는 정상적으로 운영됩니다.
게시판, 블로그 글, 매거진, 뉴스 기사, 위젯, 실시간 채팅 창 등
제목 요소를 자식으로 포함하여야 합니다!

7. section 태그

문서 내에서 특정한 섹션을 정의하는 데 사용됩니다. 이 태그는 일반적으로 주제나 컨텐츠를 구분짓기 위해 사용됩니다.
- 뉴스의 사회면 / 연예면 각각의 부분을 나타낼 수 있습니다
제목 요소를 자식으로 포함하여야 합니다!

<article> vs <section>

일단 article 사용을 우선 고민해보세요. 독립적으로 사용한다면 article 사용하시고, 웹페이지의 앞뒤 문맥이 연결성이 필요하거나, 더 적합한 의미를 가진 요소가 없을 때 section을 사용하세요! 단순 스타일링이 목적이라면 div 요소를 사용합니다!

8. aside 태그

문서의 주요 내용과 간접적으로 연관된 부분을 나타냅니다.
문서의 주요 흐름을 따라가지 않고, 보조적인 역할만 하는 공간입니다.
광고 배너,사이드바 등에 사용합니다.

9. hr 태그

이야기에서 장면 전환 혹은 문단 안에서 주제가 변경되었을 때 사용합니다.
단락을 구분할 때 사용하므로 <p> 태그 내의 사용은 하지 않습니다!

+) 그래도 호환 이슈가 걱정된다면?

대부분의 모던 웹 브라우저(Chrome, Firefox, Safari, Edge 등)은 HTML5를 완벽하게 지원합니다. 하지만 오래된 버전의 Internet Explorer(IE)는 HTML5와 시맨틱 태그 지원에 제한이 있습니다.
오래된 브라우저와의 호환성을 위해 div 태그를 함께 사용하는 방법도 있습니다.

<div id="header">
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</div>
 
<div id="main">
  <main>
    <article>
      <h2>Welcome to my website!</h2>
      <p>This is the main content area.</p>
    </article>
  </main>
</div>
 
<div id="footer">
  <footer>
    <p>&copy; 2024 Weniv Website. All rights reserved.</p>
  </footer>
</div>

<div id="header">
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
</div>
 
<div id="main">
  <main>
    <article>
      <h2>Welcome to my website!</h2>
      <p>This is the main content area.</p>
    </article>
  </main>
</div>
 
<div id="footer">
  <footer>
    <p>&copy; 2024 Weniv Website. All rights reserved.</p>
  </footer>
</div>

이렇게 div 태그와 시맨틱 태그를 함께 사용하면 오래된 브라우저에서도 문제없이 동작하면서, 동시에 시맨틱 태그의 장점을 활용할 수 있습니다.

시멘틱한 웹사이트 참고하기

HTML/CSS 에센셜

Semantic Elements