HTML은 웹 페이지를 이루는 가장 핵심적인 구조입니다.
<body> 내부에 들어가는 주요 태그들은 각각의 역할이 뚜렷하기 때문에, 제대로 알고 써야 웹 페이지 구조가 깔끔해집니다.
이번 포스팅에서는 자주 사용되는 HTML 구조 태그들을 역할별로 정리해보았습니다.
1. <body> 안의 주요 구조 태그
| 태그 |
정의 |
주요 역할 |
| <header> |
웹 페이지나 섹션의 머리말 영역 |
로고, 제목, 소개, 내비게이션 등이 위치 |
| <nav> |
웹 사이트의 주요 탐색 링크 모음 |
메뉴, 사이드바, 링크 목록 등 탐색을 위한 공간 |
| <main> |
문서의 핵심 콘텐츠를 담는 영역 |
해당 페이지의 주요 내용으로, 한 문서에 한 번만 사용됨 |
| <article> |
독립적이고 재사용 가능한 콘텐츠 블록 |
블로그 글, 뉴스 기사처럼 단독으로 의미가 있는 영역 |
| <section> |
관련된 콘텐츠를 묶는 논리적 구역 |
주제별, 기능별로 콘텐츠를 구분할 때 사용 |
| <aside> |
보조 콘텐츠 영역 |
광고, 관련 링크, 사이드 정보 등 주요 내용 외 부가 정보를 담음 |
| <footer> |
웹 페이지나 섹션의 꼬리말 영역 |
저작권, 연락처, 하단 내비게이션 등을 포함 |
2. 요소의 분류: Element vs Container
| 분류 |
정의 |
예시 |
설명 |
| Element (요소) |
웹 페이지를 구성하는 모든 기본 단위 |
<p>, <a>, <img>, <h1>, <strong> 등 |
콘텐츠 자체를 표현하는 실질적인 요소 |
| Container (컨테이너) |
다른 요소들을 묶거나 감싸는 용기 역할 |
<div>, <section>, <article>, <main>, <header>, <footer>, <nav>, <aside> 등 |
구조적 구분을 위해 콘텐츠를 그룹화할 때 사용 |
3. Block-level vs Inline-level 요소
| 분류 |
정의 |
줄 바꿈 |
주요 태그 예시 |
용도 |
| Block-level 요소 |
하나의 블록 단위로 표시되는 요소 |
O |
<div>, <p>, <h1>~<h6>, <ul>, <ol>, <li>, <section>, <article>, <header>, <footer>, <main>, <nav>, <aside>, <form> 등 |
큰 덩어리나 레이아웃을 구성할 때 사용됨 |
| Inline-level 요소 |
한 줄 흐름 안에 자연스럽게 배치되는 요소 |
X |
<a>, <span>, <strong>, <em>, <img>, <label>, <input> 등 |
텍스트 내부에서 강조, 링크, 이미지 삽입 등에 사용됨 |
4. 구조 예시
<!DOCTYPE html>
<html>
<head>
<!-- 메타데이터, 제목, 스타일시트 등 -->
</head>
<body>
<header>
<!-- 로고, 사이트 제목, 내비게이션 등 -->
<nav>
<!-- 주요 탐색 링크 -->
</nav>
</header>
<main>
<section>
<!-- 주제별 콘텐츠 그룹 -->
<article>
<!-- 독립적인 콘텐츠 블록 (예: 블로그 글) -->
</article>
<article>
<!-- 또 다른 독립적인 콘텐츠 블록 -->
</article>
</section>
<aside>
<!-- 보조 정보 (예: 광고, 관련 링크) -->
</aside>
</main>
<footer>
<!-- 저작권 정보, 연락처 등 -->
</footer>
</body>
</html>
요약
| 분류 |
설명 |
예 |
| 본문 구조 태그 |
<header>, <nav>, <main>, <section>, <article>, <aside>, <footer> |
웹 페이지의 전체 구조를 구성할 때 사용 |
| 요소/컨테이너 구분 |
요소: 실제 콘텐츠, 컨테이너: 그룹을 묶는 용도 |
<p>, <a> / <div>, <section> |
| 블록/인라인 요소 |
블록: 줄 바꿈 발생, 인라인: 줄 안에 자연스럽게 배치 |
<div> / <span> |
