SEO를 위한 시멘틱 태그의 종류

시멘틱 태그란?

시멘틱 태그(semantic tags)는 HTML 문서의 요소들에 의미를 부여하는 역할을 하는 태그들입니다. 이러한 태그는 웹 페이지의 구조와 내용을 의미적으로 표현하여 검색 엔진이나 웹 브라우저가 문서를 이해하고 적절한 방식으로 처리할 수 있도록 돕습니다. 즉, 시멘틱 태그를 사용하면 구글, 빙, 네이버, 다음 등의 검색엔진의 크롤러가 우리 사이트의 글을 볼 때, 웹 페이지의 가독성을 높이고 접근성을 향상시킬 수 있습니다.

시멘틱 태그는 HTML5에서 도입된 요소들로, 웹 페이지의 구조와 의미를 명확하게 전달하기 위해 사용됩니다. 과거의 HTML 버전에서는 일반적인 태그들이 단순히 레이아웃을 구성하는 데 사용되어 의미적인 정보를 전혀 전달하지 못했습니다.

시멘틱 태그는 웹 페이지의 구조와 의미를 더 명확하게 표현하는 데 도움을 줍니다. 각각의 시멘틱 태그는 특정한 의미를 내포하며, 해당 요소의 내용이나 목적을 표현합니다. 이는 검색 엔진 최적화(SEO), 웹 접근성, 코드 가독성, 유지 보수 등 다양한 측면에서 결정적인 이점을 제공합니다.

이러한 시멘틱 태그들은 웹 페이지의 구조를 더 명확하게 표현함으로써 검색 엔진이 페이지를 이해하고 색인화하는 데 도움을 줍니다. 또한, 시각 장애인과 같은 장애를 가진 사용자를 위한 웹 접근성을 향상시키고, 코드의 가독성과 유지 보수성을 대폭 개선합니다.

즉, 온라인 상에 정보를 알리는 글은 인간뿐만 아니라 크롤러(bot)에게도 유용해야 상위에 위치할 수 있는 것입니다. 각 검색엔진 사이트들은 이 크롤러에게 특정한 구조적 요소가 갖춰져 있을 때 유용한 정보로 처리하도록 알고리즘을 정교하게 구성해두고 있습니다.

시멘틱 태그를 써야 하는 이유

1. 웹 페이지의 구조 파악이 용이하다.

시맨틱 태그를 사용하면 웹 페이지의 구조가 명확해지기 때문에, 개발자뿐만 아니라 브라우저나 다양한 도구들이 페이지 구조를 쉽게 파악할 수 있습니다. 페이지 구조를 정확히 파악하는 것은 전체적인 페이지의 사용성을 높이는 데 매우 중요한 기반이 됩니다.

2. 검색 엔진 최적화(SEO) 효과가 높아진다.

시맨틱 태그를 사용하면, 검색 엔진이 페이지의 내용과 맥락을 쉽게 파악할 수 있습니다. 이로 인해 검색 엔진의 이해도가 높아지고, 검색 결과 페이지에서 웹 페이지가 상위 노출될 가능성이 훨씬 높아집니다.

3. 웹 접근성(Web Accessibility) 기준 준수.

웹 접근성은 장애인뿐만 아니라 모든 사용자가 웹 페이지를 이용하는 데 있어서 무리 없이 이용할 수 있도록 보장하는 것을 의미합니다. 시맨틱 태그를 사용하면, 스크린 리더 등의 보조 기기를 사용하는 사용자도 웹 페이지의 구조를 직관적으로 파악하고 쉽게 이용할 수 있습니다.

4. 코드의 가독성이 좋아진다.

시맨틱 태그를 사용하면 코드의 의미가 명확해지기 때문에 전체적인 코드의 가독성이 비약적으로 좋아집니다. 이를 통해, 협업 과정이나 유지보수 과정에서 코드를 분석하고 작성하는 과정에서 오류가 발생할 가능성을 대폭 줄일 수 있습니다.

시멘틱 태그의 종류와 실무 활용

1. <header>

<header> 태그는 문서나 특정 섹션의 머리말을 나타냅니다. 일반적으로 사이트 로고, 상단 제목, 메인 내비게이션, 검색 폼 등을 포함하는 용도로 사용됩니다.

<header>
  <h1>웹사이트 제목</h1>
  <nav>
    <ul>
      <li><a href="#">메뉴1</a></li>
      <li><a href="#">메뉴2</a></li>
      <li><a href="#">메뉴3</a></li>
    </ul>
  </nav>
</header>

2. <nav>

문서의 네비게이션 영역을 나타냅니다. 주로 링크 목록을 포함하며, 사이트의 주요 탐색 기능을 제공하는 핵심 구역입니다. 본 사이트의 상단 목차와 같은 영역에 주로 사용되며, 때로는 사이드바 내부의 주요 메뉴에 적용되기도 합니다.

<nav>
  <ul>
    <li><a href="#">홈</a></li>
    <li><a href="#">소개</a></li>
    <li><a href="#">서비스</a></li>
    <li><a href="#">문의</a></li>
  </ul>
</nav>

3. <main>

문서의 주요 콘텐츠를 나타냅니다. 페이지의 핵심 내용이 들어가는 부분으로, 문서 내에서 오직 하나의 <main> 요소만 사용해야 합니다. 동일한 문서 내에서 반복 사용은 절대 금물입니다.

<main>
  <h2>웹사이트 소개</h2>
  <p>여기에 웹사이트의 핵심 내용이 들어갑니다.</p>
</main>

4. <article>

문서 내의 독립적인 콘텐츠 블록을 나타냅니다. 뉴스 기사, 블로그 포스트, 댓글 등의 개별 항목을 감싸는 데 사용됩니다. 하나의 문서에 여러 개의 article이 존재할 수 있으며, 각각은 외부 컨텍스트와 무관하게 독립적으로 배포되거나 재사용될 수 있는 성격을 가집니다.

<article>
  <h3>글 제목</h3>
  <p>글 내용...</p>
  <p>더 많은 내용...</p>
</article>

5. <footer>

문서나 섹션의 바닥글 영역을 나타냅니다. 일반적으로 제작자 정보, 저작권(Copyright) 정보, 이용약관 링크, 연락처 정보 등을 포함하는 데 활용됩니다.

<footer>
  <p>© 2023 웹사이트. All rights reserved.</p>
  <p>문의: example@example.com</p>
</footer>

6. <section>

문서 내에서 주제별로 관련된 콘텐츠를 그룹화하는 데 사용됩니다. 일반적으로 제목 태그(<h1>, <h2> 등)와 함께 사용하여 문서 내부의 단락이나 장(chapter)을 논리적으로 구분합니다.

<section>
  <h2>서비스</h2>
  <p>서비스에 대한 상세 설명...</p>
</section>

7. <aside>

문서의 주요 내용과는 간접적인 연관성을 가지거나 독립적인 부수 내용을 나타냅니다. 주로 사이드바, 연관 링크, 광고 영역, 관련 부가 정보 등을 포함하며, 본문의 흐름에서 벗어난 정보를 구성할 때 유용합니다.

<aside>
  <h3>광고</h3>
  <p>특별 할인 이벤트 중입니다!</p>
</aside>

8. <figure>와 <figcaption>

이미지, 삽화, 도표, 코드 스니펫 등의 독립적인 그래픽 요소를 감싸고, 해당 요소의 설명을 제공하는 데 사용됩니다. <figure>는 미디어를 감싸며, <figcaption>은 해당 미디어의 캡션이나 설명을 명시합니다.

<figure>
  <img src="image.jpg" alt="이미지 설명">
  <figcaption>이미지 캡션 내용...</figcaption>
</figure>

9. <time>

날짜, 시간, 시간대 등의 시간 정보를 명시하기 위해 사용합니다. <time> 요소에는 datetime 속성을 함께 사용하여 검색엔진이나 브라우저 등 기계가 명확하게 읽을 수 있는 표준 형식으로 날짜와 시간을 지정할 수 있습니다.

<p>게시일: <time datetime="2023-06-12">2023년 6월 12일</time></p>

10. <mark>

텍스트 내에서 특정한 이유로 인해 관심 있게 참조해야 하거나 중요하게 다뤄야 하는 부분을 강조합니다. 보통 일반 텍스트 중 형광펜으로 색칠한 것과 유사한 시각적 하이라이트 효과를 제공합니다.

<p>이 부분은 <mark>중요한 내용</mark>입니다.</p>

11. <blockquote>

외부 소스나 문헌 등에서 인용한 텍스트 블록 전체를 나타냅니다. 웹 브라우저는 일반적으로 이 태그에 들여쓰기나 고유한 스타일을 적용하여 일반 본문과 시각적으로 명확하게 구분합니다.

<blockquote>
  <p>인용된 내용입니다...</p>
  <footer>인용 출처 정보</footer>
</blockquote>

12. <abbr>

축약어 또는 머리글자(Acronym)를 나타냅니다. title 속성을 함께 사용하여 마우스 오버 시 축약어의 전체 원문 명칭을 툴팁 형태로 제공할 수 있습니다.

<p>HTML은 <abbr title="HyperText Markup Language">HTML</abbr>의 약어입니다.</p>

13. <datalist>와 <option>

사용자가 <input> 폼에 데이터를 입력할 때 참고할 수 있는 미리 정의된 추천 선택 항목 목록을 제공합니다. <datalist> 내부의 <option> 태그들을 통해 자동완성 형태의 선택지를 구성할 수 있습니다.

<label for="fruit">좋아하는 과일: </label>
<input list="fruits" id="fruit" name="fruit">
<datalist id="fruits">
  <option value="사과">
  <option value="바나나">
  <option value="딸기">
  <option value="오렌지">
</datalist>

14. <progress>

작업의 완료된 진행 상태를 시각적으로 표시합니다. value 속성으로 현재 진행 수치를 나타내고, max 속성으로 전체 작업의 최대 크기나 기준 범위를 지정합니다.

<p>파일 업로드 진행 상태: <progress value="50" max="100">50%</progress></p>

15. <meter>

알려진 고정 범위 내에서의 측정값이나 분포 비율을 나타냅니다. 디스크 사용량, 투표 결과 비율 등 특정 수치의 범위를 표현할 때 value, min, max 속성을 조합하여 사용합니다.

<p>현재 온도: <meter value="25" min="0" max="100">25°C</meter></p>

16. <details>와 <summary>

사용자의 상호작용에 따라 추가 정보나 상세 내용을 펼치고 숨길 수 있는 대화형 위젯을 제공합니다. <details>는 전체 토글 영역을 감싸며, <summary>는 클릭하여 열고 닫을 수 있는 대표 제목 레이블을 제공합니다.

<details>
  <summary>자세한 내용 보기</summary>
  <p>숨겨져 있던 상세 내용 정보입니다...</p>
</details>

시멘틱 태그 사용 시 주의사항 및 FAQ

구분	권장 사항	피해야 할 사항
<main> 태그	문서 당 정확히 1개만 사용	여러 페이지 영역에 중복해서 남발하는 행위
<section> vs <div>	독립적인 제목과 주제를 가진 구역에 사용	단순 디자인 스타일링 목적만으로 무분별하게 사용
<article>	단독으로 발행되어도 의미가 통하는 글에 사용	레이아웃 박스를 쪼개는 용도로 임의 사용

Q&A 및 실무 체크포인트

• Q: 시멘틱 태그를 쓰지 않고 모든 레이아웃을 <div>로만 구성하면 어떻게 되나요?
  A: 웹 브라우저는 화면을 정상적으로 렌더링할 수 있지만, 검색엔진 크롤러가 문서의 핵심 구조와 맥락을 파악하기 어려워져 SEO(검색엔진 최적화) 점수에 악영향을 미치며, 스크린 리더 사용자들의 웹 접근성이 크게 떨어집니다.
• Q: 하나의 문서에 <section> 안에 다시 <section>을 넣어도 되나요?
  A: 네, 가능합니다. 중첩된 구조 속에서 각 섹션이 고유한 제목(Heading)을 가지고 있다면 계층적인 문서 구조를 형성하는 데 매우 효과적입니다.
• Q: 시멘틱 태그를 적용할 때 디자인(CSS)도 자동으로 바뀌나요?
  A: 대부분의 시멘틱 태그는 브라우저 기본 스타일(User Agent Stylesheet)이 <div>와 유사하게 블록(block) 레벨로 동작할 뿐, 화려한 디자인을 기본 제공하지는 않습니다. 따라서 적절한 CSS 스타일링을 함께 병행해야 합니다.