ブロック要素をインライン要素の中に入れるのは間違っていることはわかっていますが、次の場合はどうでしょうか。
次の有効なマークアップを想像してください。
<div><p>This is a paragraph</p></div>
次の CSS を追加します。
div {
display:inline;
}
これにより、インライン要素にブロック要素が含まれる状況が作成されます (div はインラインになり、p はデフォルトでブロックになります)。
ページ要素はまだ有効ですか?
HTML が有効かどうか (CSS ルールが適用される前か後か) は、いつ、どのように判断するのでしょうか?
更新: HTML5 では、リンク タグ内にブロック レベルの要素を配置することが完全に有効であることを学びました。
<a href="#">
<h1>Heading</h1>
<p>Paragraph.</p>
</a>
これは、HTML の大きなブロックをリンクにしたい場合に、実際に非常に便利です。
CSS 2.1仕様から：
インライン ボックスにインフロー ブロック レベル ボックスが含まれる場合、インライン ボックス (および同じライン ボックス内のそのインライン先祖) は、ブロック レベル ボックス (および、連続するか、折りたたみ可能な空白および/またはアウトオブフロー要素)、インライン ボックスを 2 つのボックス (どちらかの側が空の場合でも) に分割し、ブロック レベル ボックスの各側に 1 つずつ配置します。改行前と改行後のライン ボックスは無名ブロック ボックスに囲まれ、ブロック レベルのボックスはこれらの無名ボックスの兄弟になります。このようなインライン ボックスが相対的な配置の影響を受ける場合、結果として生じる変換は、インライン ボックスに含まれるブロック レベルのボックスにも影響します。
次のルールが適用される場合、このモデルは次の例に適用されます。
p { display: inline } span { display: block }はこの HTML ドキュメントで使用されました:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <HEAD> <TITLE>Anonymous text interrupted by a block</TITLE> </HEAD> <BODY> <P> This is anonymous text before the SPAN. <SPAN>This is the content of SPAN.</SPAN> This is anonymous text after the SPAN. </P> </BODY>P 要素には、匿名テキストのチャンク (C1) が含まれ、その後にブロック レベル要素が続き、その後に匿名テキストの別のチャンク (C2) が続きます。結果のボックスは、C1 の周りの無名ブロック ボックス、SPAN ブロック ボックス、および C2 の周りの別の無名ブロック ボックスを含む、BODY を表すブロック ボックスになります。
匿名ボックスのプロパティは、囲んでいる非匿名ボックスから継承されます (たとえば、サブセクション見出し「匿名ブロック ボックス」のすぐ下の例では、DIV のボックス)。継承されないプロパティには初期値があります。たとえば、匿名ボックスのフォントは DIV から継承されますが、余白は 0 になります。
匿名ブロック ボックスを生成する要素に設定されたプロパティは、その要素のボックスとコンテンツに引き続き適用されます。たとえば、上記の例で P 要素に境界線が設定されている場合、境界線は C1 (行末で開く) と C2 (行頭で開く) の周りに描画されます。
一部のユーザーエージェントは、他の方法でブロックを含むインラインにボーダーを実装しています。たとえば、そのようなネストされたブロックを「匿名ラインボックス」内にラップし、そのようなボックスの周りにインラインボーダーを描画します。CSS1 と CSS2 はこの動作を定義していないため、CSS1 のみと CSS2 のみのユーザー エージェントは、この代替モデルを実装し、CSS 2.1 のこの部分への適合を主張することができます。これは、この仕様がリリースされた後に開発された UA には適用されません。
それをあなたがするものにしてください。動作が CSS で指定されていることは明らかですが、それがすべてのケースをカバーするのか、それとも今日のブラウザー間で一貫して実装されているのかは不明です。
有効かどうかに関係なく、要素構造が間違っています。インライン要素内にブロック要素を配置しない理由は、ブラウザーが要素を簡単に予測できる方法でレンダリングできるようにするためです。
HTML や CSS のルールに違反していなくても、意図したとおりにレンダリングできない要素が作成されます。ブラウザーは、HTML コードが無効であるかのように要素を処理する必要があります。
HTML と CSS はどちらも引き続き有効です。理想的には、このようなことをする必要はありませんが、CSS の特定のビットは実際には、条件付きスタイルシートや無効化するハックに頼ることなく、Internet Explorer の二重マージンのバグを取得するための便利な (構文的には有効ですが、意味的には有効ではありません) 方法です。あなたのCSS。(X)HTML には CSS よりもセマンティックな価値があるため、CSS がセマンティックに有効であることはそれほど重要ではありません。私の考えでは、コードを無効にすることなく迷惑なブラウザの問題を解決するので、それは受け入れられます.
HTML は CSS とは別に検証されるため、ページは引き続き有効です。CSS仕様もそれについて何も言っていないと確信していますが、それについて私を引用しないでください. ただし、一部のブラウザーでは意図したとおりにレンダリングされる可能性がありますが、すべてをテストする必要があるため、このような手法の使用には細心の注意を払っています。多くの保証が行われているとは思えません.
ページ要素はまだ有効ですか?
はい、HTML の意味で「有効」です。HTML は CSS について何も知りません。
ただし、ブラウザーで得られるレンダリングは、CSS 仕様では「定義されていない」ため、まったく同じように見える可能性があります。特定のブラウザー (そのブラウザーがこのケースをどのようにレンダリングするかを知っている場合) を対象とした CSS ハックにそのようなルールを含めることはできますが、一般的にはブラウザーに提供するべきではありません。
これが何らかのルールを検証するかどうかは頭の中でわかりませんが、それを判断するにはW3C HTML ValidatorとW3C CSS Validatorを使用することをお勧めします。これが役に立てば幸いです！
(x)html が有効で、css が有効だと思います。結果は有効ですか？はい、ブラウザで希望どおりに表示されている場合。
いいえ、それは間違った選択ではありません。要件に応じて使用できます。