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

신문 기사를 분해해보면#

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

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

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>

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로 표현해 보세요. 각 항목에 어떤 태그가 적합한지 스스로 생각해 보고 작성한 후 브라우저에서 확인하세요.

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

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

정리#

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