[解決済み] アンカー内にdivを置くことは正しいことですか?
質問
インライン要素の中にブロック要素を入れるのはHTMLの罪だと聞いたことがあります。
<a href="http://example.com">
<div>
What we have here is a problem.
You see, an anchor element is an inline element,
and the div element is a block level element.
</div>
</a>
しかし、外側のアンカーを次のようにスタイルしたらどうでしょう。
display:block
をスタイルシートで使用できますか?やはり間違っているのでしょうか?HTML 4.01の仕様では
ブロック-レベルおよびインライン要素
はそう考えているようです。
スタイルシートは レンダリングを指定します。 要素を含む はブロックまたはインラインとしてレンダリングされます。この場合 場合によっては、インラインスタイル リスト要素の場合、これは が適切ですが、一般的には は推奨されません。 従来の での HTML 要素の解釈について説明します。 このように
この問題について、さらに何かヒントをお持ちの方はいらっしゃいますか?
解決方法は?
対応しているHTMLのバージョンによる。
-
HTML 5 には
<a>
要素は、段落全体、リスト、テーブルなど、さらにはセクション全体を包むことができ、その中にインタラクティブなコンテンツ(例えば、ボタンやその他のリンク)がない限り、可能です。 -
HTML 4.01 は、次のように指定します。
<a>
要素には インライン要素 . A<div>
は ブロック要素 の中に表示されないことがあります。<a>
.もちろん、インライン要素を が現れる。 をブロックにする、あるいは実際にブロックがインラインでレンダリングされるようにスタイルを設定します。用語の使用
inline
とblock
の用語は、HTMLでは文書の意味的な構造と要素の関係を意味しますが、CSSの同じ用語は、要素の視覚的なスタイリングに関連します。インライン要素をブロック状に表示させるのであれば、それはそれで問題ありません。しかし、CSSが存在しない場合でも、例えばスクリーンリーダーなどの支援技術でアクセスしたとき、あるいは強力なGooglebotが検査したときに、文書の構造が意味をなすようにする必要があります。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] HTMLとCSSによるテーブルスクロール [重複]について
-
[解決済み] 画像の横のテキストを縦に揃える?
-
[解決済み] div' コンテナに合わせて画像を自動リサイズするにはどうしたらいいですか?
-
[解決済み] divの中のテキストを縦に揃えるにはどうしたらいいですか?
-
[解決済み] divブロック内のテキストを(水平方向と垂直方向に)センタリングするにはどうすればよいですか?
-
[解決済み] メモ帳++でXML/HTMLを自動整形/インデントする方法
-
[解決済み] CSSでdivを縦にスクロールできるようにする
-
[解決済み】あるdivの上に別のdivを重ねる方法
-
[解決済み] <STYLE>はHTML文書の<HEAD>内になければならないのでしょうか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] HTML IFステートメント
-
[解決済み] HTMLで複数選択を許さないリストボックスを作るには?
-
[解決済み] HTMLのid属性に有効な値は何ですか?
-
[解決済み] <meta charset="utf-8"> vs <meta http-equiv="Content-Type">.
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] ローカルストレージとCookieの比較
-
[解決済み] div内の要素を縦に並べるにはどうしたらいいですか?
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] メモ帳++でXML/HTMLを自動整形/インデントする方法