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는 h3등으로 취급 됩니다.
어떤 혼란은 브라우저이다 STILL 에 기초 암시 섹션 생성 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>
그러나 접근성 문제를 잊지 마십시오. MDN 에 따르면 , "현재 그래픽 브라우저 나 보조 기술 사용자 에이전트에서 개요 알고리즘 의 알려진 구현이 없습니다 ." 즉, 스크린 리더는 .NET 만 사용하는 섹션의 상대적 중요성을 파악하지 못할 수 있습니다 <h1>. 이 같은 더 제목 수준해야 할 수도 <h2>와 <h3>.
참고 URL : https://stackoverflow.com/questions/7405282/how-to-properly-use-h1-in-html5
'ProgramingTip' 카테고리의 다른 글
| 병합 후 브랜치를 삭제해야할까요? (0) | 2020.10.17 |
|---|---|
| HTML에서 구성 요소의 선택기 태그 제거 / (0) | 2020.10.17 |
| 아이콘 글꼴 : 어떻게 작동합니까? (0) | 2020.10.17 |
| Levity 다형성이란? (0) | 2020.10.17 |
| UIImagePickerController를 사용하여 "알 수없는 유형의 이미지 형식을 만드는 것은 오류입니다." (0) | 2020.10.17 |