Span要素とdiv要素を使用する方法

div要素は、HTML5セクション要素とは異なります。これは、囲まれた内容に意味的意味を与えないためです。 コンテンツのブロックがdivかセクションかどうか分からない場合は、要素の目的と内容がどのようなものを使用するかを決定するのに役立つかどうかを考えます。

• ページのその領域にスタイルを追加するだけの要素が必要な場合は、div要素を使用する必要があります。
• 含まれるコンテンツに明確なフォーカスがあり、単独でそれに耐えることができる場合は、代わりにsection要素を使用することができます。

最終的に、divとセクションの両方がかなり同様に動作し、どちらの値にも属性値を与え、CSSでスタイルを設定して必要なサイトの外観を得ることができます。 どちらもブロックレベルの要素です。

要素の使用

スパン要素は、デフォルトではインライン要素です。 これは、div要素とsection要素を区別して設定します。 span要素は、特定のコンテンツ、通常はテキストをラップして、後でスタイルを設定できる追加の「フック」を与えるためによく使用されます。 CSSと共に使用すると、囲むテキストのスタイルを変更できます。 しかし、スタイル属性がなくても、span要素だけではテキストには何の効果もありません。

これは、span要素とdiv要素の主な違いです。 前述のように、div要素には段落区切りが含まれていますが、span要素は関連するCSSスタイルルールをタグで囲まれたものに適用するようにブラウザに指示します。

ハイライトされたテキストとハイライトされていないテキスト

class = "highlight"または他のクラスをspan要素に追加して、CSSでテキストをスタイルします（例：class = "highlight">）。

span要素には必須の属性はありませんが、最も有用な3つはdiv要素の属性と同じです。

• スタイル
• クラス
• id

ドキュメント内の新しいブロックレベルの 要素としてそのコンテンツを定義せずに、コンテンツのスタイルを変更する場合は、spanを使用します。

たとえば、h3見出しの2番目の単語を赤色にしたい場合、その単語を赤いテキストとしてスタイルするスパン要素でその単語を囲むことができます。 単語はまだh3要素の一部として残っていますが、赤色でも表示されます。

これは私の素晴らしい見出しです

ジェレミージラール編集：2/2/17