<div>との使用法を示す簡単な例をいくつか教えてください。または<span>でページのセクションをマークするために、どちらも使用されているのを見たことがありますが、どちらかが他方よりも好まれる場合があるかどうかを知りたいです。idclass
ベストアンサー1
つまり、意味的に使用するには、div はドキュメントのセクションを囲むために使用し、span はテキストや画像などの小さな部分を囲むために使用する必要があります。
例えば：
<div>This a large main division, with <span>a small bit</span> of spanned text!</div>
インライン要素内にブロックレベル要素を配置することは違法であることに注意してください。
<div>Some <span>text that <div>I want</div> to mark</span> up</div>
...は違法です。
編集: HTML5では、一部のブロック要素を一部のインライン要素内に配置できるようになりました。MDNリファレンスを参照してください。ここかなり明確なリストです。上記は、<span>フレージング コンテンツのみを受け入れ、<div>フロー コンテンツであるため、依然として違法です。
具体的な例をいくつかお聞きしたので、私のボウリングのウェブサイトから抜粋します。ボウルSK:
<div id="header">
<div id="userbar">
Hi there, <span class="username">Chris Marasti-Georg</span> |
<a href="/edit-profile.html">Profile</a> |
<a href="https://www.bowlsk.com/_ah/logout?...">Sign out</a>
</div>
<h1><a href="/">Bowl<span class="sk">SK</span></a></h1>
</div>さて、何が起こっているのでしょうか？
ページの上部には、論理セクションである「ヘッダー」があります。これはセクションなので、div (適切な ID を持つ) を使用します。その中に、ユーザー バーと実際のページ タイトルという 2 つのセクションがあります。タイトルには適切なタグ を使用します。h1
ユーザー バーはセクションなので で囲まれています
div
。その中で、ユーザー名は で囲まれている
span
ため、スタイルを変更できます。ご覧のとおり、
span
タイトルの 2 文字を で囲んでいます。これにより、スタイルシートで色を変更できます。
また、HTML5 には、記事、セクション、ナビゲーションなどの一般的なページ構造を定義する幅広い新しい要素セットが含まれていることにも注意してください。
セクション4.4HTML 5 ワーキングドラフトそれらをリストし、使用方法についてのヒントを提供します。HTML5 はまだ作業中の仕様であるため、まだ「最終」のものではありませんが、これらの要素がどこかに移動することはないと思われます。古いバージョンの IE でこれらの要素をスタイル設定する場合は、JavaScript ハックを使用する必要があります。document.createElementソースでこれらの要素が指定される前に、各要素を 1 つ作成する必要があります。これを処理してくれるライブラリが多数あります。Google で簡単に検索すると、html5shiv。