Span および Div HTML 要素の使用方法
目的ごとに異なるタグ
ハムザ・タルコル/ゲッティイメージズ
二 と スパン Web ページの構築では交換できません。それぞれが異なる目的を果たします。それぞれをいつ使用するかを知ることは、クリーンで管理しやすい Web サイトを開発するのに役立ちます。
Div 要素の使用
二 Web ページで論理的な区分を定義します。あ 分周 —分割の略—基本的には、他のものを配置できるボックスです HTML 要素 一緒に属しています。部門には、段落、見出し、リスト、リンク、画像など、複数の他の要素を含めることができます。追加の構造と編成を提供するために、内部に他の部門を含めることもできます。
を使用するには 分周 要素、オープンを配置 あなたが別の部門として欲しいあなたのページの領域の前のタグ、そして終わり その後にタグを付けます:
|_+_|この領域を CSS でスタイリングする場合は、 ID 開始 div タグへのセレクター:
|_+_|
または、クラス セレクターを追加できます。
|_+_|その後、CSS または JavaScript でこれらの要素を操作できます。
現在のベスト プラクティスは、ID の代わりにクラス セレクターを使用する方向に傾いています。ただし、どちらでもかまいません。 分周 ID とクラス セレクタの両方。
部門またはセクション?
の 分周 の要素とは異なります。HTML5 セクション 含まれているコンテンツに意味的な意味を与えないためです。コンテンツのブロックが 分周 または セクション 、要素の目的とコンテンツについて考えます。
- ページのその領域にスタイルを追加するためだけに要素が必要な場合は、 分周 エレメント。
- コンテンツに明確な焦点があり、それ自体で成り立つ場合は、 セクション 代わりに要素。
結局、どちらも 2 と セクション どちらも同様に動作し、いずれかの属性を指定して CSS でスタイルを設定できます。どちらもブロックレベルの要素です。
スパンの使用
スパン とは異なり、デフォルトでインライン要素です 分周 と セクション 要素。の スパン 要素は通常、テキストなどの特定のコンテンツをラップして、スタイルを追加するために使用できる追加のフックを提供するために使用されます。ただし、スタイル属性がないと、 スパン テキストにはまったく影響しません。
間のもう一つの違い スパン と 分周 要素はそれが 分周 要素には段落区切りが含まれますが、 スパン 要素は、関連する CSS スタイル ルールを で囲まれたものに適用するようブラウザに指示するだけです タグ:
|_+_|追加するかもしれません
|_+_|
または類似の スパン CSS でテキストのスタイルを設定する要素。
span 要素には必須の属性はありませんが、最も有用な 3 つは、 分周 エレメント：
使用する スパン そのコンテンツを新しいものとして定義せずにコンテンツのスタイルを変更したい場合 ブロックレベル要素 ドキュメントで。
たとえば、次の単語の 2 番目の単語が必要な場合 h3 赤に向かう場合、その単語を スパン その単語を赤いテキストとしてスタイルする要素。その言葉は今でも h3 要素ですが、赤で表示されます。