dev_or_alive

[HTML] 시멘틱 태그 본문

Web Programming/HTML

[HTML] 시멘틱 태그

개발로 먹고살자 2025. 4. 13. 20:14

웹 페이지를 만들다 보면 가장 많이 쓰는 태그 중 하나가 바로 <div>입니다.

구조를 나누고 스타일을 입히기에 편리하지만, 문제는 의미가 없다는 점입니다.

이런 문제를 해결하고자 등장한 것이 바로 시멘틱(Semantic) 태그입니다.

이번 글에서는 시멘틱 태그의 종류, 사용해야 하는 이유, 그리고 <div>로만 구성했을 때와의 차이점까지 알아보겠습니다.

✨ 시멘틱 태그란?

시멘틱(Semantic)은 '의미론적인'이라는 뜻을 가지고 있습니다.

즉, 시멘틱 태그란 HTML 요소가 어떤 역할을 하는지 의미를 담고 있는 태그입니다.

예를 들어 <header>는 '페이지의 머리말', <nav>는 '내비게이션', <article>은 '글 하나의 단위'처럼

태그 이름만 봐도 구조의 의도를 파악할 수 있습니다.

✅ 시멘틱 태그의 주요 종류

다음은 가장 많이 사용하는 시멘틱 태그들입니다.

 

태그 의미 및 용도
<header> 문서나 섹션의 헤더 영역입니다. 보통 로고, 제목, 메뉴 등이 포함됩니다.
<nav> 사이트의 주요 내비게이션 링크를 감싸는 영역입니다.
<main> 문서에서 핵심적인 콘텐츠를 감싸는 영역입니다. 한 문서에 하나만 있어야 합니다.
<section> 관련된 내용을 하나로 묶을 때 사용합니다. 제목이 있는 콘텐츠 블록에 적합합니다.
<article> 독립적으로 구분되는 콘텐츠입니다. 블로그 글, 뉴스 기사 등에 사용됩니다.
<aside> 사이드바처럼 주요 내용과 간접적으로 관련된 영역입니다. 광고, 추천 글 등이 해당됩니다.
<footer> 문서나 섹션의 하단 영역입니다. 저작권, 연락처, 사이트 정보 등을 포함합니다.

이 외에도 <figure>, <figcaption>, <mark>, <time> 등의 시멘틱 태그들이 있습니다.

✅ 왜 시멘틱 태그를 써야 할까?

시멘틱 태그를 사용하면 단순히 예쁘게 보이는 것을 넘어서 웹 전체의 구조와 접근성을 개선할 수 있습니다.

🔹 가독성 향상

  • 시멘틱 태그는 태그 자체에 의미가 있어, 코드만 봐도 구조를 직관적으로 이해할 수 있습니다.
  • 협업이나 유지보수할 때도 훨씬 효율적입니다.

🔹 SEO(검색 엔진 최적화)에 유리

  • 검색 엔진은 시멘틱 태그를 보고 페이지의 핵심 콘텐츠와 구조를 더 정확하게 파악할 수 있습니다.
  • 예를 들어 <article> 안의 내용을 블로그 글로 인식하거나, <nav> 안의 링크를 주요 메뉴로 처리할 수 있습니다.

🔹 접근성(Accessibility) 강화

  • 스크린 리더와 같은 보조 기기는 시멘틱 태그를 활용해 페이지 구조를 음성으로 설명할 수 있습니다.
  • 시각장애가 있는 사용자도 웹 콘텐츠를 더 잘 이해할 수 있습니다.

✅ 그냥 <div>로만 처리하면 안 되나?

물론 기술적으로는 <div>만으로도 모든 레이아웃을 만들 수 있습니다.

하지만 다음과 같은 한계가 생깁니다.

 

항목 <div> 사용 시  시멘틱 태그 사용 시
코드 이해도 각 div의 의미 파악이 어려움 (div, div, div...) 태그명만 봐도 역할이 명확함 (header, nav, main...)
유지보수 클래스명을 반드시 봐야 구조 파악 가능 구조가 자연스럽게 드러남
검색엔진 의미가 없어 구조 파악이 어려움 문서 구조를 잘 해석함
접근성 스크린리더가 내용 구분 어려움 스크린리더가 더 나은 내비게이션 제공

결론적으로 의미 없는 <div> 대신 시멘틱 태그를 적절히 사용하면 더 좋은 코드 품질과 사용자 경험을 만들 수 있습니다.

✅ 기본 적인 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>시멘틱 태그 예제</title>
</head>
<body>

  <!-- 사이트의 로고, 제목, 상단 메뉴 등이 들어가는 영역 -->
  <header>
    <!-- 예: 로고 이미지, 사이트 이름, 상단 네비게이션 -->
  </header>

  <!-- 전체 사이트의 주요 내비게이션 메뉴 -->
  <nav>
    <!-- 예: 홈, 소개, 블로그, 연락처 등의 링크 목록 -->
  </nav>

  <!-- 문서의 주요 콘텐츠를 담는 영역 (한 페이지에 하나만 사용) -->
  <main>

    <!-- 개별 콘텐츠 구간을 의미, 주로 제목과 본문이 있는 영역 -->
    <section>
      <!-- 예: 소개글, 기능 설명, 서비스 안내 등 -->
    </section>

    <!-- 독립적인 글이나 기사 단위 콘텐츠 -->
    <article>
      <!-- 예: 블로그 포스트, 뉴스 기사, 공지사항 등 -->
    </article>

    <!-- 주요 콘텐츠와는 약간 떨어진 보조 정보 영역 -->
    <aside>
      <!-- 예: 광고 배너, 관련 글 링크, 인기 글 리스트 등 -->
    </aside>

  </main>

  <!-- 사이트 전체의 하단 정보 -->
  <footer>
    <!-- 예: 저작권, 회사 정보, 연락처, 이용약관 링크 등 -->
  </footer>

</body>
</html>

✅ 간단 설명

  • <header>: 웹사이트나 섹션의 머리말입니다. 로고나 글로벌 메뉴가 자주 들어갑니다.
  • <nav>: 사용자 내비게이션 역할을 하는 메뉴 영역입니다.
  • <main>: 해당 페이지의 핵심 콘텐츠만 포함해야 하며, 한 문서에 한 번만 사용 가능합니다.
  • <section>: 관련 있는 콘텐츠를 묶을 때 사용합니다. 각 section은 제목(<h2>)이 있는 것이 좋습니다.
  • <article>: 독립적으로 존재할 수 있는 콘텐츠 단위입니다. 블로그 글이나 뉴스처럼 재사용 가능한 콘텐츠에 적합합니다.
  • <aside>: 메인 콘텐츠 옆이나 바깥쪽에 위치하는 보조 정보입니다.
  • <footer>: 문서나 페이지의 마지막 부분으로, 법적 정보나 연락처, 저작권 정보 등이 포함됩니다.

✅ 마무리

시멘틱 태그는 HTML5부터 본격적으로 도입된 개념이지만, 지금은 웹 개발의 기본이 되었습니다.

단순한 시각적 구성뿐만 아니라 검색 최적화, 접근성, 협업까지 고려한다면 반드시 익혀야 할 개념입니다.

'Web Programming > HTML' 카테고리의 다른 글

[HTML] Table 태그 및 구성 요소 태그  (0) 2025.04.14
[HTML] Form 태그와 관련 태그들  (0) 2025.04.14
[HTML] 링크와 이미지 <a>, <img>  (1) 2025.04.13
[HTML] 리스트 관련 태그  (0) 2025.04.13
[HTML] 텍스트 관련 주요 태그  (1) 2025.03.30
'Web Programming/HTML' Related Articles more