시맨틱 태그를 왜 사용하나 (종류와 사용법)

프로젝트를 진행하면서 어느 순간 div 태그만 남발(?)하고 있는 걸 발견했다. 다른 시멘틱 태그도 많은데 왜 쓸 생각을 못했을까? 시맨틱 태그에 대해 잘 알고 넘어가기로 하자.

시맨틱 태그란,

HTML에서 의미를 가지는 태그들이며, 태그 이름만 보고도 어떤 역할을 하는지 이해할 수 있다.

위의 사진처럼 div나 span 태그만 사용할 때보다 header, nav, article 같은 시맨틱 태그들을 사용하면 콘텐츠의 의미를 명확하게 전달할 수 있다.

왜 사용할까?

1. 스크린 리더가 구조를 쉽게 이해한다 -> 웹 접근성 향상

   웹 접근성이란, 장애가 있는 사용자도 웹사이트를 쉽게 이용할 수 있도록 하는 것이다. 시각장애인은 스크린 리더로 웹사이트를 이용하는데, 시맨틱 태그를 사용하면 사용자에게 더 좋은 경험을 제공할 수 있다.

2. 검색 엔진이 페이지 구조를 더 잘 파악할 수 있다. -> SEO 개선

   SEO(검색 엔진 최적화)는 검색 엔진이 웹사이트를 쉽게 이해하고 검색 결과에서 더 높은 순위에 올리도록 한다.
   시맨틱 태그를 사용하면 검색 엔진이 웹페이지 구조를 쉽게 파악하고, 중요한 콘텐츠를 더 잘 식별할 수 있다.

3. 협업 시, 태그 이름만 보고 역할을 쉽게 파악할 수 있다. -> 코드 가독성 향상

이렇게 중요한 이유가 있었는데 제대로 알지 못했다. 사용자의 입장에서 한 번 더 생각할 수 있는 계기가 된 것 같고 앞으로 의미에 맞는 태그를 사용하도록 해야겠다.

---

웹페이지의 큰 틀을 잡는 태그

태그의 종류와 사용법을 알아보자.

<main>

웹페이지의 핵심 내용을 감쌀 때 사용한다.
주로 header, nav, footer 같은 공통 요소를 제외한 메인 부분을 감싸는 용도이다. 한 페이지에 하나만 존재해야 한다.

예를 들어, 현재 진행하고 있는 프로젝트에서 메인 부분은 다음과 같다.

<article>

블로그 글, 뉴스 기사, 리뷰처럼 독립적으로 의미를 가질 수 있는 콘텐츠일 때 사용한다.

<section>

제목과 함께 사용해서 특정 주제를 구분할 때 사용한다. (<h2> ~ <h6>)
일반적으로 여러 개의 section이 있을 수 있다.

<section>
  <h2>최신 뉴스</h2>
  <article>
    <h3>기사 제목 1</h3>
    <p>기사 내용...</p>
  </article>
</section>

<div>

스타일을 적용하거나 레이아웃을 구성할 때, 의미 없이 단순히 요소를 묶고 싶을 때 사용한다.
div 태그는 의미가 없기 때문에, 가능하면 section, article 태그를 우선 사용하는 것이 좋다.

<aside>

본문과 관련된 보조 정보이다. (사이드바, 광고)

<nav>

내비게이션으로 메뉴와 링크의 역할을 한다.

<header>

문서나 섹션의 머리말 역할을 한다. (로고, 제목, 내비게이션)

<footer>

문서나 섹션의 하단 정보 역할을 한다. (저작권, 연락처)