HTML5에서 h1을 올바르게 사용하는 방법

Question 1

다음 중 페이지를 구성하는 올바른 방법은 무엇입니까?

1) h1에서만header

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h2>Page title</h2>
</section>

내가 사용하는 경우 h1에만 내부 header사이트의 제목으로, 모든 페이지에 대한 동일한 콘텐츠해야합니다 h1태그를. 그다지 유익하지 않은 것 같습니다.

2) h1에서 header하고 section, 두 사이트와 페이지 제목

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

또한 및 태그 h1모두에서 두 번 이상 사용하는 예를 보았습니다 . 그러나 같은 페이지에 두 개의 제목이있는 것은 잘못이 아닙니까? 이 예는 여러 헤더 및 태그 http://orderlist.com/resources/html-css/structural-tags-in-html5/ 를 보여줍니다.headersectionh1

3) h1에서만 section, 페이지 제목을 강조

<header>
    <p>Site title</p>
    <nav>...</nav>
</header>
<section>
    <h1>Page title</h1>
</section>

마지막으로 W3 h1는 기본 section요소 내에서 사용을 권장하는 것 같습니다. 즉, 요소에서 사용하지 말아야 header합니까?

섹션에는 모든 등급의 제목이 포함될 수 있지만 작성자는 h1 요소 만 사용하거나 섹션의 중첩 수준에 적합한 등급의 요소를 사용하는 것이 좋습니다.

Question 2

내 의견에 언급하고 W3C에서 인용했듯이 h1은 제목이 아니라 제목입니다. 각 섹션 요소는 고유 한 제목 요소를 가질 수 있습니다. h1을 페이지의 제목으로 만 생각할 수는 없지만 페이지의 특정 섹션의 제목으로 생각할 수 있습니다. 신문의 첫 페이지와 마찬가지로 각 기사에는 고유 한 제목 (또는 제목)이있을 수 있습니다.

이것에 대한 좋은 기사가 있습니다.

Question 3

나는 h1전체적으로 사용하는 것이 좋습니다 . 을 h2통해 잊어 버려 h6.

HTML4에서는 6 개의 제목 수준이 섹션을 암시 적으로 정의하는 데 사용되었습니다. 예를 들면

<body>
<h1>This is a top-level heading</h1>
<p>some content here</p>
<h2>This is the heading of a subsection</h2>
<p>content in the subsection</p>
<h2>Another subsection begins here</h2>
<p>content</p>
<h1>another top-level heading</h1>

이제 section요소를 사용하면 다른 제목 수준을 읽는 브라우저에서 만든 암시 적 섹션에 의존하지 않고 섹션을 명시 적으로 정의 할 수 있습니다. HTML5가 탑재 된 브라우저는 section요소 내부의 모든 것이 문서 개요에서 한 수준 씩 "강등" 된다는 것을 알고 있습니다. 예를 들어 a section > h1는 의미 론적으로 an h2, a section > section > h1는 an h3등으로 취급됩니다 .

혼란스러운 점은 브라우저가 여전히h2 – h6제목 수준 에 따라 암시 적 섹션을 생성 하지만 h2– h6요소는 스타일을 변경하지 않는다는 것입니다. 즉 h2, 중첩 된 섹션 수에 관계없이는 여전히 h2(적어도 Webkit에서는) 처럼 나타납니다 . h2예를 들어 레벨 4 제목이어야 한다면 이것은 혼란 스러울 것 입니다.

혼합 h2- h6와 section매우 예기치 않은 결과를 리드. 그냥 고수하고 명시적인 섹션을 만드는 데 h1사용하십시오 section.

<body>
<!-- optional --><header>
    <h1>This is a top-level heading</h1>
    <p>you may optionally wrap this p and the h1 above it inside a header element.
     the header element doesn't affect the doc outline.
     the section element does, however.</p>
<!-- optional --></header>
<section>
    <h1>even though this is an h1, the browser "treats it" like an h2
        because it's inside an explicit section.
        (it got demoted).</h1>
    <p>content in the subsection</p>
</section>
<section>
    <h1>Another subsection begins here, also treated like an h2</h1>
    <p>content</p>
    <h2>This is misleading. it is semantically treated like an h3.</h2>
    <p>that is because after an h1, an h2 is demoted one level. the h1 above is
        already a "level 2" heading, so this h2 becomes a "level 3" heading.</p>
    <section>
        <h1>just do this instead.</h1>
        <p>it is treated like an h3 because it's in a section within a section.
            (It got demoted twice.)</p>
    </section>
</section>
<h1>another top-level heading</h1>

또한 , 당신은 사용할 수 있습니다 요소를 . 이 요소에는 페이지와 관련된 정보 만 포함되며 탐색 링크, 사이트 머리글 / 바닥 글 등과 같이 사이트 전체에서 반복되는 콘텐츠는 포함되지 않아야합니다.에는 요소 가 하나만 있을 수 있습니다 . 따라서 솔루션은 다음과 같이 간단 할 수 있습니다.<main> <main><body>

<header>
    <h1>Site title</h1>
    <nav>...</nav>
</header>
<main>
    <h1>Page title</h1>
    <p>page content</p>
</main>

Question 4

그러나 접근성 문제를 잊지 마십시오. MDN 에 따르면 , "현재 그래픽 브라우저 또는 보조 기술 사용자 에이전트에서 개요 알고리즘 의 알려진 구현이 없습니다 ." 즉, 스크린 리더는 .NET 만 사용하는 섹션의 상대적 중요성을 파악하지 못할 수 있습니다 <h1>. 이 같은 더 제목 수준해야 할 수도 <h2>와 <h3>.