[html] HTML5에서 h1을 올바르게 사용하는 방법
다음 중 페이지를 구성하는 올바른 방법은 무엇입니까?
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 요소 만 사용하거나 섹션의 중첩 수준에 적합한 등급의 요소를 사용하는 것이 좋습니다.
답변
내 의견에 언급하고 W3C에서 인용했듯이 h1은 제목이 아니라 제목입니다. 각 섹션 요소는 고유 한 제목 요소를 가질 수 있습니다. h1을 페이지의 제목으로 만 생각할 수는 없지만 페이지의 특정 섹션의 제목으로 생각할 수 있습니다. 신문의 첫 페이지와 마찬가지로 각 기사에는 고유 한 제목 (또는 제목)이있을 수 있습니다.
답변
나는 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>
