web-dev-qa-db-ja.com

<h4>、<h5>、<h6>が通常のテキストよりも小さい場合は問題ですか？

多くのWebサイトおよびWebサイトテンプレートでは、<h4>（時々）と<h5>および<h6>のフォントサイズは通常のテキストよりも小さいことが多く、追加することなく<p>のフォントサイズになります。クラス。

「ネクロマンシー」という言葉は、実際にはレベル5の見出しであり、それに気付くまでに余分な考えが必要でした。

自分のウェブサイト（テンプレート）をデザインするときは、すべての見出し（1〜6）を通常のテキストより大きくします。<h6>は<p>の1.05倍の大きさで、余分なpadding-top。

すべての見出しを通常のテキスト以上に保つ必要があるでしょうか？私は主にテキストのブロックに関心があり、画像のキャプションやテキストではないものとして見出しを使用していません。

textfont-sizesheading
39
iBug

<h*>は見出しを意味するため、これは階層を示しています。異なる数値は、高から低、または最大から最小までのレベルランキングで、<p>が最後のステップです。

階層：組織または社会のメンバーが相対的なステータスまたは権限に従ってランク付けされるシステム。

これの意味は：

<h1>> <h2>> <h3>> <h4>> <h5>> <h6>> <p>

あなたの例は：

<h1>> <h2>> <h3>> <p>> <h4>> <h5>> <h6>

これにより、<h4>のドメインの下に<h5>、<h6>、および<p>を配置して、階層の順序が崩れます。視覚的には、テキストノート、脚注、一般的なテキストに依存する単純なキャプション、最悪の場合は間違いのように見えます。

それは正しいか間違っているのではなく、すべてテキストが表示しなければならない視覚的な階層に依存します。

36
Danielillo

問題はエラーに基づいています。 HTMLの見出しはデザインとは何の関係もありません。 HTMLの見出し要素はコンピューターのドキュメント構造用であり、デザインや視覚的な出力とは関係ありません。ブラウザーが異なるフォントサイズを提供するのは、HTMLではなくCSSに基づいています。

したがって、これはUI/UXの問題ではなくデザインの問題ですが、ブラウザの選択に依存するのではなく、フォントサイズを希望のサイズにする必要があります。

10
Rob

さて、主な問題は、ネストが深すぎることです。本当に、このような深い入れ子に従うのは、いくつかの理由で簡単ではありません：

  • 人々は彼らがどこにいるかを覚えていないだけです。ネストが深すぎると、コミュニケーションが不十分になります。もちろん、それはあなたが持っているテキストの量に依存します。しかし、1つのWebページでこれほど多くのレベルを必要とするべきではありません。

  • ヘッダーを視覚的に区別することは困難です。フォントサイズで区別するか、読者にとってこれは難しいでしょう。または、視覚的な手がかり（色、フォント、装飾）で区別しますが、これは通常、あまりきれいではありません。 1つのオプションは、段落の最初にインライン見出しを使用することです。

ヘッダーが通常のテキストよりも小さいフォントサイズのヘッダーを持つことは、ヘッダーが視覚的にヘッダーとして認識される限り、犯罪ではありません（太字のシリーズが役立ちます）。しかし、私見それは通常間違った問題を解決しています。

2
yo'

"Necromancy"がカテゴリ/グループのタイトルか、このようなものであることを考慮してください。テキストの前にこの情報を表示する意図は、ユーザーが読んでいるときにユーザーを混乱させないためだと思います。これが当てはまる場合は、これをheading tagがparagraphよりも小さいことを理解してください。

追伸1：heading tagsを使用する場合は常に、段落より大きくする必要があります。通常、<p>の方が重要であるためです。

追伸2：Googleロボットは、GoogleでのWebサイトのランク付けのために、より低いレベルの見出しタグを考慮していません。あなたは心臓の痛みなしでこの例外を考えることができます。

追伸3：タグ名は、開発とコードの読み取りを容易にするために作成されました。そして、これがあなたのケースであるならば、幸せで、それをより小さく使ってください。

0
Rafael Perozin

段落のテキストよりも小さい見出しは、活版印刷/ユーザーインターフェイスの習慣としては適切ではありません。

あなたすべきあなたが何をしているかについての視覚的な手がかりを与えます。

通常、H1-H3はpテキストよりもかなり大きいです。 H1は2〜2.4 emで、ヘッダー番号が増えると約15〜25％小さくなります。たとえば、H2は1.6〜2 em、H3 1.2〜1.4 emです。

しかし、あなたはリターンを減少させるポイントに到達します

区別可能な見出しを作成する他の方法：

  • 太字/斜体の組み合わせ。 H4は1.2 emの太字斜体、H5は1.1 emの斜体です。

  • マージンを変更します。私のWebページでは、H1とH2は左揃えですが、H3とH4はテキストエッジを使用しています。したがって、H1とH2はぶら下がっている見出しです。

私は数千語の大きなページを書きます。それでもH4は必要ありません。

0
Sherwood Botsford