HTML5 시맨틱 태그 : '의미 없는 div'에서 '의미 있는 구조'로 갈아타기

 

모든 레이아웃을 <div> 태그 하나로 해결하던 시절이 있었다. 
하지만 검색 엔진(Google, Naver 등)이 늘어나고 웹 접근성의 중요성이 커지면서, **태그 자체에 의미를 담은 '시맨틱 태그(Semantic Tag)'**의 사용은 이제 선택이 아닌 필수가 되었다. 
왜 시맨틱 태그를 써야 하는지, 그리고 각 태그의 정확한 용도는 무엇인지 정리해 보았다.

 

div 사용 (Non-semantic)

<div id="header">...</div>
<div id="nav">...</div>
<div id="content">
  <div class="article">...</div>
</div>
<div id="footer">...</div>

 

시맨틱 태그 활용 (Semantic)

<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<footer>...</footer>

 

• <header>: 페이지의 상단 또는 섹션의 머리글을 나타내며, 로고나 탐색 링크 등을 포함할 수 있다.
• <nav>: 내비게이션 링크를 포함하는 섹션이다.
• <main>: 문서의 주요 콘텐츠를 나타내는 태그다.
• <section>: 문서의 독립적인 섹션을 정의한다.
• <article>: 뉴스 기사, 블로그 게시물과 같이 독립적으로 배포되거나 재사용될 수 있는 콘텐츠를 나타낸다.
• <aside>: 페이지의 주요 콘텐츠와 간접적으로만 관련된 콘텐츠를 나타낸다.
• <footer>: 저작권 정보, 연락처, 하단 메뉴 등을 담는 영역이다.