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