物理要素と論理要素の違いや、物理要素の一覧とその代替手段(スタイルシート)をご紹介します。
次の例で表示されている「サンプル」という文字は、IEなどの一般的なブラウザ見た場合には、文字の大きさや太さが同じように表示されます。
しかし、見た目は同じであっても、論理要素側の「サンプル」には「見出し」という意味を持ち、物理要素側の「サンプル」には何の意味も持ちません。
<h1>サンプル</h1> [論理要素]
<font size="6"><b>サンプル</b></font> [物理要素]
サンプル
「見出し」や文字の「強調」といったこれらの「意味」は、利用者のブラウザに伝えられることになります。意味的な情報を受け取ったブラウザ側は、それらの意味を独自の方法で表現し、その内容を利用者に分かりやすく伝えようとします。
例えば、strongタグ(論理要素)で囲まれた内容は「強調」という意味を持ちますが、ブラウザ側はこの「意味」の部分を次のように表現します。
IEなどの一般的なブラウザ → 太字にすることで強調されていることを表現
音声ブラウザ → トーンを変えて読み上げることで強調されていることを表現
タイプの異なるブラウザであっても、「意味」を伝えることによりその内容が適切に表現されるようになります。その結果、様々な環境でその情報を利用しやすくなります。
以下の物理要素による表示内容は、スタイルシートで代替することが可能です。
HTMLタグリストに掲載されている要素のみを表示しています。
| 物理要素 | 表示内容 | スタイルシート | 表示内容 |
|---|---|---|---|
| b | Webサイト | font-weight: bold | Webサイト |
| big | Webサイト | font-size: larger | Webサイト |
| font | Webサイト | color: #ff0000 | Webサイト |
| Webサイト | font-size: 80% | Webサイト | |
| i | Webサイト | font-style: italic | Webサイト |
| s | text-decoration: line-through | Webサイト | |
| small | Webサイト | font-size: smaller | Webサイト |
| strike | text-decoration: line-through | Webサイト | |
| tt | Webサイト | font-family: monospace | Webサイト |
| u | Webサイト | text-decoration: underline | Webサイト |