• Skip to main content
  • Skip to search
  • Skip to select language
MDN Web Docs
  • References
    • Overview / Web Technology

      Web technology reference for developers

    • HTML

      Structure of content on the web

    • CSS

      Code used to describe document style

    • JavaScript

      General-purpose scripting language

    • HTTP

      Protocol for transmitting web resources

    • Web APIs

      Interfaces for building web applications

    • Web Extensions

      Developing extensions for web browsers

    • Accessibility

      Build web projects usable for all

    • Web Technology

      Web technology reference for developers

  • Learn
    • Overview / MDN Learning Area

      Learn web development

    • MDN Learning Area

      Learn web development

    • HTML

      Learn to structure web content with HTML

    • CSS

      Learn to style content using CSS

    • JavaScript

      Learn to run scripts in the browser

    • Accessibility

      Learn to make the web accessible to all

  • Plus
    • Overview

      A customized MDN experience

    • AI Help

      Get real-time assistance and support

    • Updates

      All browser compatibility updates at a glance

    • Documentation

      Learn how to use MDN Plus

    • FAQ

      Frequently asked questions about MDN Plus

  • Curriculum New
  • Blog
    • Playground

      Write, test and share your code

    • HTTP Observatory

      Scan a website for free

    • AI Help

      Get real-time assistance and support

  • Log in
  • Sign up for free
  1. 개발자를 위한 웹 기술
  2. HTML: Hypertext Markup Language
  3. HTML 참고서
  4. HTML 요소 참고서
    • English (US)
    • Deutsch
    • Español
    • Français
    • 日本語
    • Português (do Brasil)
    • Русский
    • 中文 (简体)
    • 正體中文 (繁體)

이 페이지는 영어로부터 커뮤니티에 의하여 번역되었습니다. MDN Web Docs에서 한국 커뮤니티에 가입하여 자세히 알아보세요.

목차

  • 시도해 보기
  • 특성
  • 사용 일람
  • 예제
  • 접근성 고려사항
  • 명세
  • 브라우저 호환성
  • 같이 보기
  1. HTML: Hypertext Markup Language
  2. 안내서:
  3. 콘텐츠 카테고리
  4. Comments
  5. HTML의 날짜와 시간 형식
  6. Constraint validation
  7. Viewport meta tag
  8. 반응형 이미지
  9. Microdata
  10. Microformats
  11. Quirks 모드
  12. HTML cheatsheet
  13. How to
  14. Define terms with HTML
  15. 데이터 속성 사용하기
  16. 교차 출처 이미지와 캔버스 허용하기
  17. Add a hitmap on top of an image
  18. Tips for Authoring Fast-loading HTML Pages
  19. Add JavaScript
  20. 참고서:
  21. 요소
    1. 지원이 중단되었습니다
    2. 지원이 중단되었습니다

    3. 지원이 중단되었습니다
    4. 지원이 중단되었습니다
    5. Experimental
    6. 지원이 중단되었습니다
    7. 지원이 중단되었습니다
    8. 지원이 중단되었습니다

예제 페이지

다음 코드는 약간의 제목과 내용을 보여줍니다.

html

Heading elements

Summary

Some text here...

Examples

Example 1

Some text here...

Example 2

Some text here...

See also

Some text here...

접근성 고려사항

탐색

스크린 리더 사용자가 흔히 사용하는 탐색 기법은 제목에서 제목으로 뛰어넘으며 페이지 콘텐츠를 빠르게 파악하는 것입니다. 따라서 제목 단계를 뛰어넘으면 중간에 빠진 제목이 어디 있는 건지 모르므로 사용자의 혼란을 야기할 수 있습니다.

하지 말것

html

Heading level 1

Heading level 3

Heading level 4

할것

html

Heading level 1

Heading level 2

Heading level 3

중첩

하위 구획으로 제목을 중첩해 콘텐츠의 구조를 나타낼 수 있습니다. 대부분의 스크린 리더는 페이지의 제목을 정렬한 목록도 생성해 제공하므로, 사용자가 빠르게 콘텐츠 구조를 파악할 수 있도록 도와줍니다.

  1. h1 Beetles

    1. h2 Etymology

    2. h2 Distribution and Diversity

    3. h2 Evolution

      1. h3 Late Paleozoic
      2. h3 Jurassic
      3. h3 Cretaceous
      4. h3 Cenozoic
    4. h2 External Morphology

      1. h3 Head

        1. h4 Mouthparts
      2. h3 Thorax

        1. h4 Prothorax
        2. h4 Pterothorax
      3. h3 Legs

      4. h3 Wings

      5. h3 Abdomen

중첩 제목에서, 하위 구획을 닫을 땐 제목 단계를 위로 "건너뛸" 수 있습니다.

  • Headings • Page Structure • WAI Web Accessibility Tutorials
  • MDN Understanding WCAG, Guideline 1.3 explanations
  • Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
  • MDN Understanding WCAG, Guideline 2.4 explanations
  • Understanding Success Criterion 2.4.1 | W3C Understanding WCAG 2.0
  • Understanding Success Criterion 2.4.6 | W3C Understanding WCAG 2.0
  • Understanding Success Criterion 2.4.10 | W3C Understanding WCAG 2.0

구획 콘텐츠 레이블

스크린 리더 사용자가 자주 사용하는 다른 기술은 콘텐츠 구획의 목록을 생성한 후, 이를 통해 페이지 레이아웃을 파악하는 것입니다.

콘텐츠 구획에는 aria-labelledby와 id 특성을 함께 사용해 이름, 즉 레이블을 붙일 수 있습니다. 레이블은 현재 구획의 목적을 간결하게 설명해야 합니다. 레이블 기법은 한 페이지에 다수의 구획이 있을 때 유용하게 사용할 수 있습니다.

예제

html

주 탐색창

하단 탐색창

위의 예제에서 스크린 리더는 두 개의

구획이 있으며, 하나는 "주 탐색창", 다른 하나는 "하단 탐색창"이라고 불린다는 사실을 표현합니다. 레이블을 지정하지 않았다면, 사용자가 각
요소의 콘텐츠를 일일히 분석해 목적을 알아내야 했을 것입니다.

  • Using the aria-labelledby attribute
  • Labeling Regions • Page Structure • W3C WAI Web Accessibility Tutorials

명세

Specification
HTML
# the-h1,-h2,-h3,-h4,-h5,-and-h6-elements

브라우저 호환성

html.elements.h1

html.elements.h2

html.elements.h3

html.elements.h4

html.elements.h5

html.elements.h6

같이 보기

Help improve MDN

Learn how to contribute.

This page was last modified on 2025년 5월 7일 by MDN contributors.

View this page on GitHub • Report a problem with this content
MDN logo

Your blueprint for a better internet.

  • MDN on Bluesky
  • MDN on Mastodon
  • MDN on X (formerly Twitter)
  • MDN on GitHub
  • MDN Blog RSS Feed

MDN

  • About
  • Blog
  • Careers
  • Advertise with us

Support

  • Product help
  • Report an issue

Our communities

  • MDN Community
  • MDN Forum
  • MDN Chat

Developers

  • Web Technologies
  • Learn Web Development
  • MDN Plus
  • Hacks Blog
  • Website Privacy Notice
  • Cookies
  • Legal
  • Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998–2025 by individual mozilla.org contributors. Content available under a Creative Commons license.