HTML Academy · 강의

제목 h1-h6과 계층 구조

제목 수준을 사용해 의미 있는 문서 구조를 만듭니다.

제목 h1-h6과 계층 구조은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 1번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

제목의 여섯 단계

HTML은 <h1>부터 <h6>까지 여섯 가지 제목 요소를 제공합니다:

h1 — 페이지의 기본 제목(가장 중요함)
h2 — 주요 섹션
h3 — 하위 섹션
h4, h5, h6 — 더 깊은 하위 섹션(대개 필요하지 않음)

제목은 시각적으로 점점 작아지지만, 크기는 번호가 아니라 CSS로 제어됩니다.

의미론적 계층 구조

제목은 문서 개요를 만듭니다. 이는 페이지의 목차와 같습니다:

<h1>HTML Fundamentals</h1>
  <h2>Document Structure</h2>
    <h3>The html Element</h3>
    <h3>The head Element</h3>
  <h2>Text Elements</h2>
    <h3>Headings</h3>
    <h3>Paragraphs</h3>

h1 규칙

<h1>의 권장 사용 방법:

페이지마다 <h1>을 정확히 하나만 사용합니다
<title> 요소와 일치하거나 밀접하게 관련되어야 합니다
페이지의 주요 주제를 나타냅니다
검색 엔진은 SEO에서 <h1>에 큰 비중을 둡니다

단계를 건너뛰지 마세요

제목 단계는 순서대로 사용해야 합니다. h2에서 h4로 건너뛰지 마세요:

<!-- Bad: skips h3 -->
<h2>Section</h2>
<h4>Subsection</h4>

<!-- Good: sequential order -->
<h2>Section</h2>
<h3>Subsection</h3>
<h4>Detail</h4>
<!-- Screen readers use outline order to navigate. Skipping breaks navigation. -->

탐색을 위한 제목

화면 낭독기 사용자는 긴 페이지를 탐색할 때 제목에 의존합니다:

H 키로 제목 사이를 이동합니다
화면 낭독기는 모든 제목을 목차처럼 나열합니다
올바른 계층 구조를 사용하면 시각 없이도 페이지를 탐색할 수 있습니다

스타일과 의미

시각적 크기를 기준으로 제목 단계를 선택하지 마세요. 시각적 크기는 CSS로 지정합니다:

<!-- Bad: using h4 because it looks right -->
<h4 style="font-size: 2rem">Big Heading</h4>

<!-- Good: correct level, sized with CSS -->
<h1>Big Heading</h1>
<!-- CSS: h1 { font-size: 2rem; } -->

섹션 안의 제목

HTML5 섹션 구분 요소를 사용하면 각 섹션에서 제목 계층 구조가 다시 시작됩니다:

<article>
  <h2>Article Title</h2>    <!-- h2 within article -->
  <section>
    <h3>Subtopic</h3>       <!-- h3 within section -->
  </section>
</article>

<aside>
  <h2>Related Links</h2>   <!-- h2 in aside, independent section -->
</aside>

제목 접근성 팁

접근성을 위해 다음 제목 규칙을 따르세요:

모든 페이지에는 하나 이상의 제목이 있어야 합니다
기본 콘텐츠 영역은 <h1>으로 시작해야 합니다
텍스트를 굵게 또는 크게 보이게 하려고 제목을 사용하지 마세요
제목 대신 굵은 텍스트를 사용하지 마세요

SEO와 제목

검색 엔진은 페이지 콘텐츠를 이해하기 위해 제목을 사용합니다:

<h1>은 SEO에서 가장 큰 비중을 차지합니다
대상 키워드를 제목에 자연스럽게 포함하세요
제목은 콘텐츠를 나누어 가독성 측정 지표를 개선합니다
검색 엔진은 결과에 제목을 표시합니다(주요 발췌문)

브라우저 기본 스타일

브라우저는 제목에 기본 스타일을 적용합니다:

/* Default browser heading sizes (approximate) */
h1 { font-size: 2em;   font-weight: bold; }
h2 { font-size: 1.5em; font-weight: bold; }
h3 { font-size: 1.17em;font-weight: bold; }
h4 { font-size: 1em;   font-weight: bold; }
h5 { font-size: 0.83em;font-weight: bold; }
h6 { font-size: 0.67em;font-weight: bold; }

탐색 영역의 제목

제목은 탐색 랜드마크에서도 사용할 수 있습니다:

<nav aria-labelledby="nav-heading">
  <h2 id="nav-heading">Main Navigation</h2>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
  </ul>
</nav>

빠른 확인

구조가 잘 구성된 페이지에는 일반적으로 h1 요소가 몇 개 있어야 할까요?

복습: 제목

제목 계층 구조의 핵심:

여섯 단계: h1부터 h6까지
페이지마다 하나의 h1 — 기본 제목
단계를 순서대로 사용 — 절대 단계를 건너뛰지 않음
제목은 접근 가능한 문서 개요를 만듦
시각적 크기에는 제목 번호가 아니라 CSS를 사용

자주 묻는 질문

“제목 h1-h6과 계층 구조” 강의는 무료인가요?

네 — “제목 h1-h6과 계층 구조” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“제목 h1-h6과 계층 구조”에서 뭘 배우나요?

제목 수준을 사용해 의미 있는 문서 구조를 만듭니다. 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

HTML Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 1번째 강의입니다.

“제목 h1-h6과 계층 구조” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← HTML Academy(으)로 돌아가기