HTMLタグ<div>と<span>の違いは何ですか？
<div>と<span>の使い方を示す簡単な例をいくつかお願いします。私はそれらが両方ともidまたはclassでページのセクションをマークするのに使用したのを見ました、しかし、私は一方が他方よりも好まれる時があるかどうか知ることに興味があります。
divはブロック要素、spanはインラインです。
つまり、意味的に使用するには、divを使用してドキュメントのセクションをラップし、spansを使用してテキスト、画像などの小さな部分をラップする必要があります。
例えば：
<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リファレンス here を参照してください。 <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="http://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には、記事、セクション、ナビゲーションなどの一般的なページ構造を定義する幅広い新しい要素セットが含まれていることに注意してください。 HTML 5ワーキングドラフト のセクション4.4は、それらをリストし、それらの使用法。 HTML5はまだ機能する仕様であるため、「最終的な」ものはまだありませんが、これらの要素のいずれかがどこにでも行くことは非常に疑わしいです。古いバージョンのIEでこれらの要素をスタイルする場合に使用する必要があるjavascriptハックがあります。基本的に、document.createElementを使用して各要素の1つを作成する必要があります要素はソースで指定されます。これを処理するライブラリがたくさんあります-簡単なGoogle検索が html5shiv になりました。
完全を期すために、私はあなたがこのようにそれについて考えることを勧めます：
- HTMLにはたくさんのブロック要素（前後の改行）と、たくさんのインラインタグ（改行なし）が定義されています。
- しかし現代のHTMLではすべての要素は 意味 を持つことになっています：
<p>は段落、<li>はリスト項目などです。そして正しい目的のために正しいタグを使うことになっています - 内容が引用であるかどうかにかかわらず<blockquote>を使用してインデントした昔のようにはありません。 - それで、 が noのときに何をしますか？ 400ピクセル幅の列に という意味で はありません。あなたのテキストのコラムはあなたのデザインに合っているので400px幅にしたいだけです。
- このため、彼らはHTMLにさらに2つの要素を追加しました。それ以外の場合は、意味のある要素を悪用することに戻るため、汎用または無意味な要素
<div>および<span>です。
ここにはすでによく、詳細な答えがありますが、視覚的な例はないので、ここに簡単な図があります。
<div>はブロックタグ、<span>はインラインタグです。
<div>はブロックレベルの要素で、<span>はインライン要素です。
インラインテキストで何かしたいのであれば、<span>が行を改行することはないので、<div>を使用することをお勧めします。
他の人が指摘したように、これらのそれぞれにはいくつかのセマンティクスが含まれています。最も重要なのは、<div>が文書内の論理的な分割を意味するということです。
<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>
本当の重要な違いは、Chrisの回答ですでに述べています。ただし、その影響は誰にとっても明らかではありません。
インライン要素として、<span>には他のインライン要素のみを含めることができます。したがって、次のコードは間違っています。
<span><p>This is a paragraph</p></span>
上記のコードは無効です。ブロックレベル要素をラップするには、別のブロックレベル要素を使用する必要があります（<div>など）。一方、<div>は、ブロックレベルの要素が有効な場所でのみ使用できます。
さらに、これらのルールは（X）HTMLで修正されており、CSSルールの存在によってnotが変更されています！したがって、次のコードはalso間違いです！
<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.
これは、 だけでなく a div ではなく がインラインで使用されることを示しています。それは単に望ましい効果を生み出さないでしょう。
他の回答で述べたように、デフォルトではdivはブロック要素としてレンダリングされ、spanはそのコンテキスト内でインラインでレンダリングされます。しかし、どちらにも意味的な価値はありません。それらはあなたがスタイリングとアイデンティティを与えられたコンテンツのどんなビットにでも適用することを可能にするために存在します。スタイルを使って、divをspanのように振る舞わせることができます。
divに便利なスタイルの1つがinline-blockです。
例：
私はゲームWebプロジェクトで、inline-blockを大成功に使用しました。
私はあなたが このページ を見るために少しスペイン語を知っているならば、どこで適切に説明されていると言うでしょう。
ただし、divはセクションを分割し、spanはdivのような別のブロック要素内の要素にある種のスタイルを適用するためのものです。
Divはブロック要素、spanはインライン要素であり、その幅はdivの内容によって異なりますが、divは異なります。
span vs divになった経緯に歴史的背景を追加したかっただけです
spanの履歴：
1995年7月3日、Benjamin C. W. Sittlerは、特定のテキストブロックにスタイルを適用するための汎用テキストcontainerタグを提案します。スタイルシートと組み合わせて使用する場合を除き、レンダリングはニュートラルです。読みやすさ、つまり意味についての議論があります。 Bert Bosは、クラス属性（都市、個人、日付などの値）を介して、要素の拡張性について言及しています。 Paul Prescodは、両方の要素が悪用されることを心配しています。彼は「新しい要素は古い要素の上にあるべきだ」と述べ、「セマンティクスのないタグを作成すれば、どこでも間違ったことなく使用できます。」作成者にドキュメントのセマンティクスを適切にタグ付けするよう強制します。エディターベンダーに、その選択をインターフェイスで明示的にさせる必要があります。」
spanを導入するRFCドラフトから：
最初に、他の要素が適切でない場合にLANGおよびBIDI属性を保持するための汎用コンテナが必要です。 そのためにSPAN要素が導入されています。
divの履歴：
DIV要素を使用して、HTMLドキュメントを部門の階層として構造化できます。
...
CENTERは、HTML 3.0 DIV要素のサポートを追加する前にNetscapeによって導入されました。広範囲に展開されているため、HTML 3.2でも保持されます。
一言で言えば、両方の要素は、より意味的に汎用的なコンテナの必要性から生まれました。 Spanは、テキストをスタイル設定する<text>要素のより一般的な代替として提案されました。 Divは、ページを分割する一般的な方法として提案されており、コンテンツを中央揃えにするために<center>タグを置き換えるという追加の利点がありました。 Divは、ページ区切りとしての歴史から、常にブロック要素でした。本来の目的はテキストのスタイル設定であり、今日ではdivとspanの両方がそれぞれデフォルトのブロックとインラインの表示プロパティを持つ汎用要素であるため、Spanは常にインライン要素でした。
HTMLには、構造や意味をコンテンツに追加するタグがあります。たとえば、<p>タグは段落を識別するために使用されます。もう1つの例は、番号付きリストの<ol>タグです。
上記のようにHTMLで利用可能な適切なタグがない場合、通常は<div>タグと<span>タグが使用されます。
<div>タグは、前後に改行がある文書のブロックレベルセクション/部を識別するために使用されます。
Divタグを使用できる場所の例は、ヘッダー、フッター、ナビゲーションなどです。ただし、HTML 5では、これらのタグはすでに提供されています。
<span>タグは、ドキュメントのインラインセクション/部を識別するために使用されます。
たとえば、スパンタグを使用して、インラインの絵文字を要素に追加できます。
覚えておいてください、基本的に、そして彼ら自身も機能を実行しません。それらは機能性に関してnot特有のものですタグだけで。
それらは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>
どちらも、あなたの要求に基づいて、いつ使用されるべきかという時間とケースがあります。
答えがはっきりしていることを願います。ありがとうございました。