💡semantic tag?

semantic tag, 시맨틱 태그란 단어 그 자체로 알 수 있듯이 의미를 가지는 태그를 의미한다. 보통 웹사이트를 제작할 때, 헤더 영역엔 <header>를, 메인 영역엔 <main>를 사용하는 경우가 많다. 이때 <header>와 <main> 모두 태그가 태그 이름에 걸맞는 곳에서 사용된다. 이러한 태그를 시맨틱 태그라고 한다.

Document

💡semantic tag의 장점

시맨틱 태그의 장점은 다음과 같다.

영역 구분이 가능하다.
코드 분석이 용이해 페이지를 빠르게 해석할 수 있다.
코드의 가독성이 높아진다.

해당 장점이 별 것 아닌 것처럼 보일 수 있지만 실제 코드를 작성하면 어마무시한 차이가 난다.

Document

💡semantic vs div

아래 두 코드를 보자. 처음은 div 태그로만 이루어진 코드이고, 아래는 시맨틱 태그를 이용하여 코드를 작성한 것이다.

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

  <body>
    <header style="background-color: yellow">헤더정보, 헤더이미지</header>
    <nav style="background-color: yellowgreen">
      <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>
  </body>

두 코드는 겉보기엔 별 차이점이 없어보인다. 하지만 코드 해석 시 div로 이루어진 태그는 div를 단순히 태그를 감싸는 박스영역으로 인식하기 때문에 해당 태그가 헤더 영역인지, 메인 영역인지 알 수 없다.

반면 아래의 코드는 태그를 통해 해당 의미를 유추할 수 있어 헤더, 메인, 푸터 등 영역 구분이 가능하다. 실제로 코드 리더기가 해당 태그를 의미있는 태그로 해석함으로써 시각장애인분들 위한 정보를 제공하므로 코드 작성 시 시맨틱 태그로 작성하는 것이 좋다.