<div> …… 特別な意味を付加せず子要素をまとめる
広告
<div>タグは、特別な意味を付加せず子要素をまとめる際に使用します。
div要素に特別な意味はありません。
div要素は、特別な意味を付加せず子要素をまとめるコンテナ要素としてスタイリング目的に使用したり、
セクション内の複数の段落をラップしてまとめて意味付けする場合などに役立ちます。
div要素にclass属性、lang属性、title属性を指定することで、div要素の子要素グループに共通の意味を与えることができます。
div要素は、dl要素の子要素として、
dt要素とdd要素のグループをまとめる際にも使用できます。
より適切な要素がないか検討する
div要素は、他に適切な要素がない場合に最後の手段として使用することが推奨されています。
例えば、ブログ投稿はarticle要素、
章はsection要素、
ページのナビゲーション補助はnav要素、
フォームコントロールのグループはfieldset要素でマークアップする方が適切です。
div要素の代わりに文脈に応じた要素を使用することで、ユーザーのアクセシビリティが向上するでしょう。
div要素とspan要素の使い分け
div要素とspan要素の使い分けですが、
div要素は、複数の子要素をまとめてコンテンツブロックをまとめるのに便利です。
span要素は、インラインのテキストなどに対してクラス名や言語などを指定するのに役立ちます。
以下のサンプルは、div要素で２つのp要素をまとめています。
そのdiv要素にlang属性で言語を指定することで、２つの段落の言語をまとめて設定しています。
<article lang="en-US">
<h1>My use of language and my cats</h1>
<p>
My cat's behavior hasn't changed much since her absence, except
that she plays her new physique to the neighbors regularly, in an
attempt to get pets.
</p>
<div lang="en-GB">
<p>
My other cat, coloured black and white, is a sweetie. He followed
us to the pool today, walking down the pavement with us. Yesterday
he apparently visited our neighbours. I wonder if he recognises that
their flat is a mirror image of ours.
</p>
<p>
Hm, I just noticed that in the last paragraph I used British
English. But I'm supposed to write in American English. So I
shouldn't say "pavement" or "flat" or "colour"...
</p>
</div>
<p>
I should say "sidewalk" and "apartment" and "color"!
</p>
</article>
↓↓↓
My use of language and my cats
My cat's behavior hasn't changed much since her absence, except
that she plays her new physique to the neighbors regularly, in an
attempt to get pets.
My other cat, coloured black and white, is a sweetie. He followed
us to the pool today, walking down the pavement with us. Yesterday
he apparently visited our neighbours. I wonder if he recognises that
their flat is a mirror image of ours.
Hm, I just noticed that in the last paragraph I used British
English. But I'm supposed to write in American English. So I
shouldn't say "pavement" or "flat" or "colour"...
I should say "sidewalk" and "apartment" and "color"!
以下のサンプルは、div要素でdt要素とdd要素のグループをまとめています。
<dl>
<div>
<dt>最終更新時刻</dt>
<dd>2004-12-23T23:33Z</dd>
</div>
<div>
<dt>推奨更新間隔</dt>
<dd>60秒</dd>
</div>
<div>
<dt>著者</dt>
<dt>編集者</dt>
<dd>ロバート</dd>
<dd>ダニエル</dd>
</div>
</dl>
↓↓↓
- 最終更新時刻
- 2004-12-23T23:33Z
- 推奨更新間隔
- 60秒
- 著者
- 編集者
- ロバート
- ダニエルン
広告
