시멘틱 태그 & 웹페이지 구조 설계
✅ 시멘틱 태그란?
HTML을 처음 배울 때 <div>로 모든 구역을 나눴던 기억 있으시죠?
예를 들어 이런 코드입니다
✅ 시멘틱 태그란?
HTML을 처음 배울 때 <div>로 모든 구역을 나눴던 기억 있으시죠?
예를 들어 이런 코드입니다:
<div>로고</div>
<div>메뉴</div>
<div>본문</div>
<div>푸터</div>
이렇게 div만 쓰면 컴퓨터 입장에서는 이게 무슨 영역인지 알 수 없어요.
“디자인은 잘 보이지만, 의미는 알 수 없는 구조”가 되는 거죠.
이 문제를 해결하기 위해 등장한 것이 시멘틱(Semantic) 태그입니다.
Semantic은 ‘의미 있는’이라는 뜻이죠.
✅ 시멘틱 태그란?
단순히 보이는 구조가 아니라, 각 영역이 어떤 의미를 가지는지를 브라우저와 개발자 모두에게 명확하게 설명해주는 태그입니다.
📌 시멘틱 태그 예시
| 태그 | 의미 | 실제 예시 설명 |
| <header> | 페이지 상단 | 로고, 메뉴바 등 포함 |
| <nav> | 내비게이션 영역 | 페이지 이동 링크 모음 |
| <main> | 주요 콘텐츠 영역 | 본문, 핵심 콘텐츠 |
| <section> | 주제별 구획 | 소개 섹션, 특징 섹션 등 |
| <article> | 독립된 콘텐츠 단위 | 블로그 글, 뉴스 카드 등 |
| <footer> | 페이지 하단 | 연락처, 저작권, SNS 링크 등 |
우리가 만약 "카페 소개 페이지"를 만든다고 해볼게요.
- header: “카페 온더브루” 로고와 메뉴
- nav: “대표 메뉴”, “오시는 길” 링크
- main: 이 페이지에서 가장 중요한 내용, 메뉴 소개와 이미지
- section: 대표 메뉴, 위치 정보 등 주제별로 나누는 공간
- footer: 저작권, 인스타그램 링크 등
이걸 시멘틱 태그로 바꾸면 이렇게 됩니다:
<header>로고 & 메뉴</header>
<nav>메뉴 링크</nav>
<main>
<section>대표 메뉴</section>
<section>오시는 길</section>
</main>
<footer>© 2025 Cafe OnTheBrew</footer>
이제 이 구조를 보면 개발자뿐 아니라 검색엔진, 스크린리더(시각장애인 보조 기기)도 각 영역이 무엇을 의미하는지 이해할 수 있게 돼요.
시멘틱 태그를 왜 써야 할까?
1. 개발자와의 협업에서 구조가 명확해져요
- <div class="top">, <div class="wrap"> 대신
<header>, <main> 이렇게 쓰면, 서로 말이 잘 통합니다.
2. SEO(검색엔진 최적화)에 좋아요
- 검색엔진은 콘텐츠가 어떤 의미인지 파악하려고 노력하는데,
시멘틱 태그를 쓰면 콘텐츠 구조를 더 잘 이해합니다.
3. 웹 접근성 향상에 도움
- 시각장애인 등 보조기기를 사용하는 사용자들은 HTML 구조를 기반으로 콘텐츠를 탐색해요.
이 때 시멘틱 태그가 있으면 더 정확하게 콘텐츠를 읽을 수 있습니다.
| 일반 태그 (div) | 시멘틱 태그 사용 시 |
| 의미 없음 | 영역의 역할이 명확해짐 |
| 모든 구역이 비슷해 보임 | 브라우저와 사용자 모두가 구조 파악 가능 |
| 협업 시 혼란 | 개발자/검색엔진/기기 모두에게 친절함 |
“디자인에서도 여백, 색상, 계층 구조처럼 보이지 않는 규칙이 중요하듯,
HTML에서도 시멘틱 구조는 코드의 의미를 살리는 핵심입니다.
구조를 잘 짜는 디자이너는 실무에서 훨씬 신뢰받습니다.”
시멘틱 태그 없는 HTML 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>카페 온더브루</title>
</head>
<body>
<div class="top">
<div class="logo">카페 온더브루</div>
<div class="menu">
<a href="#menu">메뉴</a>
<a href="#location">오시는 길</a>
</div>
</div>
<div class="content">
<div class="section" id="menu">
<h2>대표 메뉴</h2>
<ul>
<li>아메리카노</li>
<li>라떼</li>
<li>치즈케이크</li>
</ul>
</div>
<div class="section" id="location">
<h2>오시는 길</h2>
<p>부산광역시 연제구 중앙대로 123</p>
</div>
</div>
<div class="bottom">
<p>© 2025 Cafe OnTheBrew</p>
</div>
</body>
</html>
오늘 실습 목표
“HTML만으로 나만의 카페 소개 웹페이지를 구성해본다”
오늘은 여러분이 카페 사장님이 되었다고 상상해보세요.
직접 여러분의 브랜드(카페)를 소개하는 간단한 웹페이지를 만들어볼 거예요.
어제 배운 기본 태그 (<h1>, <p>, <ul>, <img>, <a>)와
오늘 배운 시멘틱 태그 (<header>, <nav>, <main>, <section>, <footer>)를
모두 활용해서 구조적으로 잘 짜인 HTML 문서를 만들어보는 게 목표입니다.