11. 시맨틱 태그 (Semantic Tag)

 

시맨틱 태그란 의미있는 태그를 뜻한다.

div, span과 같이 의미 없는 태그와 달리, 태그 이름만으로도 내용을 알 수 있는 태그이다.

 

시맨틱 태그를 사용하면 검색엔진 최적화, 쉬운 소스코드 구조화, 코드의 가독성 향상 등의 장점이 있다.

 

주요 구조

• header: 페이지의 제목, 로고, 검색 양식 등
• nav: 메뉴, 목차 등
• main: 지배적인 콘텐츠 영역
• aside: 사이드바, 콜아웃 상자 등
• section: 문서의 섹션
• article: 독립적이고 자체 내용이 포함된 콘텐츠 (게시물, 신문 기사 등)
• footer: 섹션의 작성자에 대한 정보, 저작권 데이터 등

활용 코드

<header style="background-color: yellow">헤더 정보, 헤더 이미지</header>
    <nav style="background-color: greenyellow">
      <a href="">메뉴1</a>
      <a href="">메뉴2</a>
      <a href="">메뉴3</a>
      <a href="">메뉴4</a>
    </nav>
    <main style="background-color: blue">
      <section>
        섹션1
        <article>아티클1</article>
        <article>아티클2</article>
      </section>
      <section>섹션2</section>
    </main>
    <footer style="background-color: gray">footer: 회사 정보</footer>