HTML 강좌 / 제목과 문단

HTML 강좌

작성일 2024-09-07 최근 수정일 2026-11-02

HTML에서 제목은 h1~h6, 문단은 p 요소로 작성합니다. 제목은 내용의 계층을 나타내고 문단은 관련 문장을 묶습니다. br은 새 문단을 만드는 대신 같은 문단 안에서 줄을 바꿀 때 사용합니다.

h1~h6으로 제목의 단계 나타내기

h1부터 h6까지는 여섯 단계의 제목입니다. 일반적으로 페이지의 주 제목에 h1을 사용하고, 큰 구역에는 h2, 그 안의 하위 주제에는 h3을 사용합니다. 단계가 높고 낮다는 것은 글자 크기보다 내용의 포함 관계를 뜻합니다. 문서의 큰 영역과 제목의 관계는 시맨틱 요소로 페이지 영역 나누기에서 함께 확인합니다.

<h1>웹 접근성 가이드</h1>

<h2>HTML 구조</h2>
<p>HTML 문서 구조를 설명합니다.</p>

<h3>제목 단계</h3>
<p>제목 단계 사용법을 설명합니다.</p>

<h3>문단 구분</h3>
<p>문단 구분 방법을 설명합니다.</p>

<h2>CSS 표현</h2>
<p>CSS로 제목과 문단의 모양을 꾸미는 방법을 설명합니다.</p>

위 예제에서 두 개의 h3은 모두 ‘HTML 구조’라는 h2의 하위 주제입니다. 다음 h2인 ‘CSS 표현’은 같은 단계의 새 구역을 시작합니다. 하위 주제를 만들 때 h2 다음에 곧바로 h4를 쓰는 식으로 단계를 건너뛰지 않는 것이 좋습니다.

제목 구조가 명확하면 독자가 내용을 훑어보기 쉽고, 화면 낭독기 사용자도 제목 사이를 이동하며 문서를 파악하기 좋습니다. 자세한 기준은 W3C WAI의 제목 구조 안내에서 확인할 수 있습니다.

이 강좌처럼 워드프레스가 글 제목을 본문의 h1으로 표시한다면, 본문에 같은 용도의 h1을 다시 넣지 않고 주요 구역을 h2부터 구성합니다.

제목과 문단을 브라우저에서 확인하기

아래 예제는 제목 단계별 기본 표시와 두 문단 사이의 간격을 비교하기 위한 전체 HTML 문서입니다. index.html로 저장해 브라우저에서 열어 볼 수 있습니다. 실제 글에서 여섯 단계의 제목을 모두 써야 한다는 뜻은 아닙니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML 제목과 문단</title>
  </head>
  <body>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
    <p>첫 번째 문단입니다.</p>
    <p>두 번째 문단입니다.</p>
  </body>
</html>

브라우저는 제목마다 다른 기본 크기와 여백을 적용합니다. 다만 이 모양은 브라우저와 CSS 설정에 따라 달라질 수 있습니다. 제목을 더 크거나 작게 보이게 하려고 단계 자체를 바꾸지 말고 CSS로 모양을 조절하세요.

p로 문단 구분하기

p 요소는 하나의 문단을 나타냅니다. 서로 다른 내용을 별도의 p로 묶으면 문장의 관계를 읽기 쉽고 명확하게 전달할 수 있습니다.

<p>HTML은 웹페이지의 구조를 만듭니다.</p>

<p>CSS는 웹페이지의 모양을 지정합니다.</p>

위 코드는 두 개의 문단입니다. 편집기에서 문장 사이에 빈 줄을 입력하는 것만으로는 새 문단 요소가 생기지 않습니다. p에는 문장과 링크 같은 문장 수준의 내용을 넣고, 제목·목록·표를 p 안에 넣지 않습니다.

문단 사이에 공간이 필요할 때 빈 p를 추가하거나 br을 반복하는 대신 CSS의 margin을 사용합니다.

br로 같은 문단 안에서 줄바꿈하기

br 요소는 새 문단을 만들지 않고 줄만 바꿉니다. 주소나 시의 행처럼 줄이 바뀌는 위치 자체가 의미 있을 때 사용합니다. 내용의 주제가 달라진다면 br이 아니라 새 p를 만드는 편이 적절합니다.

다음 예제는 첫 번째 문단 뒤에 새 문단을 만들고, 두 번째 문단 안에서만 br로 줄을 바꿉니다.

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>HTML 문단과 줄바꿈</title>
  </head>
  <body>
    <p>첫 번째 문단입니다.</p>
    <p>두 번째 문단의 첫째 줄입니다.<br>두 번째 문단의 둘째 줄입니다.</p>
  </body>
</html>

제목의 의미 단계는 HTML로 유지하고 시각적인 글자 크기는 CSS의 글꼴·글자 크기·줄 간격 설정을 적용합니다.

제목 계층을 고치는 작은 연습

큰 구역 안에 하위 구역을 처음 만들 때 h2에서 h4로 건너뛰지 않습니다. 다음 조각의 문제는 화면의 글자 크기가 아니라 내용의 단계입니다.

<!-- 계층이 어색한 예 -->
<h2>배송 안내</h2>
<h4>배송 지역</h4>

<!-- 단계에 맞게 고친 예 -->
<h2>배송 안내</h2>
<h3>배송 지역</h3>
<h3>배송 기간</h3>

잘못된 조각과 고친 조각을 각각 별도 문서의 body에 넣어 비교하세요. 실제 문서에서는 두 예를 함께 넣지 않습니다. 제목만 순서대로 읽었을 때 큰 주제와 그 하위 주제가 구분되는지 확인하고, 모양 조절은 CSS에 맡깁니다.

작성할 때 확인할 점

제목은 글자 크기가 아니라 내용의 계층에 따라 h1~h6 중에서 선택합니다.
하위 제목은 단계를 건너뛰지 않고, 바로 뒤에 이어질 내용을 구체적으로 설명하도록 씁니다.
서로 다른 문단은 각각 p로 감싸고, 같은 문단에서 의미 있는 줄바꿈만 br로 표시합니다.
글자 크기와 문단 간격은 제목 단계나 빈 요소 대신 CSS로 조절합니다.

태그가 잘못 중첩됐는지 확인하려면 W3C Markup Validation Service에서 작성한 HTML 문서를 검사할 수 있습니다. 제목을 포함한 읽기 순서와 키보드 점검은 HTML 접근성 기본: 제목·링크·이미지·키보드의 작은 페이지로 시험할 수 있습니다.

HTML 강좌