안녕하세요 이번 포스팅에서는 HTML을 배울 때 가장 먼저 만나게 되는 태그들을정리해 보았습니다. 웹 페이지는 단순히 글자를 나열하는 게 아니라, 태그를 통해 각 요소의 역할과 위치를 브라우저에게 알려주는 것이 핵심입니다.
처음에는 태그 종류가 많아서 막막하게 느껴질 수 있지만, 오늘 소개하는 7가지 태그를 잘 익혀두면 기본적인 웹 페이지 구조는 충분히 만들 수 있습니다.
학습 목표
웹 페이지를 만들 때는 제목인지 · 본문인지 · 특정 영역인지 구조를 구분해야 합니다. 이번 포스팅에서는 가장 기본이 되는 HTML 태그들을 통해 웹 페이지의 구조를 나누는 방법을 익혀보겠습니다.
- 텍스트 구조를 잡아주는 태그 (h1~h6, p) 를 이해한다
- 영역을 나누는 태그 (div, span) 의 차이를 이해한다
- 줄바꿈과 구분선 태그 (br, hr)을 올바르게 사용한다
- 직접 코드를 작성하며 각 태그의 동작을 확인한다
태그 하나씩 살펴보기
텍스트 구조
<h1> ~ <h6>
제목 태그입니다. h1이 가장 크고 h6이 가장 작습니다. 숫자가 클수록 글씨가 작아진다고 생각하면 쉽습니다.
일반적으로 h1은 페이지의 대표 제목으로 사용하며, 보통 한 번 사용하는 경우가 많습니다.
<p>
문단(Paragraph) 태그입니다. 본문 텍스트를 담을 때 사용합니다. p태그는 앞뒤로 자동으로 여백이 생깁니다.
줄바꿈이 필요하다고 <br>을 여러 번 사용하는 것보다, 내용의 흐름이 바뀌는 경우에는 <p> 태그로 문단을 나누는 것이 좋습니다. <p>는 문단이라는 의미를 가지고 있어 코드 구조를 이해하기 쉽고 유지보수에도 유리합니다.
영역 / 구조
<div>
영역을 묶는 컨테이너 입니다. div 하나는 한 줄을 통째로 차지합니다 (블록 요소). CSS로 스타일을 줄 때 자주 활용됩니다.
div는 의미 없이 그냥 "묶음"을 만드는 태그입니다. 내용의 의미보다 레이아웃이 목적일 때 사용합니다.
<span>
텍스트 일부분만 감쌀 때 사용합니다. div와 달리 줄을 차지하지 않고 텍스트 흐름 안에 인라인으로 들어갑니다.
"이 단어만 빨갛게 만들고 싶다"처럼 텍스트 일부만 스타일링 할 때 span 태그가 적절합니다.
줄바꿈 / 구분선
<br>
줄바꿈(Line Break) 태그입니다. 닫는 태그 없이 단독으로 사용합니다. 텍스트 중간에 강제로 줄을 바꿀 때 사용합니다.
<br> 작성자가 원하는 위치에서 줄바꿈이 반드시 필요한 경우에 사용하는 것이 적합합니다.
<hr>
가로선(Horizontal Rule) 태그입니다. 주제나 섹션이 바뀔 때 시각적으로 구분선을 긋고 싶을 때 사용합니다.
<br>처럼 닫는 태그가 없는 빈 요소(void element)입니다.
태그 한눈에 정리
| 태그 | 역할 | 종류 |
| <h1> ~ <h6> | 제목 (h1이 가장 크고 h6이 가장 작음) | 블록 |
| <p> | 문단, 본문 텍스트 | 블록 |
| <div> | 큰 영역 묶기, 레이아웃 구분 | 블록 |
| <span> | 텍스트 일부를 구분하거나 스타일 적용 | 인라인 |
| <br> | 줄바꿈 (닫는 태그 없음) | 빈 요소 |
| <hr> | 가로 구분선 (닫는 태그 없음) | 빈 요소 |
실습하기
VS Code를 실행한 후 새 파일을 엽니다. 파일 안에 느낌표( ! )를 입력하고 Tab 키를 누르면 HTML5 기본 구조가 자동완성됩니다. 이후 아래 예제 코드를 <body> 안에 작성해보세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 자주 쓰는 태그</title>
</head>
<body>
<!-- 제목 태그: h1이 가장 크고, h6이 가장 작습니다 -->
<h1>가장 큰 제목입니다 (h1)</h1>
<h3>조금 더 작은 제목입니다 (h3)</h3>
<!-- p 태그: 본문 문단입니다 -->
<p>이것은 하나의 문단입니다. p 태그는 앞뒤로 자동으로 여백이 생깁니다.</p>
<!-- div 태그: 큰 영역을 묶을 때 씁니다 -->
<div>
이것은 div 영역입니다. 한 줄을 통째로 차지합니다.
</div>
<!-- span 태그: 텍스트 일부만 선택할 때 씁니다 -->
<p>이 문장에서 <span style="color: blue;">span 태그</span>는 일부만 구분합니다.</p>
<!-- br 태그: 강제 줄바꿈 -->
첫 번째 줄<br>
두 번째 줄
<!-- hr 태그: 가로 구분선 -->
<hr>
구분선 아래 내용입니다.
</body>
</html>
코드를 다 작성했으면 VS Code 하단이나 파일에서 우클릭 후 Open with Live Server를 클릭해 브라우저로 열어보세요.
페이지가 열리면 F12키를 눌러 개발자 도구를 실행합니다.
상단 탭에서 Elements를 클릭한 후, 왼쪽 HTML 코드에서 태그를 하나씩 클릭해보세요. 페이지에서 해당 요소가 파란색 하이라이트가 되면서 실제로 어떤 영역을 차지하는지 눈으로 확인할 수 있습니다.
- <h1>, <h3> 태그를 클릭하면 → 크기 차이를 직접 비교할 수 있습니다.
- <p> 태그를 클릭하면 → 위 아래 여백(margin)이 주황색으로 표시됩니다.
- <span> 태그를 클릭하면 → 텍스트 중 일부 영역만 선택된 걸 확인할 수 있습니다.
- <hr> 태그를 클릭하면 → 가로선이 한 줄을 가득 차지하는 걸 볼 수 있습니다.
코드를 조금씩 바꿔가면서 결과가 어떻게 달라지는지 직접 확인하는 것이 가장 빠른 학습법입니다.
마치며
오늘은 HTML에서 가장 자주 사용하는 기본 태그들을 살펴보았습니다. HTML은 웹 페이지의 디자인을 만드는 언어가 아니라 구조를 만드는 언어라는 점을 기억해두세요. 앞으로 CSS를 배우게 되면 오늘 배운 태그들이 어떻게 꾸며지는지 더 쉽게 이해할 수 있습니다.
'HTML CSS JS' 카테고리의 다른 글
| 1-4 목록 태그 (0) | 2026.06.04 |
|---|---|
| 1-2 기본 문서 구조 (0) | 2026.04.29 |
| 1-1. HTML 역할 이해 (1) | 2026.04.23 |