제목과 문단으로 글 구성하기

자기소개 글을 읽기 쉽게 나누려면 페이지 전체를 나타내는 제목과 각 내용을 소개하는 소제목이 필요합니다. HTML에서는 제목과 문단을 요소로 표시해 글의 구조와 의미를 함께 전달할 수 있습니다.

제목과 문단의 역할

핵심은 제목을 글의 계층에 맞게 선택하고, 문단과 강조할 부분에 알맞은 요소를 사용하는 것입니다. 이 예제의 환경은 Chromium입니다.

h1부터 h6까지는 여섯 단계의 제목 요소입니다. h1은 가장 높은 수준이고 숫자가 커질수록 하위 수준입니다. 자기소개 페이지의 주제목에는 h1, 그 아래의 큰 주제에는 h2, h2에 속하는 더 작은 주제에는 h3를 사용할 수 있습니다. 같은 수준의 주제라면 같은 제목 요소를 사용합니다.

p는 하나의 문단을 나타냅니다. 문단 안에서 특별히 중요한 내용은 strong으로, 말할 때 힘을 주어 강조할 내용은 em으로 감쌉니다. 두 요소는 문단 안에 포함할 수 있으며 각각 종료 태그가 필요합니다.

자기소개 글 작성하기

다음 HTML 코드가 예제의 입력입니다. 페이지의 주제목 아래에 소개와 학습 목표를 두고, 학습 목표에 속하는 세부 주제를 한 단계 낮은 제목으로 표시했습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <title>민지의 자기소개</title>
</head>
<body>
  <h1>민지의 자기소개</h1>
  <h2>소개</h2>
  <p>안녕하세요. 저는 웹 페이지 만들기를 배우는 민지입니다.</p>
  <h2>학습 목표</h2>
  <p>저의 목표는 <strong>읽기 쉬운 페이지</strong>를 만드는 것입니다.</p>
  <h3>이번 주의 목표</h3>
  <p>매일 <em>조금씩</em> HTML을 연습합니다.</p>
</body>
</html>

예상 화면에는 민지의 자기소개, 소개, 학습 목표, 이번 주의 목표라는 제목과 각 문단이 순서대로 나타납니다. 일반적인 브라우저 기본 스타일에서는 읽기 쉬운 페이지가 굵게, 조금씩이 기울임꼴로 표시됩니다. 정확한 글꼴과 간격은 브라우저 설정에 따라 달라질 수 있습니다.

코드가 이런 구조가 되는 이유

h1은 글 전체의 제목입니다. 소개와 학습 목표는 모두 주제목 아래의 같은 수준이므로 각각 h2입니다. 이번 주의 목표는 학습 목표의 세부 내용이어서 h3을 사용합니다. 제목 다음의 p는 해당 주제에 관한 문단입니다.

strong은 읽기 쉬운 페이지를 만드는 것이 목표에서 중요하다는 의미를 더합니다. em은 연습을 한꺼번에 많이 하기보다 ‘조금씩’ 한다는 말에 힘을 줍니다. 이 요소들의 기본 모양도 도움이 되지만, 선택 기준은 글자 모양보다 전달하려는 의미입니다. head의 title은 문서 제목을 나타내며, 화면에 보이는 글의 제목은 body 안의 h1입니다.

흔한 실수와 경계 조건

글자를 작게 보이게 하려고 h2 다음에 바로 h4를 고르면 제목 수준을 이해하기 어려워집니다. 실제로 하위 주제가 있다면 h3부터 사용하세요. 반대로 모든 문서에 h1부터 h6까지 다 넣을 필요는 없습니다. 이 예제처럼 필요한 수준까지만 쓰면 됩니다.

줄을 바꾸려고 빈 p를 반복하거나 문단 안에 다른 p를 넣지 마세요. 서로 다른 문단은 각각 별도의 p로 작성합니다. 또한 strong과 em은 단지 굵게 또는 기울여 보이게 할 목적이 아니라, 중요한 내용과 힘주어 읽을 내용을 구분할 때 사용합니다.

연습과 풀이

학습 목표 아래에 앞으로의 계획이라는 같은 수준의 세부 제목을 추가하고, 그 아래에 작은 페이지를 완성합니다.라는 문단을 작성해 보세요. 작은 페이지는 중요한 목표로 표시합니다.

기존 이번 주의 목표와 같은 수준이므로 제목은 h3입니다. 풀이를 기존 문단 뒤에 추가하면 다음과 같습니다.

<h3>앞으로의 계획</h3>
<p><strong>작은 페이지</strong>를 완성합니다.</p>

제목은 여전히 학습 목표 아래에 속하며, strong은 문단 안에서 중요한 대상만 감쌉니다.