[HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기

이전 시간에 우리는 VS Code로 첫 웹페이지를 만들어봤죠.
이제 본격적으로 HTML의 핵심 개념인 “태그(Tag)”를 배워봅시다.

태그는 HTML의 모든 것을 이루는 기본 단위이자,
“웹페이지의 언어”라고 해도 과언이 아닙니다.
쉽게 말해, 태그는 브라우저에게
“이건 제목이야”, “이건 문단이야”, “이건 이미지야”라고 알려주는 명령어입니다.

[HTML 시리즈 2] VS Code 설치부터 첫 웹페이지 만들기

이전 시간에는 HTML이 무엇인지, 그리고 웹페이지가 어떻게 만들어지는지 배웠습니다.이번에는 실제로 코드를 작성할 수 있는 환경을 준비하고,나만의 첫 웹페이지를 완성해 보겠습니다.컴퓨터

ilsandaddy.tistory.com

[HTML 시리즈 1] HTML이란? 웹페이지의 뼈대를 만드는 언어

혹시 인터넷에서 보는 모든 웹사이트가 어떻게 만들어지는지 궁금했던 적 있나요?네이버, 구글, 유튜브, 그리고 여러분의 카페 페이지까지 —이 모든 사이트의 시작은 바로 HTML이라는 언어입니

ilsandaddy.tistory.com

1. 태그란 무엇일까?

태그는 < > 기호로 감싸서 쓰며, 대부분은 열림 태그와 닫힘 태그로 이루어집니다.

예를 들어, 다음은 문단을 나타내는 태그입니다.

<p> 안녕하세요! HTML 공부 중입니다. </p>

<p> → 문단 시작

</p> → 문단 끝

그 사이에 들어가는 내용이 실제 화면에 표시됩니다.

이처럼 HTML 문서는 태그들이 모여 "계층 구조(Tree Structure)"를 이루죠.
하나의 태그 안에 또 다른 태그가 들어갈 수도 있습니다.

2. HTML 태그의 기본 구조

HTML 문서는 항상 다음 구조로 이루어집니다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>본문 내용이 여기에 들어갑니다.</p>

</body>

</html>

각 부분을 해석해 보면:

<!DOCTYPE html>	이 문서가 HTML5임을 선언
<html>	전체 HTML 문서의 시작과 끝
<head>	보이지 않는 설정 정보 (문서 제목, 인코딩 등)
<title>	브라우저 탭에 표시되는 제목
<body>	실제 화면에 보이는 내용
<h1>, <p>	화면에 표시되는 텍스트 요소

즉, <html>은 집의 벽처럼 전체를 감싸고,
<head>는 설계도,

<body>는 실제 공간이라 생각하면 됩니다.

3. 가장 자주 쓰이는 기본 태그 6가지

가장 많이 사용하는 태그 6가지는 위의 사진에서 보듯이

1. html

2. head

3. body

4. title

5. meta

6. div

항상 html 구조에 들어가는 태그들입니다.

그럼 html을 사용할 때 가장 기초가 되는 기본 태그들을 간단히 익혀볼까요?

ⓐ 제목 태그 <h1> ~ <h6>

<h1>이 가장 큰 제목, <h6>이 가장 작은 제목입니다

ⓑ 문단 태그 < p>

문단 태그 <p>>이건 문단이에요

<p>이건 문단이에요.</p>

ⓒ 줄바꿈 <br>

문단 사이에 줄을 바꿔줍니다. 닫는 태그가 필요 없습니다.

안녕하세요!<br>반갑습니다!

ⓓ 굵게 <b> / <strong>

글씨를 굵게 표시합니다.

<b>이 문장은 굵게 표시됩니다.</b>

<strong>은 시각적으로는 동일하지만, 의미적으로 “중요함”을 나타냅니다.

ⓔ 기울임 <i> / <em>

글씨를 기울여 표현합니다.

<i>이 문장은 기울여 표시됩니다.</i>

<em>은 강조(emphasis)의 의미를 가집니다.

ⓕ수평선 <hr>

내용 구분선을 넣습니다.

4. 태그 안에는 “속성(attribute)”이 있다

태그에는 "속성(attribute)"을 추가해 부가적인 정보를 전달할 수 있습니다.
속성은 항상 태그명 속성이름="값" 형태로 작성합니다.

예를 들어, 이미지 태그를 볼까요?

src	이미지의 파일 경로
alt	이미지가 보이지 않을 때 표시되는 설명 문구

<img>는 닫는 태그가 없는 “단일 태그(single tag)”입니다.

5. 태그는 중첩(nesting)될 수 있다

HTML에서는 태그 안에 또 다른 태그를 넣을 수 있습니다.
이를 중첩 구조라고 해요.

<p>이건 <strong>굵은 글씨</strong>가 들어간 문단입니다.</p>

위 코드는 <p> 문단 안에 <strong> 태그가 들어간 형태예요.
단, 열림 순서와 닫힘 순서는 반드시 반대로 맞춰야 합니다.

잘못된 예: <p><strong>굵은 글씨</p></strong>

올바른 예: <p><strong>굵은 글씨</strong></p>

6. 직접 실습해보기

이제 여러분이 직접 입력해볼 차례예요.
아래 코드를 VS Code에 입력하고 저장해 보세요.

<!doctype html>

<html>

<head>

</head>

<body>

<hr> <p><i>이건 기울여진 문장입니다.</i></p>

</body>

</html>

저장 후 브라우저에서 열면,
제목·문단·줄바꿈·강조가 모두 반영된 페이지를 볼 수 있습니다.

7. 마무리 정리

HTML 태그는 웹페이지를 구성하는 최소 단위입니다.
지금까지의 핵심을 정리하면:

태그는 <열림>과 </닫힘>으로 이루어진다.
태그 안에는 속성을 넣어 추가 정보를 전달할 수 있다.
태그는 중첩될 수 있으며, 순서를 지켜야 한다.
<h1>, <p>, <b>, <i>, <hr> 등은 기초 중의 기초다.

이 개념만 확실히 익히면, 앞으로 배우게 될 링크, 이미지, 표, 폼(form) 등도 훨씬 쉽게 이해할 수 있을 거예요.

다음 시간에는

[HTML 시리즈 4] <h1>부터 <p>까지 — 텍스트를 구성하는 방법
에서 실제로 문서의 내용을 “읽기 좋게” 구성하는 실전 연습을 해볼 거예요.

코딩이란? HTML 이란 무엇인가?

컴퓨터가 이해할 수 있는 프로그래밍 언어를 이용해서 컴퓨터에게 특정 작업을 지시하고 명령을 내리는 행위로,이를 통해 웹사이트, 애플리케이션, 게임 등 다양한 소프트웨어를 만드는 과정입

ilsandaddy.tistory.com

저작자표시 비영리 (새창열림)

'CODING' 카테고리의 다른 글

[HTML 시리즈 5] 링크(<a>)와 이미지(<img>) 삽입하기 (0)	2025.10.18
[HTML 시리즈 4] <h1>부터 <p>까지 — 텍스트를 구성하는 방법 (0)	2025.10.18
[HTML 시리즈 2] VS Code 설치부터 첫 웹페이지 만들기 (0)	2025.10.18
[HTML 시리즈 1] HTML이란? 웹페이지의 뼈대를 만드는 언어 (1)	2025.10.13
코딩이란? HTML 이란 무엇인가? (1)	2025.10.12

빅뉴스

[HTML 시리즈 3] 태그(Tag)의 개념과 구조 이해하기

1. 태그란 무엇일까?

2. HTML 태그의 기본 구조