14

span 要素は div とまったく同じように見えますが、ブロック レベルではなくインライン レベルです。しかし、span 要素が提供できる有益な論理分割は思いつかないようです。

単一の文、または文に含まれていない単語は、最小の論理部分のようです。CSS はレイアウトのみを目的としており、セマンティックな意味を目的としていないため、CSS を無視します。

すべての場合において、セマンティックな値を追加するには他の要素の方が適しているように思われ、span は純粋にレイアウト要素になります。これは本当ですか？

4

12 に答える 12

28

Span を使用して、HTML の範囲外のセマンティックな意味を追加できます。これは、特定の属性を識別するクラスを使用して行うことができます。たとえば、サイエンス フィクションの小説を書いている場合、スパンを使用して造語を識別することができます。これは、それらを別の形式にしたい場合や、スペル チェッカーにそれらを無視させたい場合があるためです。

それから魔法使いは <span class="wizardword">グレイヴンウィスト</span> を呼び出し、近づいてくる軍隊を攻撃するように命じました。<span class="wizardword">gavenwist</span> は抵抗しましたが、魔法使いの <span class="wizardword">ウィストワンド</span> は強すぎました。

これは次のようにレンダリングできます

それから魔法使いはグラベンウィストを呼び出し、近づいてくる軍隊を攻撃するように命じました。ギブンウィストは抵抗したが、魔法使いのウィストワンドは強すぎた。

この種のもう 1 つの良い例は、microformatsです。これにより、HTML 内に任意の構造を作成できます。

<span class="tel">
 <span class="type">home</span>:
 <span class="value">+1.415.555.1212</span>
</span>

div に対するスパンの利点は、スパンはインライン コンテンツであるためほとんどどこにでも表示でき、div はブロック要素であるため、他の特定の要素内でのみ使用できることです。

于 2008-11-10T19:52:27.303 に答える
11

非常に便利な利点は、言語の変更をマークすることです。例えば 

<p>Welcome to Audi UK, <span lang="de">Vorsprung durch Technik</span>.</p>

複数の言語機能を備えたスクリーン リーダーは、これを利用できます。

したがって、それらはプレゼンテーションではなく、単なる一般的なものです。実際、「太字-赤いテキスト」ではなく「スペルミス」のように、意味的に意味のあるクラス名が使用されている場合、スパンが表示されることはめったにありません。

于 2008-11-10T20:11:37.157 に答える
5 
<div class="name">
  <span class="firstname">John</span>
  <span class="lastname">Doe</span>
</div>

何を表現したいかによります。ファースト ネームをマークアップすることがセマンティックな価値がある場合 (CSS がファースト ネームをフォーマットするため、または何らかのスクリプト言語を使用してファースト ネームを抽出するためのフックを持つため)、スパンを使用できます。

于 2008-11-10T19:44:21.360 に答える
4

JavaScript で要素を解析し、タグ内に値を挿入する場合は、SPAN をよく使用します。たとえば、次のようになります。

<span datafield="firstname"></span>

後で値が挿入されるので、その場合は意味がありますが、私が与えることにした意味だけです。それ以外の場合、スパンがレイアウトに影響を与えないという事実は、その場合に理想的です。

于 2008-11-10T19:45:39.627 に答える
2

spansはclass、実際には、属性の形式でセマンティック情報を運ぶことができます。これはマイクロフォーマットで使用されます。

于 2008-11-10T19:44:37.240 に答える
2

span タグに意味を与えるには、class または id 属性が必要です。

例: <span class="personal_phone_number">0123 456789</span>

于 2008-11-10T19:48:51.493 に答える
2

CSS を無視すると、セマンティックな意味が得られるため、スパンが文または単語の文字列を切り刻むことによって追加のセマンティック値を提供するのはいつですか?

CSS (およびその他の非 HTML マークアップ) を無視することはありません。< span> の唯一の目的は、HTML では表現できないマークアップを運ぶことです。< > などのマークアップspan style="dropCap"は、HTML には同等のものはありませんが、何百年もの間印刷出版に存在しており、常に 1 文字 (記事など) の最初の文字にのみ適用されます。単語区切り (または任意の大きな区切り)。

すべての場合において、セマンティックな値を追加するには他の要素の方が適しているように思われ、span は純粋にレイアウト要素になります。これは本当ですか？

はいといいえ。< > の唯一の本当の価値spanは、それが意味的に中立であることです。つまり、たとえば < p> とは異なり、他のマークアップを運ぶために使用している場合に実行したくないことは何も実行しません。また、上記の < span style="dropCap"> のように、他の効果が必要ない場合もあります。

于 2008-11-10T21:30:26.623 に答える
1

タグの内容の一部 (たとえば、1 つの単語や文) にフォーマット規則を適用する場合。span タグを使用できます。タグなしフォーマットと呼ばれることもあります。

EBNF -> XHTML コンバーターでスパンを使用して、リテラルとトークンに異なる形式を適用します。

于 2008-11-10T19:44:03.203 に答える
1

SPAN (および DIV) 要素自体は、一般に意味的に中立であると見なされます。適切なアプローチとして、可能な限りセマンティック マークアップを使用することをお勧めしますが、セマンティックな意味を提供する既存の html 要素 (EM、STRONG、ABBR、ACRONYM など) がセマンティック的に適切でない場合があります。あなたのコンテンツのために。したがって、次のステップは、意味的に中立な SPAN または DIV を、意味的に意味のある ID またはクラスと共に使用することです。

于 2008-11-10T21:32:53.777 に答える
0

SPAN の意味は、「これは (たとえば、テキスト) コンテンツの (一般的な) スパン」です。DIV と比較すると、「これは論理的な分割 (つまり、一般的なドキュメント セクション)」を意味します。

<span style='color:blue'>SPAN は主に からスタイルをぶら下げるためのフックです (したがっての代わりに使用できます<font color='blue'>)。

仕様から：

DIV および SPAN 要素は、id および class 属性と組み合わせて、ドキュメントに構造を追加するための一般的なメカニズムを提供します。これらの要素は、コンテンツをインライン (SPAN) またはブロックレベル (DIV) として定義しますが、コンテンツに他の表現方法を課すことはありません。したがって、作成者はこれらの要素をスタイル シートや lang 属性などと組み合わせて使用​​し、HTML を自分のニーズや好みに合わせることができます。

たとえば、クライアント情報のデータベースに基づいて HTML ドキュメントを生成したいとします。HTML には、「クライアント」、「電話番号」、「電子メール アドレス」などのオブジェクトを識別する要素が含まれていないため、DIV と SPAN を使用して、目的の構造効果と表示効果を実現します。TABLE 要素を次のように使用して、情報を構造化します。

<!-- Example of data from the client database: -->
<!-- Name: Stephane Boyera, Tel: (212) 555-1212, Email: sb@foo.org -->

<DIV id="client-boyera" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Boyera</TR>
<TR><TH>First name:<TD>Stephane</TR>
<TR><TH>Tel:<TD>(212) 555-1212</TR>
<TR><TH>Email:<TD>sb@foo.org</TR>
</TABLE>
</DIV>

<DIV id="client-lafon" class="client">
<P><SPAN class="client-title">Client information:</SPAN>
<TABLE class="client-data">
<TR><TH>Last name:<TD>Lafon</TR>
<TR><TH>First name:<TD>Yves</TR>
<TR><TH>Tel:<TD>(617) 555-1212</TR>
<TR><TH>Email:<TD>yves@coucou.com</TR>
</TABLE>
</DIV>
于 2009-04-07T16:17:07.247 に答える
0

彼は div と span の違いについて尋ねていると思いますが、デフォルトの動作以外には実際にはありません。

それは慣例の問題です。スタイルを使用する場合、divは通常、コンテンツの分割を区切るために使用され、spanはインライン テキストを区切るために使用されます。どこでも同じように簡単に使用することも、divどこでも使用することもできspanますが、慣例によるものであっても、それらを異なるものと考えると役に立ちます。

于 2008-11-10T20:46:17.443 に答える