•  07-07-2019
  •  | 
  •  

質問

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

単一の文、または文に含まれていない場合は単語が、最小の論理部分であると思われます。CSS はレイアウトのみを目的としており、セマンティックな意味を目的とするものではないため、CSS は無視します。 スパンが文または単語の文字列を切り刻んで追加の意味的価値を提供するのはどのような場合ですか?

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

役に立ちましたか？

解決

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

  

次に、ウィザードは<！> lt; span class = <！> quot; wizardword <！> quot; <！> gt; gravenwist <！> lt; / span <！> gt;を呼び出しました。そして接近する軍隊を攻撃するように命じてください。 <！> lt; span class = <！> quot; wizardword <！> quot; <！> gt; gavenwist <！> lt; / span <！> gt;抵抗したが、ウィザードの<！> lt; span class = <！> quot; wizardword <！> quot; <！> gt; wistwand <！> lt; / span <！> gt;強すぎました。

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

  

その後、ウィザードは gravenwist を呼び出し、接近する軍隊を攻撃するように命じました。 gavenwist は抵抗しましたが、ウィザードの wistwand は強力すぎました。

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

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

スパンとdivの利点は、スパンがインラインコンテンツであり、divがブロック要素であるため、ほぼどこにでも表示できることです。したがって、スパンは他の特定の要素内でのみ発生します。

他のヒント

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

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

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

したがって、それらは表示的なものではなく、単に汎用的なものです。実際、<！> quot; spelling-mistake <！> quot;のように、意味的に意味のあるクラス名が使用される場合、スパンはめったに表示されません。 <！> quot; bold-red-text <！> quot;ではありません。

<div class="name">
  <span class="firstname">John</span>
  <span class="lastname">Doe</span>
</div>

何を表現したいかによって完全に異なります。名のマークアップがセマンティックな価値がある場合（CSSが名をフォーマットするためのフックを持っているか、スクリプト言語を使用してそれらを抽出するためだけの場合）、スパンを使用できます。

JavaScriptで要素を解析し、タグ内に値を挿入する場合、SPANを頻繁に使用します。例：

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

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

span s は、実際にはclass属性の形式のセマンティック情報のキャリアです。これはマイクロフォーマットで使用されます。

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

e.g。 <！> lt; span class = <！> quot; personal_phone_number <！> quot; <！> gt; 0123 456789 <！> lt; / span <！> gt;

  

CSSを無視します。   意味の意味、いつスパン   追加のセマンティック値を提供する   文または文字列を切り刻む   言葉？

CSS（およびその他の非HTMLマークアップ）を無視します。 <！> lt; span <！> gt;の人生の唯一の目的は、HTMLで表現できないマークアップを運ぶことです。 <！> lt; span style="dropCap" <！> gt;などのマークアップ。HTMLには同等のものはありませんが、何百年もの間出版に存在し、常に1文字だけに適用されます-最初の文字単語の区切り（またはそれ以上の区切り）を引き起こすことなく、アイテム（記事、何でも）の。

  

すべての場合において、他の   要素は追加に適しています   意味的価値、スパンを純粋に   レイアウト要素。これは本当ですか？

はい、いいえ。 <！> lt; p <！> gt;の唯一の実際の値意味的に中立であるということです。つまり、たとえば<！> lt; <=> <！> gt;とは異なり、他のマークアップを実行するために使用している場合は実行しないようにする必要はありません。また、<！> lt; <=> <！> gt;のような場合もあります。上記、他の効果が必要ない場合。

タグのコンテンツの一部（たとえば、単一の単語または文）にフォーマットルールを適用する場合。 spanタグを使用できます。タグなしフォーマットと呼ばれることもあります。

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

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

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

これは慣習の問題です。スタイリングを使用する場合、divは通常、コンテンツの区分を区切るために使用され、spanはインラインテキストを区切るために使用されます。どこでも<=>を簡単に使用することも、どこでも<=>を使用することもできますが、慣例によるものであっても、異なるものと考えると便利です。

HTMLでは、マイクロフォーマットに使用できます。しかし、実際のHTML仕様は X HTMLなので、意味がありません。 代わりに：

<P>Hello, my name is <SPAN class="name"> Joe Sixpack </SPAN></P>

使用したい：

<P>Hello, my name is <FOAF:name> Joe Sixpack </FOAF:name></P>

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

SPAN は主にスタイルを吊り下げるためのフックです (つまり、 <span style='color:blue'> の代わりに <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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top