제목과 문단으로 읽기 좋은 글 만들기

웹페이지의 글도 정리가 필요합니다

웹페이지에 글을 넣는 일은 어렵지 않습니다. <body> 안에 문장을 쓰면 브라우저가 화면에 보여 줍니다.

하지만 문장을 그냥 길게 이어 쓰면 읽기 어렵습니다. 종이에 안내문을 쓸 때도 제목, 소제목, 본문을 나누면 훨씬 편하게 읽을 수 있습니다. HTML도 마찬가지입니다.

이번 장에서는 웹페이지의 글을 읽기 좋게 정리하는 태그를 배웁니다.

• 큰 제목과 작은 제목을 만드는 h1부터 h6

• 문단을 나누는 p

• 꼭 필요할 때 줄을 바꾸는 br

• 중요한 말과 강조하는 말을 표시하는 strong, em

여기서 중요한 목표는 "예쁘게 꾸미기"가 아닙니다. 글의 구조를 먼저 잡는 것입니다. 색이나 크기는 나중에 CSS로 다듬을 수 있습니다. HTML에서는 이 글이 제목인지, 본문인지, 중요한 말인지 알려 주는 일이 먼저입니다.

AI 생성 이미지

제목 태그는 글자 크기용이 아닙니다

HTML에는 제목을 나타내는 태그가 6개 있습니다.

<h1>가장 큰 제목</h1>
<h2>두 번째 단계 제목</h2>
<h3>세 번째 단계 제목</h3>
<h4>네 번째 단계 제목</h4>
<h5>다섯 번째 단계 제목</h5>
<h6>여섯 번째 단계 제목</h6>

브라우저에서 보면 보통 h1이 가장 크게 보이고, h6으로 갈수록 작게 보입니다. 그래서 처음에는 "글자 크기를 고르는 태그인가?" 하고 생각하기 쉽습니다.

하지만 제목 태그의 진짜 역할은 글자 크기가 아니라 문서의 구조를 알려 주는 것입니다.

책을 떠올려 봅시다.

• 책 제목

• 장 제목

• 절 제목

• 본문

이런 순서가 있으면 독자는 내용을 쉽게 따라갑니다. 웹페이지도 같습니다. h1은 보통 그 페이지 전체를 대표하는 제목에 씁니다. h2는 큰 구역의 제목에 씁니다. h3은 h2 안에서 더 작은 내용을 나눌 때 씁니다.

예를 들어 작은 카페 소개 페이지라면 이렇게 생각할 수 있습니다.

<h1>소담 카페</h1>

<h2>카페 소개</h2>
<p>소담 카페는 조용히 쉬어 갈 수 있는 동네 카페입니다.</p>

<h2>대표 메뉴</h2>
<p>핸드드립 커피와 직접 구운 스콘을 준비하고 있습니다.</p>

<h2>오시는 길</h2>
<p>시청역 2번 출구에서 걸어서 5분 거리에 있습니다.</p>

여기서 h1은 페이지 전체의 이름입니다. h2는 소개, 메뉴, 오시는 길처럼 큰 구역을 나눕니다. 이 구조 덕분에 사람도 페이지를 훑어보기 쉽고, 브라우저와 검색엔진도 페이지 내용을 더 잘 이해할 수 있습니다.

반대로 이런 코드는 피하는 편이 좋습니다.

<h1>소담 카페</h1>
<h4>카페 소개</h4>
<h2>대표 메뉴</h2>

h4를 먼저 쓰고 그다음 h2를 쓰면 글의 단계가 어색해집니다. 물론 브라우저는 화면에 표시해 줍니다. 하지만 글의 뼈대가 흔들립니다. 제목 태그는 크기 선택 도구가 아니라 목차를 만드는 도구라고 생각하면 쉽습니다.

h1부터 h6까지 자연스럽게 고르는 법

처음부터 h1부터 h6까지 모두 쓸 필요는 없습니다. 대부분의 간단한 페이지는 h1, h2, 가끔 h3 정도면 충분합니다.

행사 안내 페이지를 만든다고 해 봅시다.

<h1>봄맞이 플리마켓 안내</h1>

<h2>행사 소개</h2>
<p>동네 주민이 함께 만드는 작은 플리마켓입니다.</p>

<h2>일정</h2>
<p>4월 12일 토요일 오전 11시부터 오후 5시까지 열립니다.</p>

<h2>참여 방법</h2>
<p>판매자로 참여하려면 사전 신청서를 작성해 주세요.</p>

이 정도만 해도 충분히 읽기 좋습니다.

만약 "참여 방법" 안에 더 작은 설명이 필요하다면 그때 h3을 씁니다.

<h2>참여 방법</h2>

<h3>판매자로 참여하기</h3>
<p>사전 신청 후 안내 문자를 받으면 참여가 확정됩니다.</p>

<h3>방문객으로 참여하기</h3>
<p>별도 신청 없이 행사 당일 자유롭게 방문할 수 있습니다.</p>

정리하면 이렇습니다.

• h1: 페이지 전체의 대표 제목

• h2: 큰 구역의 제목

• h3: 큰 구역 안의 작은 제목

• h4~h6: 더 깊게 나눌 때 사용

간단한 페이지에서는 제목 단계를 너무 많이 만들지 않아도 됩니다. 중요한 것은 위에서 아래로 자연스럽게 내려가는 흐름입니다.

문단은 p 태그로 묶습니다

제목 아래에 들어가는 본문은 보통 p 태그로 묶습니다. p는 paragraph, 즉 문단을 뜻합니다.

문단은 생각의 한 덩어리입니다. 한 가지 이야기를 담고 있으면 하나의 문단으로 묶습니다.

<p>소담 카페는 조용히 쉬어 갈 수 있는 동네 카페입니다.</p>
<p>혼자 책을 읽거나 친구와 짧게 대화하기 좋은 자리를 준비했습니다.</p>

이렇게 쓰면 브라우저는 두 문단 사이에 자연스럽게 간격을 둡니다. 독자는 글이 어디서 끊기는지 쉽게 알 수 있습니다.

반대로 문장을 모두 한 줄에 이어 쓰면 내용이 답답해 보입니다.

소담 카페는 조용히 쉬어 갈 수 있는 동네 카페입니다. 혼자 책을 읽거나 친구와 짧게 대화하기 좋은 자리를 준비했습니다. 매주 월요일은 쉽니다.

화면에는 보일 수 있지만, HTML 입장에서는 이 글이 어떤 문단인지 분명하지 않습니다. 브라우저와 검색엔진도 내용을 덩어리로 이해하기 어렵습니다.

그래서 본문 글은 가능하면 p 태그로 감싸 주세요.

<p>소담 카페는 조용히 쉬어 갈 수 있는 동네 카페입니다.</p>
<p>혼자 책을 읽거나 친구와 짧게 대화하기 좋은 자리를 준비했습니다.</p>
<p>매주 월요일은 쉽니다.</p>

이 코드는 특별히 화려하지 않습니다. 하지만 좋은 웹페이지의 출발점입니다. 글이 문단으로 나뉘면 나중에 CSS를 더해도 훨씬 다루기 쉽습니다.

br 태그는 꼭 필요한 줄바꿈에만 씁니다

HTML에서 줄을 바꾸고 싶을 때 br 태그를 사용할 수 있습니다.

<p>서울시 중구 세종대로 10<br>소담빌딩 2층</p>

br은 line break, 즉 줄바꿈을 뜻합니다. 닫는 태그 없이 혼자 씁니다.

주소처럼 줄이 바뀌어야 자연스러운 정보에는 br이 잘 어울립니다.

<p>
  소담 카페<br>
  서울시 중구 세종대로 10<br>
  소담빌딩 2층
</p>

짧은 시나 노랫말처럼 줄의 끊김 자체가 의미를 가질 때도 사용할 수 있습니다.

하지만 문단 사이의 간격을 만들려고 br을 여러 번 쓰는 것은 좋지 않습니다.

<p>첫 번째 안내 문장입니다.</p>
<br>
<br>
<p>두 번째 안내 문장입니다.</p>

이렇게 쓰면 당장은 간격이 벌어진 것처럼 보일 수 있습니다. 하지만 HTML의 구조가 깔끔하지 않습니다. 문단 사이의 여백은 나중에 CSS로 조절하는 편이 좋습니다.

기억할 원칙은 간단합니다.

• 새 문단이면 p를 새로 씁니다.

• 주소나 짧은 시처럼 한 문단 안에서 줄을 바꿔야 하면 br을 씁니다.

• 간격을 벌리려고 br을 반복해서 쓰지는 않습니다.

strong은 중요한 말, em은 강조하는 말

글을 쓰다 보면 어떤 단어를 더 눈에 띄게 만들고 싶을 때가 있습니다. 이때 사용할 수 있는 태그가 strong과 em입니다.

strong은 내용상 중요한 말을 표시합니다. 보통 브라우저에서는 굵게 보입니다.

<p><strong>신청 마감일은 4월 5일입니다.</strong></p>

여기서 중요한 것은 "굵게 보인다"가 아니라 "이 문장이 중요하다"는 의미입니다. 마감일, 주의사항, 꼭 확인해야 하는 안내에 잘 어울립니다.

em은 강조해서 읽어야 하는 말을 표시합니다. 보통 브라우저에서는 기울임꼴로 보입니다.

<p>이번 행사는 <em>비가 와도</em> 실내에서 진행됩니다.</p>

이 문장에서는 "비가 와도"라는 표현을 살짝 힘주어 말하고 있습니다.

둘의 차이를 이렇게 생각해 볼 수 있습니다.

• strong: 중요합니다. 꼭 확인하세요.

• em: 이 부분을 강조해서 읽어 주세요.

예를 들어 행사 공지에서는 이렇게 쓸 수 있습니다.

<p><strong>참가비는 현장에서 현금으로만 결제할 수 있습니다.</strong></p>
<p>주차 공간이 적으니 <em>대중교통 이용을 권장합니다.</em></p>

strong과 em도 너무 많이 쓰면 효과가 줄어듭니다. 모든 문장을 강조하면 아무 문장도 강조되지 않는 것과 같습니다. 정말 필요한 단어와 문장에만 사용하세요.

작은 안내 페이지를 함께 만들어 보기

이제 제목, 문단, 줄바꿈, 강조를 함께 사용해 보겠습니다. 이전 장에서 만든 index.html 파일의 <body> 안을 다음처럼 바꿔 보세요.

<body>
  <h1>햇살 공방 원데이 클래스</h1>

  <p>햇살 공방에서는 처음 오신 분도 쉽게 참여할 수 있는 도자기 원데이 클래스를 운영합니다.</p>
  <p>손으로 직접 컵을 만들고, 원하는 문구를 새겨 나만의 작품을 완성해 보세요.</p>

  <h2>수업 일정</h2>
  <p><strong>매주 토요일 오후 2시</strong>에 수업이 시작됩니다.</p>

  <h2>장소</h2>
  <p>
    햇살 공방<br>
    서울시 마포구 연남로 25<br>
    3층
  </p>

  <h2>신청 안내</h2>
  <p>자리는 한 수업에 6명만 준비되어 있습니다. 참여를 원하시면 <em>하루 전까지</em> 신청해 주세요.</p>
</body>

브라우저에서 확인하면 제목은 크게, 소제목은 그보다 작게 보일 것입니다. 문단 사이에는 기본 간격이 생깁니다. 장소는 줄마다 나뉘어 보입니다. 마감이나 일정처럼 중요한 정보는 더 눈에 들어옵니다.

이 화면에서 우리가 한 일은 복잡하지 않습니다. 글을 역할에 맞게 나누었을 뿐입니다.

• 페이지 이름은 h1

• 큰 구역 제목은 h2

• 설명 글은 p

• 주소 줄바꿈은 br

• 중요한 일정은 strong

• 살짝 힘주어 말할 부분은 em

이렇게 정리된 HTML은 사람에게도 읽기 쉽고, 브라우저도 이해하기 쉽습니다.

직접 한 줄씩 바꿔 보기

이번에는 코드를 크게 고치지 말고, 한 줄씩 바꿔 보세요.

먼저 h1의 내용을 자신의 가게, 모임, 행사 이름으로 바꿉니다.

<h1>우리 동네 독서 모임</h1>

그다음 h2 제목을 필요한 구역으로 바꿔 봅니다.

<h2>모임 소개</h2>
<h2>이번 달 책</h2>
<h2>참여 방법</h2>

본문은 각각 p 태그로 나누어 씁니다.

<p>우리 동네 독서 모임은 한 달에 한 권의 책을 함께 읽고 이야기하는 모임입니다.</p>
<p>처음 참여하는 분도 부담 없이 오실 수 있습니다.</p>

장소나 연락처처럼 줄을 나누면 더 보기 좋은 정보에는 br을 사용합니다.

<p>
  매월 첫째 주 수요일 저녁 7시<br>
  별빛 작은도서관 1층 모임방
</p>

마지막으로 꼭 알려야 할 내용에만 strong을 넣어 봅니다.

<p><strong>참여 신청은 모임 전날까지 부탁드립니다.</strong></p>

이 정도만 할 수 있어도 웹페이지의 글을 훨씬 읽기 좋게 만들 수 있습니다.

이번 장에서 기억할 것

HTML로 글을 쓸 때 가장 먼저 생각할 것은 모양이 아니라 구조입니다.

h1부터 h6까지의 제목 태그는 글자 크기를 고르는 도구가 아닙니다. 페이지의 제목과 구역의 제목을 단계적으로 알려 주는 태그입니다.

본문은 p 태그로 문단을 나누어 씁니다. 문단이 나뉘면 독자가 읽기 쉽고, 브라우저와 검색엔진도 내용을 더 잘 이해할 수 있습니다.

br은 줄바꿈이 꼭 필요한 곳에만 사용합니다. 주소처럼 한 문단 안에서 줄을 나눠야 하는 경우에는 좋지만, 여백을 만들기 위해 여러 번 반복해서 쓰지는 않습니다.

strong은 중요한 말에, em은 강조해서 읽을 말에 사용합니다. 둘 다 단순히 굵게 또는 기울게 보이게 하려는 태그가 아니라, 글의 의미를 더 분명하게 만드는 태그입니다.

잘 정리된 글은 화려하지 않아도 편안하게 읽힙니다. HTML을 배울 때 이 감각을 먼저 익히면, 나중에 링크, 이미지, 표, CSS를 더해도 페이지가 쉽게 무너지지 않습니다.