HTML 강좌 / 제목과 문단

HTML 강좌

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">
    <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">
    <title>HTML 문단과 줄바꿈</title>
  </head>
  <body>
    <p>첫 번째 문단입니다.</p>
    <p>두 번째 문단의 첫째 줄입니다.<br>두 번째 문단의 둘째 줄입니다.</p>
  </body>
</html>