<div> 태그 대신 사용하는 시맨틱 태그

시맨틱 태그

<header> <main> <footer>같은 태그들을 꽤 본 적이 있을 것이다.

이런 태그들을 시맨틱 태그라고 하는데, 여기서의 시맨틱(semantic)은 '의미론적인', '의미 있는' 같은 뜻들을 가지고 있다.

즉 시맨틱 태그 자체는 의미있는 태그라고 할 수 있다.

 

물론 id나 class같은 태그로도 표현할 수 있겠지만 의미 없는 div 태그를 많이 사용하게 된다.

 

왜 시맨틱 태그가 필요하게 되었느냐를 살펴보자. 🤔

 

 

가독성이 좋음

위와 같은 레이아웃을 모두 div 태그로만 짤수도 있다. (끝없는 div의 향연..)

다만 이렇게 짰을 때 HTML 파일 안에서 어떤 영역인지 바로바로 파악이 가능할까? 🤔

내가 짠 코드를 파악하기도 힘든데 유지보수에 좋을리가 없다.

 

 

웹 접근성에 좋음

시맨틱 태그로 마크업을 하면 브라우저가 HTML만 보고도 상단(header), 본문(main), 하단(footer) 등 영역을 쉽게 파악할 수 있다.

시각장애인들을 위한 스크린 리더기도 좀 더 명확하게 정보제공을 해줄 수 있다.

 

 

SEO에 좋음

검색 엔진에 상위에 노출 되도록 하기 위한 SEO(Search Engine Optimization)!.. 시맨틱 태그를 잘 쓴다면 SEO에도 좋다.

검색엔진이 크롤링을 할 때, 페이지의 HTML 태그를 분석하는데, 시맨틱 하게 마크업 된 웹페이지는 크롤러에게 의미 있는 정보를 전달하기 때문에 더 효율적인 크롤링과 인덱싱을 할 수 있도록 돕는다.

 

 

 

네비바가 따로 없어 간략했던 내 헤더 코드가 생각나서 붙여보며 글을 마무리한다.
시맨틱 태그를 사용해서 의미있는 마크업을 할 수 있도록 노력해 보자!

  <header class="gnb">
        <button class="btn-menu" type="button">
          <a href="./index.html">
            <i class="fa-solid fa-chevron-left ic-chevron" aria-label="뒤로가기"></i>
          </a>
        </button>
        <button class="btn-guide" type="button">
          <i class="fa-solid fa-question ic-guide" aria-label="안내사항"></i>
        </button>
</header>