2016-08-06 4 views
0

見出しは常にH1からH6ですが、H7、H8 ... H137などはどうでしょうか。私の驚きには、彼らはすべて働く!任意の見出し番号を任意の方法でスタイルすることができます。最近のいくつかのブラウザーで試してみましたが問題はありませんでした。なぜ、私はそれらを使いたいのですか?あなたは<span class="h7">Hello World</span>のようなものを入力するのではなく、<h7>Hello world</h7>とタイプして同じ結果を得ることができます。これはどこに書いてありますか?これは間違っていますか?それをサポートしていないIE8より新しいブラウザがありますか?HTMLとCSSでH6以外の見出しを使用しても構いませんか?

+0

6つのレベルは、誰のために十分でなければなりません。より多くのレベルで純正のユースケースをお持ちの場合は、https://github.com/w3c/html/issues – Alohci

答えて

2

いいえ、最初の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> 
+0

で「問題なく同等」と表示する必要があります。しかし、アクセシビリティツールではそれらを同じように扱うことはできません。そのため、最新のHTML 5のドラフトはその練習に対してアドバイスしているので、私たちもそれを止めるべきです。 – Alohci

1

見出しの主な目的は、その意味であります彼らはウェブサイトの短くて重要な部分を示しているので、どのスクリーンリーダーのユーザーが自分の使っているウェブサイトのコンテンツを簡単に見て、それをナビゲートするのかを示しています。特に、後者はスクリーンリーダー利用者にとって重要である。

h1-h6は異なる重要性を示しており、基本的なルールとして可能な限り少数のレベル(h1-h3、最大h4)を使用するようにしてください。h7-hxxxを使用する意味がありません。

H7-hxxx有効なHTMLの見出し要素ではないとしたブラウザを壊すことなく、セマンティックレスdiv sとそれらを解釈しようという理由だけで、それが意味するものではありません、彼らは「仕事」という。彼らは意味がないので、そうではありません。

TLDR:確かにそれらを使用しないでください。

編集:あなたは、そのIE9 +は "壊れない"と述べた。これは、主にhtml5のために、ブラウザーが意味のない要素(例えば、divのような意味のない要素)として解釈される原因となります。

0

<h7></h7>などのカスタムタグを使用すると、インラインdiv要素として扱われ、レンダリングされますが、ヘッダー階層を記述するための非標準タグであるため、アドバイスします。スクリーンリーダーとパーサーは意味をなさないそれ。ヘッダータグに標準的な意味要素を使用することに固執する。ヘッダータグの本当に深い階層を持つことは、通常、レイアウトを意味的にどのように構成しているかに問題があることを示します。

0

Html仕様では、H1とH6の間に見出しタグを指定しています。それ以外のものは、予想通りブラウザ内で動作する可能性がありますが、HTML仕様の一部ではないため、ブラウザは(おそらく異なって)解釈することができますので、私は完全に依存しません。 htmlの仕様に含まれていないものにも適用されます。しかし、Hタグはわかりやすいので、ブラウザはH6より上位のタグを正しく解釈する必要があります。

+0

"ブラウザはH6より上のタグを正しく、同様に解釈する必要があります。彼らはしません。彼らは別々に構文解析し、スタイルが異なっていて、最も重要なのはアクセシビリティAPIに別様に提示されるということです。 – Alohci

+0

私は同じように言っています – lucas

0

標準によるとは限りませんが、独自の要素を定義することができます。それはh7-h200とは関係ありませんが、どんな言葉でも関係ありません。たとえば、 blablaまたはhouhouhou。ここでのコード:

<style type="text/css"> 
    houhouhou {color: green} 
    blabla { color: blue} 
</style> 

<houhouhou>Hello</houhouhou> 
<blabla>World</blabla> 

Code for testing here.

しかし、他の人のように、私もこの精神でdivまたはspanで古典的なCSSクラスを使用することをお勧めします:見出しの

<style type="text/css"> 
    .houhouhou {color: green} 
    .blabla { color: blue} 
</style> 

<div class="houhouhou">Hello</div> 
<div class="blabla">World</div> 
関連する問題