[HTML 시맨틱 구조 태그] #01 HTML 시맨틱 구조 태그 완전 정리

 

 

 

안녕하세요, 토스트데브입니다!
이번 글에서는 HTML5에서 새롭게 도입되어 의미 있는 문서 구조를 구성하는 데 도움을 주는 시맨틱 태그(Semantic Tags)에 대해 알아보겠습니다.

시맨틱 태그를 잘 사용하면 단순히 보이는 웹페이지를 넘어서, 구조적이고 접근성 높은 문서를 만들 수 있습니다.

 

 

✅ 시맨틱 태그란?

"시맨틱(Semantic)"은 "의미론적인"이라는 뜻입니다.
즉, 시맨틱 태그는 단순히 레이아웃만 나누는 것이 아니라, 해당 영역이 어떤 의미를 갖는지를 브라우저와 개발자, 검색엔진에게 알려주는 태그입니다.

 

 

📌 대표 시맨틱 태그 정리

1. <header> – 머리말 영역

• 페이지 전체나 특정 섹션의 머리말을 나타냅니다.
• 로고, 사이트명, 내비게이션 메뉴 등을 포함할 수 있어요.

<header>
  <h1>토스트데브</h1>
  <nav> ... </nav>
</header>

• 한 문서 안에서 여러 번 사용 가능합니다.
  (예: 페이지의 헤더, 각 글의 헤더 등)

 

2. <footer> – 꼬리말 영역

• 문서나 섹션의 바닥 영역(푸터)를 나타냅니다.
• 작성자 정보, 저작권, 연락처, 관련 링크 등을 담습니다.

<footer>
  <p>© 2025 토스트데브. All rights reserved.</p>
</footer>

 

3. <main> – 문서의 핵심 콘텐츠

• 페이지에서 가장 중심이 되는 콘텐츠 영역을 의미합니다.
• 한 문서에 단 한 번만 사용해야 합니다!

<main>
  <h2>HTML 시맨틱 태그 배우기</h2>
  <p>시맨틱 태그는 구조를 더 의미 있게 만들어줍니다.</p>
</main>

• 내비게이션, 사이드바, 헤더, 푸터는 <main> 안에 넣지 않습니다.

 

4. <section> – 구획화된 논리적 영역

• 하나의 주제를 가진 콘텐츠 묶음을 표현할 때 사용합니다.
• 보통 <h1>~<h6> 제목 태그와 함께 쓰는 것이 좋습니다.

<section>
  <h2>HTML 기초</h2>
  <p>HTML은 HyperText Markup Language의 약자입니다.</p>
</section>

 

5. <article> – 독립 가능한 콘텐츠

• 블로그 글, 기사, 카드 등 독립적으로 배포 가능한 콘텐츠에 사용됩니다.
• 내부에 또 다른 <section>, <header>, <footer> 등이 들어갈 수 있습니다.

<article>
  <header>
    <h2>HTML이란?</h2>
    <p>작성자: 토스트데브</p>
  </header>
  <p>HTML은 웹 페이지의 뼈대를 만드는 마크업 언어입니다.</p>
</article>

 

6. <aside> – 보조 정보 영역

• 본문 외에 보조적인 정보나 광고, 관련 링크, 사이드바 등에 사용됩니다.

<aside>
  <h3>관련 글</h3>
  <ul>
    <li>HTML 기본 구조</li>
    <li>블록 vs 인라인 태그</li>
  </ul>
</aside>

 

 

🔍 시맨틱 태그 사용의 이점

✅ 구조가 명확해져서 유지보수가 쉬워진다.
✅ 브라우저와 스크린 리더(접근성 도구)가 문서를 잘 이해할 수 있다.
✅ 검색엔진(SEO)이 문서의 콘텐츠를 정확히 인식할 수 있다.
✅ 다른 개발자나 협업자에게 의도를 명확히 전달할 수 있다.

 

 

✅ 마무리 요약

태그	의미	사용예시
<header>	머리말	로고, 메뉴
<footer>	꼬리말	저작권, 정보
<main>	주요 내용	기사, 포스트 본문
<section>	구획화된 영역	챕터, 카테고리
<article>	독립 콘텐츠	블로그 글, 뉴스
<aside>	보조 정보	광고, 관련 글

 

 

시맨틱 태그는 구조와 의미를 함께 담은 HTML의 핵심 요소입니다.
레이아웃을 잡기 전에, 먼저 “이 영역이 어떤 의미를 가지는가?”를 생각하며 시맨틱 태그를 선택해보세요.

다음 글에서는 시맨틱 태그들을 활용해 실제 웹페이지의 구조를 어떻게 짜는지 예시를 통해 실습해보겠습니다.

 

#HTML #HTML기초 #시맨틱태그 #semanticHTML #header태그 #footer태그 #main태그 #section태그 #article태그 #aside태그 #웹접근성 #웹표준 #웹문서구조 #웹퍼블리싱 #프론트엔드 #toastdev #코딩입문 #웹개발공부