웹 표준 과 시멘틱 태그 정리

웹 표준은 HTML , CSS , JavaScript를 작성할 때 W3C에서 정한 공식 문법과 구조 규칙을 따르는 것을 말합니다.

 

 

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

div 하나만 너무 많이 사용하지 말고 의미 있는 태그를 적절히 사용해야 합니다.

1. 검색엔진 최적화(SEO)
   • HTML 구조를 분석해 콘텐츠의 내용을 파악한다.
     이때 시멘틱 태그를 사용하면 페이지의 구조와 의미를 더 명확히 전달할 수 있어 검색 결과에 긍정적인 영향을 줄 수 있다.
2. 스크린 리더 호환
   • 시멘틱 태그는 스크린 리더가 콘텐츠 구조를 올바르게 파악하고 사용자에게 의미 있는 정보를 순서에 맞게 전달할 수 있도록 도와준다.
3. 유지보수 편리
   • 시멘틱 태그를 사용하면 이름만 봐도 그 영역의 역할을 쉽게 파악할 수 있기 때문에 여러 명이 협업할 때 구조를 이해하기 쉽고 수정이나 유지보수를 할때 수월해진다.

시멘틱 태그 정리

HTML5 부터 도입된 시멘틱 태그는 브라우저, 검색엔진, 보조기기 가 콘텐츠의 구조와 의미를 이해할 수 있도록 도와주는 태그 입니다. 콘텐츠의 역할을 명확히 구분해주기 때문에 웹 표준 마크업에 필수적입니다.

 

주요 시멘틱 태그와 용도

태그	의미	사용할 때
header	머리말 영역	페이지나 섹션의 상단에 로고, 메뉴, 제목 등이 들어갈 때
nav	내비게이션	사이트 내 주요 메뉴를 구성할 때
main	주요 콘텐츠	페이지에서 핵심적인 본문 영역을 감쌀 때(한 페이지에 하나만 사용)
section	주제별 구획	관련 있는 콘텐츠를 묶을 때(소개, 서비스, 후기 등)
article	독립적인 콘텐츠	블로그 글, 뉴스, 후기처럼 독립적으로 읽을 수 있는 콘텐츠일 때
aside	부가적인 정보	사이드바, 광고, 관련 링크처럼 본문과 직접적인 관련은 없는 경우
footer	바닥글 영역	연락처, 저작권, 사이트 정보 등 페이지 하단에 위치할 때
h1 ~ h6	제목	페이지나 섹션 제목을 표현할 때(h1은 한 페이지에 한번 사용)
figure / figcaption	이미지나 표의 설명	이미지나 도표를 설명할 때
mark	강조 표시	하이라이트가 필요한 단어에 사용
time	시간 정보	날짜나 시간을 나타낼 때 사용

 

 

예시로 시멘틱 태그 이해하기

 

<header>
  <h1>블로그 제목</h1>
  <nav>
    <ul>
      <li><a href="#">홈</a></li>
      <li><a href="#">소개</a></li>
      <li><a href="#">글 목록</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h2>소개</h2>
    <p>안녕하세요! 프론트엔드 개발자입니다.</p>
  </section>

  <section>
    <h2>최근 글</h2>
    <article>
      <h3>웹 표준이란?</h3>
      <p>웹 표준은 W3C에서 정의한...</p>
    </article>
    <article>
      <h3>시멘틱 태그란?</h3>
      <p>시멘틱 태그는 의미 있는 구조를 표현하기 위해...</p>
    </article>
  </section>
</main>

<footer>
  <p>2025 My Blog NiceKHJ</p>
</footer>