HTMLタグ<div>と<span>の違いは何ですか？

私はの使用を示すいくつかの簡単な例をお願いしたいと思います<div>と<span>。ページのセクションをidまたはclassでマークするために両方を使用するのを見てきましたが、一方が他方よりも優先される場合があるかどうか知りたいです。

• divあるブロック要素
• spanあるインライン要素は。

つまり、意味的に使用するには、ドキュメントのセクションをラップするためにdivを使用し、テキストや画像などの小さな部分をラップするためにスパンを使用する必要があります。

例えば：

<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>フローコンテンツであるため、依然として違法です。

あなたはいくつかの具体的な例を求めました、それで私のボウリングのウェブサイト、BowlSKから取ったものです：

<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>

どうしたの？

また、HTML5には、記事、セクション、ナビゲーションなどの一般的なページ構造を定義する幅広い新しい要素セットが含まれていることにも注意してください。

HTML 5ワーキングドラフトのセクション4.4はそれらをリストし、それらの使用法についてのヒントを与えます。HTML5はまだ機能する仕様であるため、「最終版」はまだ何もありませんが、これらの要素のいずれかがどこにでもあるかどうかは非常に疑わしいです。古いバージョンのIEでこれらの要素にスタイルを設定する場合に使用する必要があるJavaScriptハックがあります。これらの要素をdocument.createElementソースで指定する前に、使用する各要素を1つ作成する必要があります。これを処理するライブラリがたくさんあります-クイックGoogle検索でhtml5shivが見つかりました。

完全を期すために、次のように考えてみてください。

• HTMLには多数のブロック要素（前後の改行）が定義されており、多数のインラインタグ（改行なし）があります。
• しかし、現代のHTML内のすべての要素を持っていることになっている意味は：<p>段落で、<li>ときに我々ではないような古い時代に-リスト項目、などであり、我々は右の目的のために右のタグを使うことになっています<blockquote>コンテンツが引用かどうかを使用してインデントされます。
• それで、あなたがしようとしていることに意味がないとき、あなたは何をしますか？何もありません意味 400ピクセル幅の欄には、ありますか？テキストの列の幅を400pxにしたいのは、デザインに適しているからです。
• このため、彼らはHTMLにさらに2つの要素を追加しました。それは、一般的な、または無意味な要素<div>と<span>、それ以外の場合、人々は意味を持つ要素の悪用に戻るためです。

ここにはすでに適切で詳細な回答がありますが、視覚的な例はありません。そのため、簡単な説明を次に示します。

<div>This is a div.</div>
<div>This is a div.</div>
<div>This is a div.</div>
<span>This is a span.</span>
<span>This is a span.</span>
<span>This is a span.</span>

<div>はブロックタグ<span>ですが、インラインタグです。

<div>ブロックレベルの要素で<span>あり、インライン要素です。

インラインテキストで何かを実行したい場合<span>は、改行が導入されないため、この方法が適しています<div>。

他の人が指摘しているように、これらのそれぞれに含まれる意味論がいくつかあります。最も重要なのは、a <div>がドキュメントの論理的な分割を意味し、ドキュメントのセクションまたは何か、laのようなものです。

<div id="Chapter1">
   <p>Lorem ipsum dolor sit amet, <span id="SomeSpecialText1">consectetuer adipiscing</span> elit. Duis congue vehicula purus.</p>
   <p>Nam <span id="SomeSpecialText2">eget magna nec</span> sapien fringilla euismod. Donec hendrerit.</p> 
</div>

本当に重要な違いはすでにクリスの答えで述べられています。ただし、その影響は誰にとっても明白ではありません。

インライン要素として、<span>他のインライン要素のみを含めることができます。したがって、次のコードは間違っています。

<span><p>This is a paragraph</p></span>

上記のコードは無効です。ブロックレベル要素をラップするには、別のブロックレベル要素（など<div>）を使用する必要があります。一方、<div>ブロックレベルの要素が有効な場所でのみ使用できます。

さらに、これらのルールは（X）HTMLで修正されており、CSSルールの存在によって変更されることはありません。したがって、次のコードも間違っています！

<span style="display: block"><p>Still wrong</p></span>
<span><p style="display: inline">Just as wrong</p></span>

「ブロック要素」の重要性は暗示されていますが、明示的には述べられていません。すべての理論を無視した場合（理論は良い）、次は実際的な比較になります。以下：

<p>This paragraph <span>has</span> a span.</p>
<p>This paragraph <div>has</div> a div.</p>

生成する：

This paragraph has a span.

This paragraph

has
a div.

だけでなく、表示されていることすべきである div要素がない使用済みのインラインも、それは単に影響を与える希望を生成しません。

他の回答で述べたように、デフォルトでdivはブロック要素としてレンダリングされますが、spanそのコンテキスト内でインラインでレンダリングされます。しかし、どちらにも意味的な価値はありません。これらは、コンテンツの特定のビットにスタイルとIDを適用できるようにするために存在します。スタイルを使用すると、aのdivように振る舞ったり、spanその逆も可能です。

の便利なスタイルの1つdivはinline-block

例：

1. http://dustwell.com/div-span-inline-block.html

2. CSS表示：インラインvsインラインブロック

私はinline-blockゲームWebプロジェクトで大成功を収めてきました。

Divはブロック要素であり、spanはインライン要素であり、その幅はdivが含まない場合、その内容に依存します。

スペイン語を少し知っているなら、このページを見てください。どこが適切に説明されていますか。

ただし、高速な定義divは、セクションを分割するためのものであり、のspanような別のブロック要素内の要素にある種のスタイルを適用するためのものdivです。

あるようになったのかだけに、いくつかの歴史的背景を追加したいspan対div

の歴史span：

1995年7月3日、Benjamin CW Sittler は、特定のテキストブロックにスタイルを適用するための一般的なテキストコンテナタグを提案しました。スタイルシートと組み合わせて使用​​する場合を除いて、レンダリングは中立です。読みやすさ、つまり意味についての議論があります。Bert Bosは、要素の拡張性の性質について、class属性（都市、人物、日付などの値）を通じて言及しています。Paul Prescodは、両方の要素が悪用されることを心配しています。彼は、「新しい要素はすべて古い要素の上にあるべきだ」と述べ、「セマンティクスのないタグを作成すれば、どこでも間違いなく使用できる」というテキストに反対しています。著者には、文書のセマンティクスを適切にタグ付けするように強制する必要があります。私たちは編集ベンダーにその選択を彼らのインターフェースで明示するように強制しなければなりません。」

-ソース（w3 wiki）

導入するRFCドラフトからspan：

まず、他の要素が適切でない場合に、LANGおよびBIDI属性を保持するための汎用コンテナが必要です。そのためにSPAN要素が導入されています。

-ソース（IETFドラフト）

の歴史div：

DIV要素を使用して、HTML文書を部門の階層として構造化できます。

...

CENTERは、HTML 3.0 DIV要素のサポートを追加する前にNetscapeによって導入されました。広く普及しているため、HTML 3.2でも保持されています。

HTML 3.2仕様

一言で言えば、どちらの要素も、より意味論的に一般的なコンテナの必要性から生まれました。Spanは、<text>テキストのスタイルを設定する要素のより一般的な代替として提案されました。Divは、ページを分割する一般的な方法として提案され、<center>コンテンツを中央揃えにするためにタグを置き換えるという追加の利点がありました。ページ区切りとしての歴史があるため、Divは常にブロック要素でした。Spanは常にインライン要素でしたが、その本来の目的はテキストのスタイリングでしたが、今日のdivとspanはどちらも、それぞれデフォルトのブロックとインラインの表示プロパティを持つ一般的な要素になりました。

HTMLには、コンテンツに構造またはセマンティクスを追加するタグがあります。たとえば、<p>タグは段落を識別するために使用されます。別の例は、<ol>順序付きリストのタグです。

上記のようにHTMLに適切なタグがない場合は、通常、<div>および<span>タグが使用されます。

<div>タグは、前と後の両方で改行を有する文書のblocklevelセクション/分割を識別するために使用されます。

divタグを使用できる場所の例は、ヘッダー、フッター、ナビゲーションなどです。ただし、HTML 5では、これらのタグはすでに提供されています。

<span>タグは、文書のインラインセクション/分割を識別するために使用されます。

たとえば、spanタグを使用して、インラインピクトグラフを要素に追加できます。

基本的に、彼ら自身も機能を実行しません。タグだけで機能について特定しているわけではありません。

CSSを使用してのみカスタマイズできます。

今あなたの質問に来ています：

SPANタグといくつかのスタイリングは、HTMLの段落内などの行内に保持する場合に役立ちます。これは、HTMLの行レベルまたはステートメントレベルの一種です。

例：

<p>Am writing<span class="time">this answer</span> in my free time of my day.</p>

前述のDIVタグ機能は、スタイリングでのみ表示でき、HTMLコードの大きなチャンクを保持できます。

DIVはブロックレベルです

例：

    <div class="large-time">
    <p>Am writing <span class="time"> this answer</span> in my free time of my day. 
    </p>
    </div>

どちらも、要件に基づいて、使用する時間とケースがあります。

答えが明確であることを願っています。ありがとうございました。