HTMLタグの違いは何ですか＆lt; div＆gt;および＆lt; span＆gt ;?

Question

＆lt; div＆gt; および＆lt; span＆gt; の使用方法を示す簡単な例をいくつかお願いします。ページのセクションを id または class でマークするために使用されているのを見ましたが、どちらかが優先される場合があるかどうかを知りたいもう一方。

Answer 1

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>

...は違法です。

---

EDIT：HTML5以降、一部のブロック要素は一部のインライン要素の内側に配置できます。かなり明確なリストについては、MDNリファレンスこちらを参照してください。 ＆lt; span＆gt; はフレージングコンテンツのみを受け入れ、＆lt; div＆gt; はフローコンテンツであるため、上記は依然として違法です。

---

あなたはいくつかの具体的な例を求めたので、私のボウリングのウェブサイト 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 でラップされているため、スタイルを変更できます。ご覧のとおり、タイトルの2文字を span で囲みました。これにより、スタイルシートの色を変更できます。

また、HTML5には、記事、セクション、ナビゲーションなどの一般的なページ構造を定義する幅広い新しい要素セットが含まれていることに注意してください。 HTML 5ワーキングドラフトはそれらをリストし、その使用法についてのヒントを提供します。 HTML5はまだ機能している仕様なので、「最終」は何もありません。まだ、しかし、これらの要素のいずれかがどこかに行くことは非常に疑わしいです。 IEの古いバージョンでこれらの要素をスタイルする場合に使用する必要があるjavascriptハックがあります-基本的に、これらの要素の前に document.createElement を使用して各要素の1つを作成する必要がありますソースで指定されています。これを処理するライブラリがたくさんあります-クイックGoogle検索で html5shiv 。

Answer 2

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

• HTMLには多くのブロック要素（前後の改行）が定義されており、インラインタグ（改行なし）がたくさんあります。
• しかし、現代のHTMLでは、すべての要素に意味があると想定されています。＆lt; p＆gt; は段落、＆lt; li＆gt; リスト項目などであり、適切なタグを適切な目的に使用することになっています。昔は＆lt; blockquote＆gt; を使用してインデントしたときとは異なり、コンテンツが引用するかどうか。
• では、あなたがやろうとしていることに意味がない 場合はどうしますか？ 400ピクセル幅の列には意味はありませんが、ありますか？デザインに適しているため、テキストの列の幅を400ピクセルにする必要があります。
• このため、HTMLにさらに2つの要素を追加しました。一般的な、または無意味な要素＆lt; div＆gt; および＆lt; span＆gt; です。意味のある要素の悪用に戻ります。

Answer 3

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

＆lt; div＆gt; はブロックタグで、＆lt; span＆gt; はインラインタグです。

Answer 4

＆lt; div＆gt; はブロックレベルの要素で、＆lt; span＆gt; はインライン要素です。

インラインテキストで何かをしたい場合は、＆lt; div＆gt; のような改行を導入しないため、＆lt; span＆gt; を使用します。します。

---

他の人が述べたように、これらのそれぞれにはいくつかのセマンティクスが含まれています。最も重要なのは、＆lt; div＆gt; がドキュメントの論理的な分割を意味するということです。文書または何か、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>

Answer 5

実際の重要な違いは、Chrisの回答ですでに述べています。ただし、その影響は誰にとっても明らかではありません。

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

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

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

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

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

Answer 6

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

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

produces：

This paragraph has a span.

This paragraph

has
a div.

これは、divを インラインで使用しないでください だけでなく、目的の効果が得られないことを示しています。

Answer 7

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

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

です。

例：

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

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

ゲームWebプロジェクトで inline-block を大成功に使用しました。

Answer 8

Divはブロック要素であり、spanはインライン要素であり、その幅はdivがそうでない自己のコンテンツに依存します

Answer 9

これを見るためにスペイン語を少し知っているなら、ページ、適切に説明されています。

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

Answer 10

span vs div

になった経緯に歴史的なコンテキストを追加したかっただけです

span の履歴：

  

1995年7月3日、ベンジャミンC. W.シトラーは一般的なテキストを提案します   特定のテキストブロックにスタイルを適用するためのコンテナタグ。   レンダリングは中立です   スタイルシート。についての議論があります   読みやすさ、意味。 Bert Bosは拡張性に言及しています   クラス属性を介した要素の   市、人、日付など）。 ポールプレスコッドは、両方の要素が   虐待されます。彼は＆quot; any new   要素は古いものである必要があります＆quot;そして＆quot;を追加します   セマンティクスではなく、どこでも間違ったことなく使用できます。   作成者にドキュメントのセマンティクスを適切にタグ付けするように強制する必要があります。我々   エディターベンダーにその選択を明示的にさせる必要があります   インターフェイス。＆quot;

-ソース（w3 wiki）

span を導入したRFCドラフトから：

  

まず、一般的な           tainerは、LANGおよびBIDI属性を運ぶために必要です           他の要素が適切でない場合。 SPAN要素-           その目的のために紹介されています。

-ソース（IETFドラフト）

div の履歴：

  

DIV要素を使用して、HTMLドキュメントを部門の階層として構造化できます。

     

...

     

CENTERは、Netscapeがサポートを追加する前に導入されました   HTML 3.0 DIV要素。そのため、HTML 3.2で保持されます。   広範な展開。

HTML 3.2仕様

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

Answer 11

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

上記のようにHTMLで使用できる適切なタグがない場合、通常は＆lt; div＆gt; および＆lt; span＆gt; タグが使用されます。

＆lt; div＆gt; タグは、前後に改行があるドキュメントのブロックレベルのセクション/区分を識別するために使用されます。

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

＆lt; span＆gt; タグは、ドキュメントのインラインセクション/分割を識別するために使用されます。

たとえば、spanタグを使用して、インラインの絵文字を要素に追加できます。

Answer 12

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

これらは、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>

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

答えを期待しています。 ありがとう。

Answer 13

＆lt; div＆gt; はブロック要素です。  すべての段落またはdiv内に記述されたコンテンツとして、div内の要素全体にcssを適用できます。 divのみでスタイルを指定するだけです。

＆lt; span＆gt; はインライン要素です。

その要素にのみ反映されるすべてのCSSの変更。

<div style="color:green;">

 <h1>Example of div and span</h1>
   <p>
    This is a paragraph within a div
     <span style="color: red;"> Paragraph with in span. </span>
   </p>
 </div>