見出しは常にH1からH6ですが、H7、H8 ... H137などはどうでしょうか。私の驚きには、彼らはすべて働く!任意の見出し番号を任意の方法でスタイルすることができます。最近のいくつかのブラウザーで試してみましたが問題はありませんでした。なぜ、私はそれらを使いたいのですか?あなたは<span class="h7">Hello World</span>
のようなものを入力するのではなく、<h7>Hello world</h7>
とタイプして同じ結果を得ることができます。これはどこに書いてありますか?これは間違っていますか?それをサポートしていないIE8より新しいブラウザがありますか?HTMLとCSSでH6以外の見出しを使用しても構いませんか?
答えて
いいえ、最初の6つだけが標準です。
The h1
, h2
, h3
, h4
, h5
, and h6
elements
注彼らはセクションの見出しを表すため、追加的なもののために必要はありません。したがって、より低いランクのヘッダーを使用する代わりに、ネストされたセクションを使用することができます。
限り、それぞれの文書のアウトライン(その見出しと部分構造)を懸念しているように、これらの二つの断片は意味的に等価である:
<body> <h1>Let's call it a draw(ing surface)</h1> <h2>Diving in</h2> <h2>Simple shapes</h2> <h2>Canvas coordinates</h2> <h3>Canvas coordinates diagram</h3> <h2>Paths</h2> </body>
<body> <h1>Let's call it a draw(ing surface)</h1> <section> <h1>Diving in</h1> </section> <section> <h1>Simple shapes</h1> </section> <section> <h1>Canvas coordinates</h1> <section> <h1>Canvas coordinates diagram</h1> </section> </section> <section> <h1>Paths</h1> </section> </body>
で「問題なく同等」と表示する必要があります。しかし、アクセシビリティツールではそれらを同じように扱うことはできません。そのため、最新のHTML 5のドラフトはその練習に対してアドバイスしているので、私たちもそれを止めるべきです。 – Alohci
見出しの主な目的は、その意味であります彼らはウェブサイトの短くて重要な部分を示しているので、どのスクリーンリーダーのユーザーが自分の使っているウェブサイトのコンテンツを簡単に見て、それをナビゲートするのかを示しています。特に、後者はスクリーンリーダー利用者にとって重要である。
h1-h6は異なる重要性を示しており、基本的なルールとして可能な限り少数のレベル(h1-h3、最大h4)を使用するようにしてください。h7-hxxxを使用する意味がありません。
H7-hxxx有効なHTMLの見出し要素ではないとしたブラウザを壊すことなく、セマンティックレスdiv
sとそれらを解釈しようという理由だけで、それが意味するものではありません、彼らは「仕事」という。彼らは意味がないので、そうではありません。
TLDR:確かにそれらを使用しないでください。
編集:あなたは、そのIE9 +は "壊れない"と述べた。これは、主にhtml5のために、ブラウザーが意味のない要素(例えば、div
のような意味のない要素)として解釈される原因となります。
<h7></h7>
などのカスタムタグを使用すると、インラインdiv要素として扱われ、レンダリングされますが、ヘッダー階層を記述するための非標準タグであるため、アドバイスします。スクリーンリーダーとパーサーは意味をなさないそれ。ヘッダータグに標準的な意味要素を使用することに固執する。ヘッダータグの本当に深い階層を持つことは、通常、レイアウトを意味的にどのように構成しているかに問題があることを示します。
Html仕様では、H1とH6の間に見出しタグを指定しています。それ以外のものは、予想通りブラウザ内で動作する可能性がありますが、HTML仕様の一部ではないため、ブラウザは(おそらく異なって)解釈することができますので、私は完全に依存しません。 htmlの仕様に含まれていないものにも適用されます。しかし、Hタグはわかりやすいので、ブラウザはH6より上位のタグを正しく解釈する必要があります。
標準によるとは限りませんが、独自の要素を定義することができます。それはh7-h200とは関係ありませんが、どんな言葉でも関係ありません。たとえば、 blabla
またはhouhouhou
。ここでのコード:
<style type="text/css">
houhouhou {color: green}
blabla { color: blue}
</style>
<houhouhou>Hello</houhouhou>
<blabla>World</blabla>
しかし、他の人のように、私もこの精神でdiv
またはspan
で古典的なCSSクラスを使用することをお勧めします:見出しの
<style type="text/css">
.houhouhou {color: green}
.blabla { color: blue}
</style>
<div class="houhouhou">Hello</div>
<div class="blabla">World</div>
- 1. C#で英語以外のデフォルトのUI言語を使用しても構いませんか?
- 2. まれな例外にチェックPIDを使用しても構いませんか?
- 3. まだテーブルを使用しても構いませんか?
- 4. ランダムなテクスチャIDを使用しても構いませんか?
- 5. HTMLをHTML属性に入れても構いませんか?
- 6. htmlとcssを使用したナビゲーションバーはクリックできません。
- 7. Entity FrameworkのCreateOrUpdateメソッドでtry-catchを使用しても構いませんか?
- 8. Node.js - 外部のJSとCSSファイル(単にnode.jsを使用していません)
- 9. HTML CSS:hrefは「https://」を使用しても機能しません
- 10. CSSはウェブブラウザ以外で使用されていますか?
- 11. nodejs 4.xでnpm 3.xを使用しても構いませんか?
- 12. C++ストリームで三項演算子を使用しても構いませんか?
- 13. WebWorksのUI構造:HTML形式でも、別ファイルでも構いませんか?
- 14. css - h6サイズの影響を受けないh6の位置img
- 15. 生産のためにpython mockを使用しても構いませんか?
- 16. express-handlebarsを使用しているcssファイルが見つかりません
- 17. HTML Tidyを使用していてもナビゲーションメニューが機能しません
- 18. HTML以外の外部CSSシートに新しいスタイルを追加していますか?
- 19. GETよりPOSTメソッドを使用しても構いませんか?
- 20. H1-H6はjsFiddleで動作しませんか?
- 21. VSTO - GetVstoObjectを使用してドキュメント以外のものを取得しますか?
- 22. Pythonリクエストとbeautifulsoup4を使用したレスポンスでhtmlが見つかりません
- 23. 長持ちするソフトウェアのintとしてタイムスタンプを使用しても構いませんか?
- 24. HTML/CSS/Javascriptを使用したことのない人でも、HTML/CSS/Javascriptを構造化するにはどうすればいいですか?
- 25. HTMLとCSSを使用して本文にオーバーフローしますか?
- 26. localhost/127.0.0.1以外のものを使用してIISサイトに接続できません
- 27. GWTを使用してHTML用にコンパイルすると、LibGDX ".DT_Store"ファイルが見つかりませんでした。
- 28. 複数のDispatcher.BeginInvokeを作成しても構いませんか?
- 29. CSSメニューがIE 8以降で動作していません
- 30. CSSがデフォルトのjekyllで動作していませんHTML
6つのレベルは、誰のために十分でなければなりません。より多くのレベルで純正のユースケースをお持ちの場合は、https://github.com/w3c/html/issues – Alohci