div と span

ウェブブラウザで表示するように設計された文書の標準マークアップ言語であるHTMLでは、タグとタグは文書の各部を定義するために使用される要素であり、一意の分類が必要な場合に識別可能です。(段落)、(強調) などの他の HTML 要素がコンテンツの意味を正確に表す場合、 タグとタグを追加で使用すると、読者にとってのアクセシビリティが向上し、作成者にとっては保守が容易になります。既存の HTML 要素が適用できない場合、と は文書の各部を効果的に表すことができるため、 、、、 などのHTML 属性を適用できます。^{[1] [2]}<div><span> <p><em><span><div><span><div>classidlangdir

<span>は、文章内の単語など、文書のインライン部分を表します。は、いくつかの段落やキャプション付きの画像など、文書のブロックレベル<div>部分を表します。は区切りを表します。 要素を使用すると、セマンティック属性 ( など)、CSSスタイル (色やタイポグラフィなど)、またはクライアント側スクリプト(アニメーション、非表示、拡張など) を適用できます。^{[1] [2]}<div>lang="en-US"

<div>文書の「区分」を定義します。これは、インライン要素の範囲よりも、その上および下の要素とより明確に区別されるブロックレベルの項目です。^[3]

たとえば、段落内のテキストの特定の部分を赤くするには、<span>次のように使用します。^{[説明が必要(例も含める<div>) ]}

この要素は、1995年に国際化ワーキンググループの第2ドラフトhtml-i18nでHTML<span>に導入されました。しかし、HTML言語の一部になったのはHTML 4.01になってからで、1997年にHTML 4 W3Cワーキングドラフトに登場しました。^[4]

<span>は、テキストのインライン範囲をマークアップするために導入されました。これは、「他の要素が適切でない場合に LANG 属性と BIDI 属性を運ぶための汎用コンテナが必要である」ためです。それ以来、より豊富なセマンティック要素が定義され、適用する必要がある可能性のある属性もさらに多くありますが、それでも汎用コンテナはその汎用目的を果たします。

<div>とには複数の違いがあります<span>。最も顕著な違いは、要素の表示方法です。標準 HTML では、 はブロックレベル要素<div>ですが、 はインライン要素です。ブロックはページ上の文書のセクションを視覚的に分離し、他のブロックレベル コンポーネントを含むことができます。要素には、周囲のコンテンツとインラインで情報の一部が含まれ、他のインラインレベル コンポーネントのみを含めることができます。実際には、要素のデフォルトの表示はカスケーディング スタイル シート(CSS) を使用して変更できますが、各要素の許可されたコンテンツは変更できません。たとえば、CSS に関係なく、要素にブロックレベルの子を含めることはできません。^[5]<span><div><span><span>

<span>要素は、<div>囲まれた要素の論理的なグループ化を示すためにのみ使用されます。

<span>およびタグをまたは属性<div>とともに使用する主な理由は 3 つあります。 classid

<span>および要素が CSS と組み合わせてまたは属性を<div>持ち、コンテンツの一部にレイアウト、タイポグラフィ、色、およびその他のプレゼンテーション属性を適用することはよくあります。CSS は視覚的なスタイル設定にのみ適用されるわけではありません。音声ブラウザーで読み上げられる場合、CSS スタイル設定は音声速度、強勢、豊かさ、さらには立体画像内の位置にも影響を与えることができます。 classid

これらの理由から、またよりセマンティックな Web をサポートするために、HTML 内の要素に付加される属性は、特定のメディアでの表示プロパティを単に意図するのではなく、そのセマンティックな目的を記述する必要があります。たとえば、 の HTML はセマンティックが弱いのに対し、 では要素を使用して強調 (斜体のテキストとして表示) を示し、より適切なクラス名を導入しています。CSS を正しく使用することで、このような「警告」は画面上では赤い太字で表示されますが、印刷時には省略される可能性があります。その時点では対処するには遅すぎるからです。おそらく、音声で伝えるときには、強調を強め、音声速度を少し遅くする必要があります。2 番目の例は、単なるプレゼンテーションではなく、セマンティックが豊かなマークアップです。 <span class="red-bold">password too short</span><em class="warning">password too short</em><em>

ページ コンテンツの一部をこのようにグループ化してラベル付けすることは、単にページを全体的に意味的に意味のあるものにするために導入された可能性があります。ワールド ワイド ウェブが今後何年、何十年でどのように発展するかを予測することは不可能です。今日設計されたウェブ ページは、私たちがまだ想像もできない情報システムがウェブを巡回し、処理し、分類しているときにもまだ使用されている可能性があります。Google などの今日の検索エンジンでさえ、かなり複雑な独自の情報処理アルゴリズムを使用しています。

ワールド ワイド ウェブ コンソーシアム(W3C)は、数年にわたり、ウェブ全体を今日および将来の情報システムにとってさらに有用かつ有意義なものにすることを目的とした、大規模なセマンティック ウェブプロジェクトを運営してきました。

マイクロフォーマット運動は、セマンティックの概念を構築しようとする試みですclass。たとえば、マイクロフォーマットに対応したソフトウェアは、次のような要素を自動的に見つけて、電話番号を自動的にダイヤルできるようにします。 <span class="tel">123-456-7890</span>

HTML または XHTML マークアップがページ訪問者のクライアント ブラウザーに配信されると、クライアント側のコードがWeb ページの内部構造 (またはDocument Object Model ) をナビゲートする必要が生じる可能性があります。その最も一般的な理由は、ページがクライアント側の JavaScriptとともに配信され、ページがレンダリングされた後に継続的な動的動作が生成されるためです。たとえば、「今すぐ購入」リンクの上にマウスを移動して、ページ上の他の場所にある価格を強調する場合、JavaScript コードでこれを行うことができますが、マークアップ内のどこにあるかに関係なく、JavaScript で価格要素を識別する必要があります。次のマークアップで十分です。もう 1 つの例はAjaxプログラミング手法です。たとえば、ハイパーテキスト リンクをクリックすると、JavaScript コードが新しい価格見積のテキストを取得し、ページ全体を再読み込みせずに、ページ内の現在の価格見積の代わりに表示します。サーバーから新しいテキストが返されると、JavaScript は新しい情報で置き換えるページ上の正確な領域を識別する必要があります。 <div class="price">$45.99</div>

自動テスト ツールでは、要素や属性を使用して Web ページのマークアップをナビゲートする必要もあります。動的に生成された HTML では<span>、xUnitファミリーのメンバーであるHttpUnitなどのページ テスト ツールや、フォーム駆動型Web サイトに適用された場合のApache JMeterなどの負荷テスト ツールやストレス テスト ツールの使用が含まれる場合があります。 <div>classid

<div>と を慎重に使用することは、 <span>HTML および XHTML マークアップの重要な部分です。ただし、これらは過度に使用されることがあります。

HTMLで利用可能なさまざまなリスト<div>構造は、要素を独自に組み合わせたものよりも好ましいかもしれません<span>。^[6]

たとえば、次のようになります。

< ul  class = "menu" > 
  < li >メインページ</ li > 
  < li >目次</ li > 
  < li >ヘルプ</ li > 
</ ul >

生成する

• メインページ
• コンテンツ
• ヘルプ

... は通常、これよりも好ましいです:

< div  class = "menu" > 
  < span >メインページ</ span > 
  < span >コンテンツ</ span > 
  < span >ヘルプ</ span > 
</ div >

生成する

 メインページ
 コンテンツ
 ヘルプ

<div>要素や<span>要素ではなく HTML を意味的に使用する他の例としては<fieldset>、Web フォームを分割するために 要素を使用すること、そのような分割を識別するために 要素を使用すること、フォーム要素を識別するために や要素ではなく<legend>を使用すること、またはそのような目的で使用される要素を使用することなどが挙げられます。^[7]<label><input><div><span><table>

HTML5ではいくつかの新しい要素が導入されました。例としては<header>、、、要素などがあります。意味的に適切な要素を使用すると<footer>、<nav>やより<figure>もHTML文書の構造が向上します。^[8]<span><div>

• HTMLとHTML5
• HTML要素
• HTML属性
• カスケード スタイル シートとヘルプ: カスケード スタイル シート
• CDATA
• スパン内のコンテキストオブジェクト(COinS)
• JavaScript
• セマンティックウェブ

• グループ化要素: DIV 要素と SPAN 要素
• CSS を使用して斜めの div を作成する