5. 글자를 구조화하자: 제목, 문단, 줄바꿈, 강조

웹페이지를 만든다고 하면 이미지나 버튼부터 떠올리기 쉽지만, 사실 대부분의 페이지는 글로 이루어져 있습니다. 공지사항도 글, 소개 페이지도 글, 쇼핑몰 상품 설명도 글입니다. 그래서 HTML에서 글을 잘 다루는 법을 익히면, 갑자기 페이지가 훨씬 "읽을 만한 모습"으로 바뀝니다.

이번 장에서는 제목을 세우는 <h1>~<h6>, 문단을 나누는 <p>, 한 줄만 바꾸는 <br>, 흐름을 구분하는 <hr>, 중요한 단어를 강조하는 <strong>와 <em>, 그리고 코드에 메모를 남기는 주석까지 배웁니다. 이 태그들은 화려하지는 않지만, 웹페이지를 사람이 읽기 좋은 문서로 만들어 주는 기본 장비입니다.¹

글은 그냥 쓰는 게 아니라, 구조를 입혀야 한다

초보자 때 가장 자주 하는 착각이 있습니다. 에디터에서 Enter를 몇 번 치면 화면에서도 그대로 줄이 나뉠 거라고 생각하는 것입니다. 하지만 HTML은 우리가 소스 코드에서 넣은 많은 공백과 줄바꿈을 그대로 보여주지 않습니다. 브라우저는 먼저 "이 텍스트가 제목인지, 문단인지, 그냥 이어진 글인지"를 HTML 태그로 판단합니다.¹

예를 들어 아래처럼 그냥 텍스트만 적으면, 브라우저는 이 글의 역할을 정확히 알 수 없습니다.

내 멋진 자기소개
안녕하세요. 저는 HTML을 배우는 중입니다.
오늘은 글자를 구조화하는 방법을 익히고 있어요.

반면 이렇게 태그를 붙이면 의미가 분명해집니다.

<h1>내 멋진 자기소개</h1>
<p>안녕하세요. 저는 HTML을 배우는 중입니다.</p>
<p>오늘은 글자를 구조화하는 방법을 익히고 있어요.</p>

이제 브라우저는 첫 줄이 가장 중요한 제목이고, 그 아래 두 줄은 각각 독립된 문단이라는 사실을 이해합니다. 사람도 읽기 쉬워지고, 검색 엔진도 내용을 파악하기 쉬워지며, 화면 낭독기 같은 보조 기술도 구조를 더 정확하게 전달할 수 있습니다.¹

제목 태그: <h1>부터 <h6>까지

HTML에는 여섯 단계의 제목 태그가 있습니다. 숫자가 작을수록 더 중요한 제목입니다.

<h1>가장 중요한 제목</h1>
<h2>그 아래 단계 제목</h2>
<h3>더 작은 하위 제목</h3>
<h4>네 번째 단계 제목</h4>
<h5>다섯 번째 단계 제목</h5>
<h6>가장 작은 단계 제목</h6>

여기서 중요한 점은 글자 크기보다 의미와 계층입니다. <h1>은 그냥 커다란 글씨가 아니라, 이 페이지의 가장 큰 주제를 나타냅니다. <h2>는 큰 섹션 제목, <h3>는 그 안의 하위 섹션 제목처럼 사용합니다.¹

책으로 비유하면 이해가 쉽습니다. 책 제목이 <h1>, 장 제목이 <h2>, 장 안의 소제목이 <h3>인 셈입니다. 만약 책 제목 다음에 갑자기 소소제목이 튀어나오면 이상하겠죠. HTML도 마찬가지입니다.

<h1>HTML 공부 노트</h1>
<h2>제목 태그 배우기</h2>
<h3>h1과 h2의 차이</h3>
<h3>제목 순서 지키기</h3>
<h2>문단 태그 배우기</h2>

이 구조는 자연스럽습니다. 반면 아래 코드는 어딘가 삐끗한 느낌이 납니다.

<h1>HTML 공부 노트</h1>
<h3>갑자기 너무 깊게 들어간 제목</h3>

초보자라면 우선 이렇게 기억하면 좋습니다.

• 한 페이지에는 보통 <h1>을 하나 두는 습관을 들입니다.

• 제목은 순서대로 내려갑니다. h1 다음에 h2, 필요하면 그 아래 h3를 씁니다.

• 제목 태그는 "크게 보이게 하려고" 쓰는 것이 아니라 "무슨 수준의 제목인지"를 알려 주려고 씁니다.¹

즉, <h3>가 예뻐 보여서 쓰는 게 아니라, 정말로 그 위치가 세 번째 수준의 제목일 때 써야 합니다.

문단 태그: <p>

웹페이지의 본문은 대부분 문단으로 이루어집니다. 문단은 <p> 태그로 만듭니다.

<p>HTML은 웹페이지의 구조를 만드는 언어입니다.</p>
<p>문단을 나누면 글이 훨씬 읽기 쉬워집니다.</p>

브라우저는 <p> 태그를 만나면 하나의 문단으로 인식하고, 앞뒤에 기본 여백도 넣어 줍니다. 그래서 내용이 숨을 쉬는 것처럼 보여서 읽기가 편해집니다.¹

중요한 것은 문단은 Enter 키가 아니라 <p>로 만든다는 점입니다. 에디터에서 줄을 여러 번 바꿔도 브라우저는 그것을 새 문단으로 보지 않습니다.

<p>첫 번째 문장
두 번째 문장
세 번째 문장</p>

이 코드는 브라우저에서 보통 한 문단으로 이어집니다. 문단을 정말 나누고 싶다면 이렇게 해야 합니다.

<p>첫 번째 문장입니다.</p>
<p>두 번째 문장입니다.</p>
<p>세 번째 문장입니다.</p>

글이 길어질수록 문단 나누기는 더 중요해집니다. 한 문단에는 보통 하나의 생각이나 하나의 주제를 담는다고 생각하면 좋습니다. 독자 입장에서는 커다란 글 덩어리보다 짧고 나뉜 문단이 훨씬 편합니다.

<br>: 문단이 아니라, 한 줄만 바꿀 때

<br>은 줄바꿈 태그입니다. 이름도 break, 즉 줄을 끊는다는 뜻입니다. 이 태그를 넣으면 다음 내용이 새 줄에서 시작합니다.²

<p>안녕하세요.<br>저는 HTML 초보자입니다.</p>

화면에는 이렇게 보입니다.

안녕하세요.
저는 HTML 초보자입니다.

여기서 핵심은 <br>이 새 문단을 만드는 태그가 아니라, 한 줄만 바꾸는 태그라는 점입니다. 그래서 주소, 시, 노랫말처럼 줄 자체가 의미를 가질 때 잘 어울립니다.²

예를 들어 주소는 이렇게 쓸 수 있습니다.

<p>
  서울특별시 강남구 테헤란로 123<br>
  5층 HTML 교실<br>
  우편번호 01234
</p>

반대로 아래처럼 문단 사이 간격을 만들려고 <br>를 여러 번 쓰는 것은 좋지 않습니다.

<p>첫 번째 문단</p>
<br>
<br>
<p>두 번째 문단</p>

겉보기에는 그럴듯해 보여도, 의미상으로는 문단 구분이 아니라 줄바꿈을 억지로 늘린 것에 가깝습니다. 특히 화면 낭독기를 사용하는 사람에게는 문단 구조가 흐릿해질 수 있습니다.²

정리하면 이렇습니다. "생각 덩어리"가 바뀌면 <p>, 같은 문단 안에서 "한 줄만" 바꾸고 싶으면 <br>입니다.

<hr>: 내용의 흐름을 가르는 선

<hr>은 가로선을 그리는 태그로 많이 알려져 있지만, 더 정확히 말하면 내용의 주제가 바뀌거나 흐름이 전환되는 지점을 표시하는 태그입니다.³

<h1>나의 주말 기록</h1>
<p>토요일에는 늦잠을 자고 카페에 갔습니다.</p>
<hr>
<p>일요일에는 집에서 HTML을 공부했습니다.</p>

브라우저에서는 보통 가로선처럼 보이기 때문에 시각적으로도 구분이 확실합니다. 하지만 단순 장식이라기보다 "여기서 이야기 흐름이 한 번 바뀝니다"라고 알려 주는 역할이 있습니다.³

<hr>도 <br>처럼 닫는 태그가 없는 빈 태그입니다. 그래서 </hr>처럼 닫지 않습니다.

주의할 점은, 구분선이 멋져 보여서 아무 데나 남발하면 오히려 글이 끊겨 보인다는 것입니다. 정말로 주제 전환이 있을 때만 쓰는 편이 좋습니다.

<strong>와 <em>: 중요한 말, 힘줘 읽을 말

글을 쓰다 보면 어떤 단어는 정말 중요하고, 어떤 부분은 말하듯이 힘을 줘 읽고 싶습니다. 그럴 때 쓰는 태그가 <strong>과 <em>입니다.

먼저 <strong>은 강한 중요성을 나타냅니다.

<p><strong>주의:</strong> 저장하지 않으면 내용이 사라질 수 있습니다.</p>

브라우저에서는 보통 굵게 보이지만, 핵심은 "굵게 보이기"가 아니라 중요한 내용이라는 의미를 담는 것입니다.⁴

<em>은 강조해서 읽는 느낌을 나타냅니다.

<p>저는 HTML이 <em>생각보다</em> 재미있다고 느꼈습니다.</p>

이것도 보통 기울임꼴처럼 보이지만, 중요한 것은 "문장에서 어디에 힘을 주는가"입니다.⁴

두 태그는 비슷해 보여도 역할이 다릅니다.

• <strong>: 중요함, 경고, 핵심 정보

• <em>: 말의 억양이나 강조점

• 둘 다 의미를 담는 태그라서 단순한 꾸밈보다 더 좋은 선택

예문으로 차이를 느껴 봅시다.

<p><strong>마감일은 오늘입니다.</strong></p>
<p>저는 이 부분이 <em>정말</em> 어렵다고 생각했어요.</p>

첫 문장은 중요 공지처럼 느껴지고, 둘째 문장은 말하는 사람이 특정 단어에 힘을 준 느낌이 납니다.

둘을 함께 쓸 수도 있습니다.

<p><strong><em>절대</em> 비밀번호를 공유하지 마세요.</strong></p>

다만 강조는 양념과 비슷합니다. 너무 많이 넣으면 모든 문장이 다 중요해 보여서 오히려 핵심이 흐려집니다.

주석: 화면에는 안 보이는 개발자 메모

HTML 주석은 코드 안에 메모를 남길 때 사용합니다. 문법은 다음과 같습니다.⁵

<!-- 이것은 주석입니다 -->

주석은 브라우저 화면에는 보이지 않습니다. 대신 코드를 보는 사람만 볼 수 있습니다. 그래서 이런 식으로 사용할 수 있습니다.

<h1>나의 영화 리뷰</h1>
<!-- 여기에 나중에 평점 기능을 추가할 예정 -->
<p>오늘 본 영화는 생각보다 재미있었습니다.</p>

주석의 용도는 꽤 실용적입니다. 예를 들어 코드 구역을 구분하거나, 나중에 수정할 내용을 적어 두거나, 잠깐 일부 코드를 숨겨서 테스트할 때 도움이 됩니다.⁵

<!-- 소개 섹션 시작 -->
<h2>자기소개</h2>
<p>안녕하세요. 저는 웹을 배우고 있습니다.</p>
<!-- 소개 섹션 끝 -->

하지만 주석에는 중요한 주의사항이 있습니다. 브라우저 화면에만 안 보일 뿐, 소스 보기에서는 보일 수 있다는 점입니다. 그래서 비밀번호, 개인 정보, API 키 같은 민감한 정보는 주석에 적으면 안 됩니다.⁶

또 하나, 주석은 중첩해서 쓰지 않는 것이 원칙입니다. 주석 안에 또 주석을 넣으려 하면 문법이 꼬이기 쉽습니다.⁵

한 번에 보는 예제

이제 지금까지 배운 태그를 한 페이지 안에 모아 보겠습니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>나의 첫 글 페이지</title>
</head>
<body>
  <!-- 페이지의 메인 제목 -->
  <h1>HTML 공부 일기</h1>

  <p>오늘은 웹페이지에서 글을 정리하는 방법을 배웠다.</p>

  <h2>가장 먼저 배운 것</h2>
  <p>글은 그냥 쓰는 것이 아니라 <strong>구조를 붙여서</strong> 써야 읽기 쉽다.</p>

  <h2>헷갈렸던 부분</h2>
  <p>
    처음에는 Enter를 치면 줄이 바뀔 줄 알았다.<br>
    하지만 HTML에서는 태그가 더 중요했다.
  </p>

  <hr>

  <h2>오늘의 한마디</h2>
  <p><em>작은 태그 하나가 글의 인상을 완전히 바꾼다.</em></p>
</body>
</html>

이 예제에는 제목, 문단, 줄바꿈, 구분선, 강조, 주석이 모두 들어 있습니다. 복잡한 기능은 없지만, 이미 "읽기 좋은 페이지"의 기본 형태가 갖춰져 있습니다.

초보자가 자주 하는 실수

처음에는 비슷해 보여서 실수하기 쉽습니다. 특히 아래 실수는 자주 나옵니다.

제목 태그를 글자 크기용으로 쓰기

<h3>그냥 크게 보이게 하고 싶은 문장</h3>

이렇게 쓰면 보기에는 커질 수 있지만, 의미상으로는 "세 번째 단계 제목"이 되어 버립니다. 제목 태그는 역할에 맞게 써야 합니다.

문단을 <br> 여러 개로 대신하기

첫 번째 내용<br><br><br>두 번째 내용

이 방식은 문단 구조가 불분명합니다. 문단은 <p>로 나누세요.

강조를 남발하기

<p><strong>이것도 중요</strong>하고 <strong>저것도 중요</strong>하고 <strong>전부 중요</strong>하다.</p>

모든 것이 중요하면 사실 아무것도 안 중요해 보입니다. 정말 핵심인 부분만 강조해야 효과가 있습니다.

주석에 비밀 적기

<!-- 관리자 비밀번호: 1234 -->

이건 농담 같지만 실제로 하면 큰일 납니다. 주석은 숨김 서랍이 아니라, 유리 서랍에 가까운 메모입니다.⁶

읽기 좋은 페이지를 만드는 감각

이 장의 핵심은 태그를 외우는 것보다, 글의 역할을 구분하는 감각을 익히는 데 있습니다.

페이지에 가장 큰 제목이 있으면 <h1>을 씁니다. 큰 주제를 나누면 <h2>를 씁니다. 설명 문장은 <p>로 묶습니다. 같은 문단 안에서만 줄을 바꾸고 싶으면 <br>을 씁니다. 이야기가 한 번 전환되면 <hr>을 고려할 수 있습니다. 정말 중요한 말은 <strong>, 말맛을 살리는 강조는 <em>으로 표현합니다. 그리고 코드를 읽는 미래의 나를 위해 주석도 적절히 남길 수 있습니다.

웹페이지는 결국 독자와 만나는 문서입니다. 글이 잘 정리되어 있으면 페이지가 단정해 보이고, 초보자가 만든 페이지라도 훨씬 신뢰감 있게 느껴집니다.

직접 해보기

아래 조건에 맞는 짧은 HTML 본문을 스스로 만들어 보세요.

• <h1> 제목 하나

• <h2> 소제목 두 개

• <p> 문단 세 개

• 같은 문단 안에서 <br> 한 번 사용

• 문단 사이 주제 전환을 나타내는 <hr> 한 번 사용

• <strong> 한 곳, <em> 한 곳 사용

• 주석 한 줄 추가

예를 들어 주제는 "내가 좋아하는 음식", "나의 하루", "HTML 공부 계획"처럼 가벼운 것이면 충분합니다. 중요한 건 멋진 글이 아니라, 글의 구조를 올바르게 표현하는 것입니다.

마무리

이번 장에서 우리는 웹페이지의 글을 어떻게 정리하는지 배웠습니다. 눈에 띄는 기능은 아니지만, 이 부분이 탄탄해야 앞으로 배우게 될 링크, 이미지, 목록, 표, 폼도 제자리를 찾습니다.

이제 여러분은 단순히 글자를 적는 사람이 아니라, 글자에 역할을 부여하는 사람입니다. 웹페이지에 질서를 세우는 첫 번째 감각이 생긴 셈입니다.

참고

¹HTML text fundamentals - Web 개발 학습하기 | MDN

²
: The Line Break element | MDN

³HTML hr tag | W3Schools

⁴HTML Text Formatting | W3Schools

⁵Using HTML comments | MDN

⁶HTML Comments (With Examples) | Programiz