글자를 다루는 태그 — 제목, 단락, 강조

신문 기사를 분해해보면

신문이나 블로그 글을 보면 항상 비슷한 구조가 있습니다.

크고 굵은 메인 제목
조금 작은 소제목들
본문 단락(문단)
중요한 내용을 굵게 또는 기울여 표시

HTML도 이런 구조를 그대로 표현합니다. 단순히 글자 크기를 조절하는 게 아니라, 이 텍스트가 어떤 의미인지 를 태그로 알려주는 방식입니다.

제목 태그 — `<h1>` ~ `<h6>`

h는 heading(제목) 의 줄임말입니다. 숫자가 클수록 작아집니다.

<h1>1단계 제목 — 가장 크고 중요한 제목</h1>
<h2>2단계 제목</h2>
<h3>3단계 제목</h3>
<h4>4단계 제목</h4>
<h5>5단계 제목</h5>
<h6>6단계 제목 — 가장 작은 제목</h6>

브라우저에서 보면 h1이 가장 크고, h6이 가장 작게 표시됩니다.

제목 태그를 쓸 때 지켜야 할 규칙

한 페이지에 <h1>은 하나만 써야 합니다. 이 페이지의 가장 핵심 제목이 무엇인지 명확히 하나여야 합니다.

<!-- 좋은 예시 -->
<h1>내 소개 페이지</h1>
  <h2>기본 정보</h2>
    <h3>학교</h3>
    <h3>취미</h3>
  <h2>좋아하는 것들</h2>
    <h3>음악</h3>
    <h3>게임</h3>

제목 태그는 글자 크기를 바꾸는 용도가 아닙니다. 글자를 크게 만들고 싶으면 나중에 배울 CSS를 사용합니다. 제목 태그는 오직 중요도와 계층 구조를 표현할 때만 씁니다.

단락 태그 — `<p>`

p는 paragraph(단락, 문단) 의 줄임말입니다.

<p>안녕하세요! 저는 코딩을 배우고 있는 중학생입니다.</p>
<p>HTML이 생각보다 재미있어서 매일 조금씩 연습하고 있어요.</p>

<p> 태그로 감싼 내용은 앞뒤로 자동으로 여백이 생겨 문단처럼 보입니다.

엔터 키로 줄을 바꾸면 안 되나요?

HTML에서는 코드 안에서 엔터를 아무리 많이 눌러도 화면에서는 줄이 바뀌지 않습니다.

<p>
  첫 번째 줄
  두 번째 줄   ← 엔터를 쳤지만 화면에서는 붙어서 나옵니다
</p>

화면에서 줄을 바꾸려면 <br> 태그를 써야 합니다.

줄바꿈 태그 — `<br>`

br은 break(줄 바꿈) 의 줄임말입니다. 닫는 태그 없이 혼자 씁니다.

<p>
  1반 홍길동<br>
  2반 김철수<br>
  3반 이영희
</p>

⚠️ <br>을 문단 구분 용도로 여러 번 쓰는 것은 좋지 않습니다. 문단은 <p> 태그로 나누고, <br>은 시, 주소, 짧은 목록처럼 줄바꿈 자체가 의미 있는 경우에만 씁니다.

강조 태그 — `<strong>`과 `<em>`

특정 텍스트를 강조하고 싶을 때 씁니다.

<p>HTML 학습에서 <strong>가장 중요한 것</strong>은 직접 만들어 보는 것입니다.</p>
<p>저는 코딩이 <em>정말 재미있어요!</em></p>

태그	기본 표시	의미
`<strong>`	굵게	매우 중요한 내용
`<em>`	기울임	강조, 특별한 어조

CSS를 배우면 굵기나 기울임을 자유롭게 바꿀 수 있습니다. 지금은 의미에 맞게 태그를 선택하는 것이 중요합니다.

인라인 vs 블록

HTML 요소는 크게 두 가지 성격으로 나뉩니다.

블록(block) 요소: 줄 전체를 차지하고, 전후에 줄바꿈이 생깁니다.

<h1>, <p>, <div> 등

인라인(inline) 요소: 텍스트 흐름 안에 포함됩니다. 전후에 줄바꿈이 없어요.

<strong>, <em>, <span>, <a> 등

<p>
  이 문장에서 <strong>이 부분</strong>만 굵게 표시됩니다.
  앞뒤 텍스트와 한 줄에 함께 있어요.
</p>

그 외 유용한 텍스트 태그들

<!-- 인용구 -->
<blockquote>
  "꿈을 꾸는 자에게 세계는 좁지 않다."
</blockquote>

<!-- 코드 표시 (배경이 다르게 표시됨) -->
<p>HTML에서 줄바꿈은 <code>&lt;br&gt;</code> 태그로 합니다.</p>

<!-- 취소선 (삭제된 내용) -->
<p>오늘 할 일: <del>숙제하기</del> 완료!</p>

<!-- 위 첨자·아래 첨자 -->
<p>물의 화학식은 H<sub>2</sub>O 이고, 제곱은 x<sup>2</sup>입니다.</p>

<!-- 작은 글씨 (저작권, 면책 등) -->
<small>© 2026 파란여우. 모든 권리 보유.</small>

직접 해보기 ✏️

아래 내용을 HTML로 표현해 보세요. 각 항목에 어떤 태그가 적합한지 스스로 생각해 보고 작성한 후 브라우저에서 확인하세요.

이 페이지의 메인 제목: "홍길동의 자기소개"
소제목 "기본 정보", "학교 생활", "취미"
각 소제목 아래에 2~3문장씩 문단 작성
중요하다고 생각하는 단어를 굵게 또는 기울임으로 강조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>자기소개</title>
</head>
<body>
  <!-- 여기에 작성해 보세요 -->
</body>
</html>

정리

태그	용도
`<h1>` ~ `<h6>`	제목 (h1이 가장 크고 중요, 하나만)
`<p>`	단락(문단)
`<br>`	줄바꿈
`<strong>`	중요한 내용 굵게
`<em>`	강조·특별한 어조 기울임

다음 편에서는 링크와 이미지를 다루는 <a>, <img> 태그를 배웁니다.

신문 기사를 분해해보면

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

제목 태그를 쓸 때 지켜야 할 규칙

단락 태그 — <p>