고정 헤더 영역
상세 컨텐츠
본문
div로만 짜는 HTML은 이제 그만! 의미 있는 구조로 바꿔보자
✅ 시맨틱 태그란?
HTML에서 시맨틱(Semantic)이란 말은 "의미 있는"이라는 뜻입니다.
즉, 시맨틱 태그란 태그 자체가 콘텐츠의 역할이나 구조를 설명해 주는 태그를 말합니다.
예를 들어 <header>는 페이지의 머리말 영역을, <footer>는 바닥글을 의미하죠.
반면 <div>는 아무 의미도 없이 단지 "구역을 나누는 용도"일 뿐입니다.
✅ 시맨틱 태그를 사용하면:
- 접근성이 좋아지고,
- SEO(검색엔진 최적화)에 유리하며,
- 코드 가독성도 향상됩니다.
🧩 시맨틱 태그 예시 모음
| 태그 | 설명 | 사용 예시 |
|---|---|---|
<header> |
페이지나 섹션의 머릿말 | 사이트 로고, 상단 메뉴 등 |
<nav> |
내비게이션 영역 | 링크 모음, 메뉴바 등 |
<main> |
페이지의 주요 콘텐츠 영역 | 본문 전체 |
<section> |
관련 있는 콘텐츠 구역 | 소개, 취미, 연락처 등 개별 영역 |
<article> |
독립적인 콘텐츠 블록 | 블로그 글, 기사 등 |
<aside> |
보조 콘텐츠 | 광고, 관련 링크, 사이드바 등 |
<footer> |
페이지나 섹션의 바닥글 | 저작권, 연락처, 하단 메뉴 등 |
더보기
🤔 <article>과 <section>의 차이점
많은 초보자들이 헷갈려하는 두 태그의 핵심 차이점을 명확히 알아보겠습니다.
📰 <article>: 독립적인 콘텐츠
"이 내용만으로도 완전한 하나의 글이 될 수 있나?"를 생각해보세요.
<!-- 블로그 글 하나하나가 article -->
<article>
<h2>오늘 먹은 맛집 후기</h2>
<p>오늘 신촌에 있는 파스타집에 다녀왔습니다...</p>
<p>맛: ⭐⭐⭐⭐⭐</p>
</article>
<article>
<h2>주말 독서 후기</h2>
<p>이번 주말에 읽은 소설 리뷰입니다...</p>
</article>📋 <section>: 주제별 구역
"관련된 내용들을 묶어놓은 구역"이라고 생각하세요.
<!-- 하나의 페이지 안에서 주제별로 나눈 구역들 -->
<main>
<section>
<h2>회사 소개</h2>
<p>저희 회사는...</p>
</section>
<section>
<h2>제품 소개</h2>
<p>주력 제품은...</p>
</section>
<section>
<h2>연락처</h2>
<p>문의사항은...</p>
</section>
</main>🔍 핵심 구분법
| 구분 | <article> | <section> |
| 독립성 | RSS 피드로 배포 가능한 완전한 콘텐츠 | 페이지 내에서 주제별 구역 나누기 |
| 재사용 | 다른 사이트에 그대로 옮겨도 의미 완전 | 해당 페이지 맥락에서만 의미 있음 |
| 예시 | 블로그 포스트, 뉴스 기사, 댓글 | 소개 섹션, 연락처 섹션, FAQ 섹션 |
💡 실무 팁
✅ 이렇게 생각하세요
- article: "이 내용을 RSS로 구독할 수 있을까?" → Yes면 article
- section: "이 내용들이 하나의 주제로 묶이나?" → Yes면 section
🚫 흔한 실수들
html
<!-- ❌ 잘못된 사용 -->
<article>
<section>회사 소개</section> <!-- 너무 짧고 독립적이지 않음 -->
</article>
<!-- ✅ 올바른 사용 -->
<main>
<section>
<h2>회사 소개</h2>
<p>저희 회사는...</p>
</section>
</main>이제 <article>과 <section>의 차이점이 명확해졌나요? 실제 웹사이트들도 이런 구조로 만들어져 있답니다!
🤔 <div>와 무엇이 다를까?
<!-- 의미가 불분명한 div 사용 -->
<div>
<div>제목입니다</div>
<div>본문입니다</div>
</div>
<!-- 시맨틱 태그 사용 -->
<article>
<header>제목입니다</header>
<p>본문입니다</p>
</article>위처럼 div는 구조를 만들 수는 있지만, 이 영역이 어떤 의미를 가지는지 전혀 알 수 없습니다.
시맨틱 태그는 태그 이름만 보고도 역할이 직관적으로 드러나는 장점이 있습니다.
💻 실습: 자기소개 페이지 구조화하기
앞서 1편에서 만든 자기소개 HTML을 시맨틱 태그로 리팩토링해 봅시다.
📄 기존 코드 (구조 없음)
<body>
<h1>안녕하세요! 저는 홍길동입니다</h1>
<p>저는 웹 개발을 배우고 있는 초보 개발자입니다.</p>
<p>독서와 영화 감상을 좋아합니다.</p>
<ul>
<li>치킨</li>
<li>피자</li>
</ul>
</body>✅ 구조화된 시맨틱 버전
<body>
<header>
<h1>안녕하세요! 저는 홍길동입니다</h1>
</header>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
<main>
<section>
<h2>자기소개</h2>
<p>저는 웹 개발을 배우고 있는 초보 개발자입니다.</p>
</section>
<section>
<h2>취미</h2>
<p>독서와 영화 감상을 좋아합니다.</p>
</section>
<section>
<h2>좋아하는 음식</h2>
<ul>
<li>치킨</li>
<li>피자</li>
</ul>
</section>
</main>
<footer>
<p>문의: <a href="mailto:hong@example.com">hong@example.com</a></p>
</footer>
</body>📌 이렇게 바뀌었어요
<header>: 페이지 상단에 위치한 인사말<main>: 주요 본문을 감싸는 영역<section>: 주제별로 묶은 자기소개, 취미, 음식<footer>: 페이지 하단 연락처
✍️ 오늘의 실습 과제
1편에서 만들었던 자기소개 HTML 파일을 열고,
지금 배운 시맨틱 태그로 구조화해 보세요.
팁:
- 제목은
<header>로, - 소개·취미·음식은 각각
<section>으로, - 전체 본문은
<main>으로, - 연락처는
<footer>로 구성하면 됩니다.
🔜 다음 편 예고
이제 구조는 잘 만들었으니, 보기 좋게 꾸며야겠죠?
다음 글에서는 CSS의 기초를 다루며,
글자 크기, 색, 여백 등을 조절해 디자인 입문으로 넘어갑니다.
👉 [Web UI 기초 #5] CSS 기초 - 나만의 스타일을 입혀보자
곧 이어집니다.
💡 정리 한 줄
의미 있는 구조를 만들면, 웹페이지가 더 똑똑해집니다.
시맨틱 태그로 웹의 '가독성'을 높여주세요.
'프로그래밍 언어 > Front-End' 카테고리의 다른 글
| [Web UI 기초 #부록] 시맨틱 태그 심화: Feedly와 RSS로 이해하는 <article> (1) | 2025.06.16 |
|---|---|
| [Web UI 기초 #3] 내 첫 HTML 문서 만들기 - 기본 구조부터 핵심 태그까지 (1) | 2025.06.02 |
| [Web UI 기초 #부록] 용어 집중 설명: HTML 입문자가 꼭 알아야 할 핵심 용어 정리 (1) | 2025.05.30 |
댓글 영역