topic★★★★★난이도 · 약 15분

제목과 문단으로 말하기

h1~h6 제목 태그, p 문단, br 줄바꿈, hr 수평선 — 콘텐츠에 구조를 부여한다.

#h1#p#br#hr#제목

왜 배우는가

신문 기사처럼 큰 제목, 소제목, 본문이 명확히 구분되어야 읽기 쉽다. 검색 엔진(SEO)과 스크린 리더(접근성) 모두 제목 계층을 인식한다.

HTML에는 6단계의 제목 크기가 있습니다

html

<h1>가장 큰 제목 (페이지 당 1개)</h1>
<h2>두 번째 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

h1은 페이지에서 한 번만 사용. h2는 큰 섹션 제목, h3는 소제목. 순서를 건너뛰지 않는다 (h1 → h3 X, h1 → h2 → h3 O).

h1은 페이지에서 한 번만 사용합니다 (신문의 대제목). h2는 큰 섹션 제목, h3는 소제목으로 사용합니다. 순서를 건너뛰지 마세요 (h1 → h3 X, h1 → h2 → h3 O).

본문 텍스트는 p 태그로 감쌉니다

html

<p>이것은 첫 번째 문단입니다. HTML에서 문단은 p 태그로 만듭니다.</p>

<p>이것은 두 번째 문단입니다.<br>이렇게 줄을 바꿀 수도 있습니다.</p>

<hr>

<p>수평선(hr) 아래의 새로운 내용입니다.</p>

p는 문단, br은 줄바꿈(셀프 클로징), hr은 수평선(셀프 클로징).

태그	역할
`<p>`	문단 — 텍스트 블록을 만든다
`<br>`	줄바꿈 — 닫는 태그가 없다 (셀프 클로징)
`<hr>`	수평선 — 내용을 구분하는 가로 줄

홈페이지에 제목과 문단을 추가해봅시다

html

<body>
  <h1>김짓의 홈페이지</h1>
  <p>안녕하세요! 웹 개발을 배우고 있는 학생입니다.</p>

  <h2>자기소개</h2>
  <p>저는 코딩에 관심이 많습니다.<br>특히 웹 사이트 만들기가 재미있습니다.</p>

  <hr>

  <h2>학습 목표</h2>
  <p>HTML, CSS, JavaScript를 마스터하고 나만의 홈페이지를 완성하는 것입니다.</p>
</body>

h1~h2 제목 계층과 p 문단, br 줄바꿈, hr 수평선을 모두 활용한 예시.

핵심 개념	설명
h1	페이지에서 가장 큰 제목 (1개만 권장)
h2 ~ h6	숫자가 커질수록 하위 제목, 크기도 작아짐

태그	설명
`<p>`	문단을 나타내는 태그, 자동으로 위아래 여백 생성
`<br>`	줄바꿈을 위한 빈 태그 (닫는 태그 없음)
`<hr>`	수평선을 그리는 빈 태그

h1은 페이지당 1개, 나머지 제목은 h2 → h3 순서로 계층을 지키세요.

실기 드릴 3문항

edit실기 드릴 · 단답형

h1 태그를 한 페이지에서 여러 번 사용해도 되는가?

space_bar실기 드릴 · 빈칸 채우기

HTML에서 줄바꿈을 만드는 태그는 <___> 이다.

check_circle실기 드릴 · OX

<hr> 태그는 닫는 태그가 필요하다.