Semantic Markup, 시멘틱 구조

 Semantic 구조란?

semantic : 의미의, 의미론의, 의미론적인

시멘틱 구조란, HTML 문서에서 의미 있는 구조에 의미가 맞는 태그를 사용하는 것을 말한다.

HTML5 시멘틱 구조

시멘틱 구조에서는 위와 같이 웹 페이지에서 가장 윗부분에 올만한 내용들, 이를테면 웹사이트 로고나 로그인 폼 등을 배치할 때 header 태그를 사용하고 header 답게 맨 위에 배치하게 된다. 문서에서 메뉴를 나타낼 때는 nav 태그를 사용할 것이고 여기에 목차나 리스트, 링크 등이 배치된다.

 

이렇듯 의미 있는 구조에 맞는 의미 있는 태그들을 사용하여 HTML 문서를 구성하는 것을 시멘틱 구조라 한다.

Naver 메인 화면을 보면 대략적으로 우리는 어디가 header이고 어디가 nav인지 감으로 알 수 있다. 하지만 컴퓨터라는 기계는 인간이 아니기 때문에 대략적으로 파악이 불가능하다. 구성 요소들이 그저 div 태그로 이루어져 있다면 효율적으로 데이터를 추출하기 어렵다는 것이다. 하지만 시멘틱 구조로 이루어져 있다면 각 정보들이 분류되어 데이터 추출이 용이해진다.

 

Tag	Description
header	맨 윗부분으로 사이트 로고, 로그인, 언어 선택 등이 위치한다.
nav	문서에서 방향을 지시하는 곳으로 메뉴, 리스트 등이 위치한다.
aside	본문과 관련 없는 배너 광고 등이 위치한다.
section	여러 중심 내용을 감싸는 공간 ex) 네이버 뉴스에서 연예 섹션 혹은 스포츠 섹션 등등
article	직접적인 내용이 들어가는 곳으로 뉴스 기사 본문 내용 등이 위치한다.
footer	가장 밑 부분으로 주소, 연락처, 저작권 등의 내용이 위치한다.

시멘틱 태그는 모두 div 태그와 같은 기능을 수행한다. 하지만 검색 엔진이 웹 페이지를 파악하거나, 기계적인 동작이 더해질 때 시멘틱 구조로 이루어져 있다면 더욱 쉽게 이해하고 용이하게 이루어진다.

 

시멘틱 이전의 HTML 구조

    <div id="wrap">
      <div id="header">
        <h1>HTML</h1>
      </div>
      <div class="section">
        <div id="article">
          <h2>컨텐츠 1의 제목</h2>
          <p>컨텐츠 1의 내용</p>
        </div>
        <div id="article2">
          <h2>컨텐츠 2의 제목</h2>
          <p>컨텐츠 2의 내용</p>
        </div>
      </div>
      <div id="footer">
        <span>저작권, 연락처, 주소</span>
      </div>
    </div>

 

시멘틱 구조의 HTML

    <div id="wrap">
      <header>
        <h1>나는 제목</h1>
      </header>
      <nav>
        <ol>
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ol>
      </nav>
      <section>
        <article>
          <h2>컨텐츠 1의 제목</h2>
          <p>컨텐츠 1의 내용</p>
        </article>
        <article>
          <h2>컨텐츠 2의 제목</h2>
          <p>컨텐츠 2의 내용</p>
        </article>
      </section>
      <footer><address>경기도 평택시</address></footer>
    </div>

위에서 표현한 것처럼, <div id="header">라고 표현하는 것보다 <header>로 헤더를 장식하는 것이 직관적이고 효율적이며 의미론적이다.

 

시멘틱 구조를 사용하는 것은 검색 엔진이 파악하는 데에 도움을 줄 뿐만 아니라 개발자들이 코드의 구조를 파악할 때 보다 용이하게 파악할 수 있다.

 

 

 

참고 출처 : https://snusang.tistory.com/4

참고 출처 : https://m.blog.naver.com/won_1020/221718728799