2

コード レビューを行ったところ、見出しでは見出しではなくタグを使用していることに気付き、意味上の利点を得るためにタグ<span>を使用することを提案しました。<h4>コンテキストは、さまざまな見出しの下にさまざまなリンクのリストがある Web サイトのフッターです。

<span>Category 1 Links</span>
<ul>
    <li>Link 1 in the footer</li>
    <li>Link 2 in the footer</li>
    <li>Link 3 in the footer</li>
    <li>Link 4 in the footer</li>
    <li>Link 5 in the footer</li>
</ul>

反論は<h4>、インライン要素が必要であるのに対し、それは「ブロックレベル」要素であるというものでした。したがって、彼は要素を変更する必要はないと考えました。(そして、はい、彼は CSS を知っており、プロパティに精通していdisplay: inline;ます。)

それは私にはまったく正気ではないように思えます - 私が常にベストプラクティスだと思っていたすべてに反しています: コンテンツとプレゼンテーションの分離、セマンティック Web、まさに HTML と CSS の目的... しかし、応答を作成しようとしているときに、このセクションに出くわしましたHTML 4.01仕様では：

BODY に表示される特定の HTML 要素は「ブロック レベル」と呼ばれ、他の要素は「インライン」(「テキスト レベル」とも呼ばれます) と呼ばれます。

...

スタイル シートは、要素をブロックとしてレンダリングするかインラインとしてレンダリングするかなど、任意の要素のレンダリングを指定する手段を提供します。リスト要素のインライン スタイルなど、場合によってはこれが適切な場合もありますが、一般的に言えば、作成者はこの方法で HTML 要素の従来の解釈をオーバーライドすることをお勧めしません。

ブロック レベルおよびインライン要素の従来の表現方法の変更も、双方向テキスト アルゴリズムに影響を与えます。詳細については、双方向性に対するスタイル シートの効果に関するセクションを参照してください。

ここに問題があります: このセクションは、ここで有効な意見の相違が存在するほど十分に問題を曖昧にしていますか? それとも (私が思っていたように) どちらかというとかなり明確ですか? このセクションが自由に解釈できる場合、より具体的な他の W3C ガイドラインはありますか?

これについて意見を述べたくはありません。仕様と W3C ガイドラインを正しく理解していることを確認したいだけです。ここに真のあいまいさがありますか?

4

3 に答える 3

3

W3C 仕様ではdisplay: inline、見出し要素を使用できます。一般に、HTML 仕様は CSS でできることを制限しません。逆も同様です。

あなたが引用したブロックレベルおよびインライン要素のセクションには、推奨事項（「推奨されない」）が含まれています。これは、「してはならない」ステートメントではなく、「してはならない」、つまり適合基準ではありません。推奨の動機は示されていませんが、一般的に、そのようなアイデアは、HTML ドキュメントがスタイル シートを無視するソフトウェアによって処理される可能性がある、または作成者のスタイル シートが上書きされる可能性がある、または要素の定義された意味を優先するという事実に基づいています。 CSS スタイルよりも。

見出しをインライン要素にする可能性については (設定の意味でdisplay: inline) ここでは言及されていませんが、そうすることは、「ランイン見出し」 (段落の先頭にインラインで表示される見出し) を作成する 1 つの方法の一部です。独自の行ではなく)。CSS 基本ボックス モデルWDdisplay: run-inに例示されているように、現在それを達成するためのより良い方法はです。基本的なポイントは同じです。見出し要素をデフォルトからインラインのような表示に変更しても問題ありません。display: block

提示された特定のケースに関しては、インライン要素が必要な理由がよくわかりません。次の要素はulで、デフォルトで改行 (および垂直方向の間隔) が発生します。のレンダリングがulCSS でインラインに変更された場合、論理的にリストの見出しである要素に対して同じことができない理由を理解するのは困難です。

于 2013-08-20T06:10:44.367 に答える
1

まず第一に、引用されたセクションは確かに14 年前のHTML 4.01 仕様からのものです。HTML5 仕様でこのタイプのものを読んだ覚えはありません。個人的には、当時は良い発言と見なされていましたが、経験により時代遅れになっていると思います. HTML4 は HTML と CSS を実際に適切に分離したものであり、そのため引用された発言のような「間違い」が含まれており、後に「修正」されたことを忘れないでください。

本質的に、セマンティック マークアップとスタイリングの間に暗黙的にロックされた関係があってはなりません。hX要素と同様に、adivもブロック レベルの要素ですが、他の要素と相互作用する方法、特にどの要素を含めることができるかが原因です。インライン要素にはブロック要素を含めてはならず、ブロック要素にはインライン要素とインライン要素の両方を含めることができます。ブロック要素、ul > liおよびなどの明示的に定義された関係を禁止しますtable > tr > td。本質的に、セマンティクスとプレゼンテーションの分離は非常に厳密に保つ必要があるため、マークアップ言語 HTML の仕様では、スタイルシートの概念の存在について言及することさえすべきではありません。単なるブラウザではありません。

Web 開発者の観点からは、あなたはまったく正しいです。要素のブロックの性質は、h4潜在的な子要素との関係、およびブラウザのデフォルト スタイルシートでのデフォルトの表現を意味するだけです。CSS 開発者が自分のスタイルシートで何をしたいかは、彼自身の選択ですdisplay:table-cell。それが彼のデザインに適切に適合する場合、彼はルールを適用します。

TL;DR: あいまいさはありません。CSS の要件に HTML を適合させるのではなく、常に HTML を表示したい方法に準拠するように CSS を記述する必要があります。spanan が必要な場所でa を使用するh4ことは、セマンティック (および SEO) の観点からは明らかに間違っています。

于 2013-08-20T00:20:05.957 に答える
1

In my opinion, any typographic convention that you have ever seen in a book or other printed media is fair game for modeling a web page.

For example, I have seen text books with several columns, each with a header, and one could achieve this effect by using display: inline to a h4 tag.

In this example, whether h4 is on a stand-along block or part of a horizontal sequence will depend on the content and how you are trying to communicate ideas to your readers.

Consider how your page would render in a text-only browser that does not support CSS, would the raw ordering of the text make any sense? If so, then, your choice of HTML are probably valid.

On the other hand, if you took table tags and turned them into headers or list items, then you are probably going to get HTML that would not sound right if the page were read by some type of audio browser (think visually impaired people using a page reader).

Let semantics dictate the tags that you use and use CSS to get the visual layout that you need.

于 2013-08-20T00:22:18.700 に答える