1. Home
  2. HTMLタグ
  3. HTMLの基本
  4. 物理要素と論理要素

物理要素と論理要素



物理要素と論理要素について

要素には、その内容に意味を持つ「論理要素」と、意味を持たない「物理要素」があります。

■論理要素
タグで囲まれた内容に何らかの意味を持たせる要素です。例えば、文字の強調(em要素strong要素)などがこのタイプの要素になります。
■物理要素
タグで囲まれた内容は意味を持たず、見た目の変更だけを目的とした要素です。例えば、太字(b要素)やイタリック体(i要素)などがこのタイプの要素になります。

物理要素と論理要素の表示例

以下の「サンプル」というテキストは、一般的なブラウザで見た場合はどちらも同じように表示されます。

<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 サンプル

HTMLの基本

ページの先頭へ


inserted by FC2 system