실행 가능한 HTML 문서: 제목 태그

Q: HTML 제목 태그는 몇 개인가요?

여섯 개예요. , , , , , 이에요. 이 가장 중요하고(페이지 제목) 이 가장 덜 중요해요. 은 없고, 그런 태그는 알 수 없는 인라인 요소로 취급돼요.

Q: HTML 제목 태그의 기본 크기는 얼마인가요?

기본 글자 크기가 16px일 때 브라우저는 h1을 32px(2em), h2를 24px(1.5em), h3을 18.72px(1.17em), h4를 16px(1em), h5를 13.28px(0.83em), h6을 10.72px(0.67em)로 표시하고, 모두 굵게 나와요.

Q: 한 페이지에 h1을 여러 개 써도 되나요?

HTML에서는 허용되지만, 페이지 이름을 나타내는 하나가 스크린 리더 사용자와 검색 엔진에게 가장 명확한 구조예요. 그 아래 주요 섹션에는 를 쓰세요.

Q: h2에서 h4로 건너뛰듯이 제목 단계를 건너뛰어도 되나요?

피하세요. 스크린 리더 사용자는 제목 단계로 페이지를 탐색하는데, h2에서 h4로 건너뛰면 섹션이 빠진 것처럼 보여요. 단계는 개요상의 위치로 정하고 크기는 CSS로 바꾸세요.

Q: 제목 크기는 어떻게 바꾸나요?

CSS에서 font-size를 지정하세요. 예를 들어 h2 { font-size: 20px; }처럼 쓰거나 제목 하나에 클래스를 주세요. 기본 크기 때문에 제목 단계를 고르면 안 돼요.

HTML 제목 태그: h1~h6 크기, 순서, 스타일

HTML에는 페이지의 개요를 만드는 제목 단계가 <h1>부터 <h6>까지 여섯 개 있어요. 기본 크기, 제목 순서 정하는 법, h1을 몇 개 쓸지, CSS로 크기를 바꾸는 법, 스크린 리더가 제목을 활용하는 방식을 알아봐요.

이 페이지에는 실행 가능한 에디터가 있습니다 - 편집하고 실행하면 결과를 바로 볼 수 있습니다.

작성자 Kevin Spektor, Co-founder & CTO

Sep 24, 2026 게시됨

HTML 제목 태그 여섯 개

HTML에는 <h1>부터 <h6>까지 여섯 단계의 제목이 있어요. <h1>이 최상위(페이지 제목)이고 <h6>이 가장 낮아요. 브라우저는 단계가 내려갈수록 작게, 모두 굵게, 각각 한 줄씩 표시해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Headings</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>A paragraph, for comparison.</p>
</body>
</html>

태그	기본 크기	글자 크기 16px일 때
`<h1>`	2em	32px
`<h2>`	1.5em	24px
`<h3>`	1.17em	18.72px
`<h4>`	1em	16px
`<h5>`	0.83em	13.28px
`<h6>`	0.67em	10.72px

<h5>와 <h6>은 기본적으로 일반 텍스트보다 작아서 의외라고 느끼는 사람이 많아요. 크기는 기본값일 뿐이고, 다음 섹션에서 왜 크기로 단계를 고르면 안 되는지 설명해요.

제목은 페이지의 개요예요

제목은 장식이 아니에요. 제목들이 모여 책의 목차처럼 페이지의 개요를 이뤄요. 스크린 리더 사용자는 제목에서 제목으로 건너뛰며 원하는 내용을 찾고, 검색 엔진은 제목을 읽어 페이지의 주제를 파악해요.

규칙은 간단해요. 페이지 제목에는 <h1> 하나, 주요 섹션마다 <h2>, <h2> 안의 하위 섹션에는 <h3>, 이런 식으로 단계를 건너뛰지 않고 써요. 이 예제는 보조 기술이 보는 것과 같은 방식으로 제목들에서 목차를 만들어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Outline</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    #toc { background: #e5e7eb; padding: 8px 12px; border-radius: 6px; font-size: 14px; }
  </style>
</head>
<body>
  <div id="toc"></div>
  <h1>Pasta recipes</h1>
  <h2>Tomato sauce</h2>
  <h3>Ingredients</h3>
  <h3>Steps</h3>
  <h2>Pesto</h2>
  <h3>Ingredients</h3>
  <script>
    const lines = [...document.querySelectorAll('h1, h2, h3, h4, h5, h6')].map((h) => {
      const level = Number(h.tagName[1]);
      return '\u00a0'.repeat((level - 1) * 4) + h.tagName.toLowerCase() + ': ' + h.textContent;
    });
    document.getElementById('toc').innerHTML = lines.join('<br>');
  </script>
</body>
</html>

두 번째 <h3>을 <h5>로 바꾸면 개요에 빈틈이 생겨요. 제목으로 탐색하는 사람은 h4가 어디 갔는지 궁금해할 거예요.

제목 크기 바꾸기

단계는 개요상의 위치로 고르고, 모양은 CSS로 정하세요. 사이드바 제목은 <h2>여야 하지만 작게 보여야 할 수도 있고, 히어로 제목은 아주 큰 <h1>일 수도 있어요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading size</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    h1 { font-size: 44px; margin-bottom: 4px; }
    h2 { font-size: 18px; color: #2563eb; text-transform: uppercase; letter-spacing: 0.05em; }
    .quiet { font-weight: 500; font-size: 16px; color: #4b5563; }
  </style>
</head>
<body>
  <h1>Big hero title</h1>
  <h2>Small section label</h2>
  <p>Still an h2 for screen readers, whatever it looks like.</p>
  <h2 class="quiet">A quiet h2 with a class</h2>
</body>
</html>

반대도 마찬가지예요. 텍스트를 크게 하거나 굵게 하려고 제목 태그를 쓰지 마세요. 문장 안의 굵은 단어에는 <strong>을, 제목이 아닌 큰 텍스트에는 클래스를 준 <p>를 쓰세요. 텍스트 태그는 굵게에서 다뤄요.

부제목과 태그라인

제목 바로 아래의 부제목은 보통 그 자체로 제목이 아니에요. 새 섹션을 시작하지 않으니까요. 문단을 쓰고, 원한다면 <hgroup>으로 둘을 묶으세요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Subtitle</title>
  <style>
    body { font-family: system-ui, sans-serif; color: #111827; }
    hgroup h1 { margin-bottom: 0; }
    hgroup p { margin-top: 4px; color: #4b5563; font-size: 18px; }
  </style>
</head>
<body>
  <hgroup>
    <h1>Coffee Guide</h1>
    <p>Everything about brewing at home</p>
  </hgroup>
  <h2>Grinding</h2>
</body>
</html>

개요는 깔끔하게 유지되고(h1 하나, 그다음 h2 섹션들), 태그라인은 여전히 시각적으로 제목과 함께 있어요.

제목으로 링크하기

제목에 id를 주면 href에 #id가 들어간 링크로 그 제목까지 바로 이동할 수 있어요. 목차와 "섹션 링크 복사" 버튼이 이렇게 동작해요.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Heading links</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    section { min-height: 400px; border-top: 2px solid #e5e7eb; }
  </style>
</head>
<body>
  <nav><a href="#install">Install</a> | <a href="#usage">Usage</a></nav>
  <section><h2 id="install">Install</h2></section>
  <section><h2 id="usage">Usage</h2></section>
</body>
</html>

자주 하는 실수

크기를 보고 단계를 고름. 개요상의 위치로 고르고 CSS로 꾸미세요.
단계를 건너뜀. <h2>에서 바로 <h4>로 가면 스크린 리더 사용자의 탐색이 깨져요.
강조하려고 제목을 씀. 문단 안의 굵은 줄은 <h4>가 아니라 <strong>이에요.
<h1>이 없거나 로고만 <h1>임. <h1>은 글 제목이나 상품 이름처럼 페이지 콘텐츠의 이름이어야 해요.
빈 제목. 아이콘만 있거나 아무것도 없는 제목은 빈 것으로 읽혀요. 실제 텍스트를 넣으세요.

자주 묻는 질문

HTML 제목 태그는 몇 개인가요?

여섯 개예요. <h1>, <h2>, <h3>, <h4>, <h5>, <h6>이에요. <h1>이 가장 중요하고(페이지 제목) <h6>이 가장 덜 중요해요. <h7>은 없고, 그런 태그는 알 수 없는 인라인 요소로 취급돼요.

HTML 제목 태그의 기본 크기는 얼마인가요?

기본 글자 크기가 16px일 때 브라우저는 h1을 32px(2em), h2를 24px(1.5em), h3을 18.72px(1.17em), h4를 16px(1em), h5를 13.28px(0.83em), h6을 10.72px(0.67em)로 표시하고, 모두 굵게 나와요.

한 페이지에 h1을 여러 개 써도 되나요?

HTML에서는 허용되지만, 페이지 이름을 나타내는 <h1> 하나가 스크린 리더 사용자와 검색 엔진에게 가장 명확한 구조예요. 그 아래 주요 섹션에는 <h2>를 쓰세요.

h2에서 h4로 건너뛰듯이 제목 단계를 건너뛰어도 되나요?

피하세요. 스크린 리더 사용자는 제목 단계로 페이지를 탐색하는데, h2에서 h4로 건너뛰면 섹션이 빠진 것처럼 보여요. 단계는 개요상의 위치로 정하고 크기는 CSS로 바꾸세요.

제목 크기는 어떻게 바꾸나요?

CSS에서 font-size를 지정하세요. 예를 들어 h2 { font-size: 20px; }처럼 쓰거나 제목 하나에 클래스를 주세요. 기본 크기 때문에 제목 단계를 고르면 안 돼요.