HTML은 웹페이지의 내용을 구조화하는 언어입니다.

그중에서도 텍스트를 작성할 때 자주 사용하는 태그가 있습니다.
제목을 나타내는 h1부터 h6까지의 태그, 문단을 나타내는 p, 줄바꿈을 만드는 br, 인용문을 표현하는 blockquote, q 태그입니다.

이번 글에서는 HTML에서 텍스트를 작성할 때 사용하는 기본 태그들을 정리합니다.

이 글에서 다루는 내용

  • 제목 태그 h1부터 h6까지
  • 문단 태그 p
  • 줄바꿈 태그 br
  • 긴 인용문 태그 blockquote
  • 짧은 인용문 태그 q

1. 제목 태그: h1부터 h6까지

h1부터 h6까지는 제목을 나타내는 태그입니다.

숫자가 작을수록 더 중요한 제목입니다.

<h1>가장 중요한 제목</h1>
<h2>두 번째로 중요한 제목</h2>
<h3>세 번째 제목</h3>
<h4>네 번째 제목</h4>
<h5>다섯 번째 제목</h5>
<h6>가장 작은 제목</h6>

브라우저에서는 보통 h1이 가장 크게 보이고, h6이 가장 작게 보입니다.

하지만 제목 태그는 단순히 글자 크기를 키우기 위한 태그가 아닙니다.
문서의 구조를 나타내기 위한 태그입니다.

예를 들어 블로그 글이라면 다음처럼 사용할 수 있습니다.

<h1>HTML 기본 태그 정리</h1>
<h2>제목 태그</h2>
<h2>문단 태그</h2>
<h3>문단 태그 사용 예시</h3>

h1은 보통 페이지에서 가장 큰 제목으로 한 번만 사용하는 것이 좋습니다.
h2, h3는 글의 소제목처럼 사용합니다.

제목 태그를 글자 크기용으로만 쓰면 왜 어색할까?

아래 코드를 보면 화면에서는 커 보일 수 있습니다.

<h1>공지</h1>
<h4>소개</h4>
<h2>연락처</h2>

하지만 문서 구조는 뒤죽박죽이 됩니다.

제목 태그는 글자 크기를 바꾸기 위한 태그가 아니라, 문서 안에서 어떤 제목이 더 중요한지를 나타내는 태그입니다.

그래서 보통은 아래처럼 위에서 아래로 자연스럽게 내려가는 구조가 좋습니다.

<h1>나의 블로그</h1>
<h2>공지</h2>
<h2>소개</h2>
<h3>연락처</h3>

2. 문단 태그: p

p 태그는 문단을 나타낼 때 사용합니다.

<p>HTML은 웹페이지의 구조를 만드는 언어입니다.</p>
<p>문단을 나눌 때는 p 태그를 사용합니다.</p>

p 태그를 사용하면 브라우저가 문단 사이에 기본 간격을 넣어줍니다.
그래서 글을 읽기 좋게 나눌 수 있습니다.

좋지 않은 예시는 다음과 같습니다.

HTML은 웹페이지의 구조를 만드는 언어입니다.
문단을 나눌 때는 p 태그를 사용합니다.

위처럼 그냥 텍스트만 작성할 수도 있지만, HTML 구조가 명확하지 않습니다.
문단이라면 p 태그로 감싸는 것이 좋습니다.

3. 줄바꿈 태그: br

br 태그는 줄바꿈을 만들 때 사용합니다.

<p>
  안녕하세요.<br>
  HTML을 공부하고 있습니다.
</p>

화면에는 다음처럼 보입니다.

안녕하세요.
HTML을 공부하고 있습니다.

br 태그는 닫는 태그가 없습니다.
즉, </br>처럼 작성하지 않습니다.

다만 br 태그를 문단 간격을 만들기 위해 많이 사용하는 것은 좋지 않습니다.
문단을 나누고 싶다면 p 태그를 사용해야 합니다.

<!-- 좋지 않은 예 -->
안녕하세요.<br><br><br>
HTML을 공부하고 있습니다.

<!-- 좋은 예 -->
<p>안녕하세요.</p>
<p>HTML을 공부하고 있습니다.</p>

br은 주소, 시, 가사처럼 줄바꿈 자체가 의미 있을 때 사용하는 것이 좋습니다.

p와 br은 어떻게 다를까?

둘 다 줄이 바뀌는 것처럼 보일 수 있어서 헷갈리기 쉽습니다.

하지만 의미는 다릅니다.

태그뜻어울리는 상황
p하나의 문단설명 글, 본문, 일반 문장
br줄바꿈 한 번주소, 시, 가사, 이름과 전화번호

즉 p는 내용 단위를 나누는 태그이고, br은 문장 안에서 줄만 바꾸는 태그입니다.

4. 긴 인용문 태그: blockquote

blockquote 태그는 다른 사람의 말이나 글을 길게 인용할 때 사용합니다.

<blockquote>
  HTML은 웹페이지의 구조를 정의하기 위해 사용하는 마크업 언어입니다.
</blockquote>

브라우저에서는 보통 인용문 앞쪽에 여백이 생깁니다.

blockquote는 단순히 들여쓰기 효과를 내기 위한 태그가 아닙니다.
긴 인용문이라는 의미를 나타내는 태그입니다.

예를 들어 책, 문서, 기사에서 가져온 내용을 인용할 때 사용할 수 있습니다.

<p>MDN 문서에서는 HTML을 다음과 같이 설명합니다.</p>

<blockquote>
  HTML은 웹페이지와 그 내용을 구조화하기 위해 사용하는 코드입니다.
</blockquote>

5. 짧은 인용문 태그: q

q 태그는 짧은 인용문을 나타낼 때 사용합니다.

<p>선생님은 <q>HTML은 구조가 중요합니다</q>라고 말했습니다.</p>

브라우저에서는 보통 q 태그 안의 내용에 따옴표가 붙습니다.

blockquote가 긴 인용문에 사용된다면, q는 문장 안에 들어가는 짧은 인용문에 사용합니다.

<blockquote>
  긴 인용문은 blockquote 태그를 사용합니다.
</blockquote>

<p>짧은 인용문은 <q>q 태그</q>를 사용합니다.</p>

blockquote와 q를 한 번에 비교해 보기

같은 인용이라도 길이에 따라 쓰는 태그가 달라집니다.

<p>선생님은 <q>기본이 중요합니다</q>라고 말했습니다.</p>

위 코드는 문장 안에 짧게 들어간 인용입니다.

<blockquote>
  HTML은 웹페이지의 구조를 만들고,
  CSS는 웹페이지를 꾸미며,
  JavaScript는 웹페이지에 동작을 넣습니다.
</blockquote>

위 코드는 문단처럼 길게 따로 떼어낸 인용입니다.

즉 q는 문장 안의 짧은 인용, blockquote는 문단 단위의 긴 인용으로 이해하면 좋습니다.

6. 전체 예시

아래는 이번에 배운 태그들을 함께 사용한 예시입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML 텍스트 태그 예시</title>
</head>
<body>
  <h1>HTML 텍스트 태그 정리</h1>

  <h2>제목 태그</h2>
  <p>h1부터 h6까지는 제목을 나타내는 태그입니다.</p>

  <h2>문단 태그</h2>
  <p>p 태그는 하나의 문단을 나타낼 때 사용합니다.</p>

  <h2>줄바꿈 태그</h2>
  <p>
    대전광역시<br>
    서구 둔산동
  </p>

  <h2>인용 태그</h2>
  <blockquote>
    HTML은 웹페이지의 구조를 만드는 언어입니다.
  </blockquote>

  <p>짧은 인용은 <q>q 태그</q>를 사용합니다.</p>
</body>
</html>

정리

태그의미사용 예시
h1부터 h6까지제목글의 제목, 소제목
p문단일반 본문 텍스트
br줄바꿈주소, 시, 가사
blockquote긴 인용문문단 단위 인용
q짧은 인용문문장 안의 짧은 인용

HTML 태그는 화면에 어떻게 보이는지도 중요하지만, 더 중요한 것은 의미입니다.

제목은 제목 태그로 작성하고, 문단은 p 태그로 작성해야 합니다.
이렇게 작성하면 브라우저, 검색 엔진, 스크린 리더가 문서 구조를 더 잘 이해할 수 있습니다.

자주 헷갈리는 부분

제목처럼 크게 보이고 싶다고 h1부터 h6까지를 아무렇게나 쓰면 안 됩니다

제목 태그는 크기보다 구조가 더 중요합니다.

크기를 바꾸고 싶다면 나중에 CSS로 조절하고, HTML에서는 먼저 의미를 맞게 쓰는 것이 좋습니다.

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

문단이 필요하면 p를 쓰고, 줄바꿈이 필요하면 br을 쓰는 식으로 역할을 나눠야 합니다.

인용문이 아닌데 들여쓰기를 하고 싶어서 blockquote를 쓰면 어색합니다

blockquote는 인용문이라는 뜻이 있기 때문에, 단순히 왼쪽 여백을 만들고 싶을 때 쓰는 태그는 아닙니다.

한 줄 요약

HTML에서 텍스트를 작성할 때는 h1부터 h6까지로 제목을 만들고, p로 문단을 만들며, br, blockquote, q로 줄바꿈과 인용을 표현합니다.

HTML 문서의 큰 구조부터 함께 보고 싶다면 HTML 기본 구조 한 번에 이해하기 글을 같이 읽어보면 좋습니다.

글 전체를 의미 있는 영역으로 나누는 방식은 시맨틱 태그로 HTML 구조 설계하기 글에서 더 이어서 볼 수 있습니다.