リファレンスインデックスへ

テキストに意味を持たせるXHTMLタグの正しいマークアップ

有限会社タグパンダ
喜安 亮介
2009/2/20
テキストに意味を持たせるXHTMLタグの正しいマークアップをおさらいしましょう。フレーズ要素を含む19タグを一挙ご紹介します

今回紹介するタグ:
p q blockquote br pre ins del sub sup

特定部分に対してのみ論理的な意味を付加する「フレーズ要素」
em strong dfn code samp kbd var cite abbr acronym

テキストの論理的な意味を付加する要素

 今回は文章中(テキスト)に論理的な意味を付加したい場合に使われるHTMLタグを中心に解説してきます。

図 テキストの論理的な意味を付加するXHTML要素
図 テキストの論理的な意味を付加するXHTML要素

 これらの要素を用いたマークアップを行うことにより、「この文章は○○から引用された文」とか「この文字列は▲▲の略語である」といったふうに、テキストに論理的な意味を持たせることが可能になります。

p要素

 p要素は、文章の段落を表すための要素です。

 ブロックレベル要素として機能し、テキストとインライン要素を内包できますが、ブロックレベル要素を内包できません。

 p 文章の段落構造を表すp要素

q要素

 q要素は、段落による区切りが不要な短い引用文を表す際に使います。

 インライン要素として機能し、テキストとインライン要素を内包できますが、ブロックレベル要素を内包できません。cite属性値に引用元のURIを記述し、必要に応じてlang属性で言語指定を行います。

 q 短い引用文をインライン要素として表すq要素

blockquote要素

 blockquote要素は複数行にわたるブロックレベルの引用文を表す際に使います。ブロックレベル要素として機能し、ブロックレベル要素を内包できるのが特徴です。

 cite属性値に引用元のURIを記述し、必要に応じてlang属性で言語指定を行います。

 blockquote 複数行にわたるブロックレベルを引用するblockquote要素

br要素

 br要素は文章中で強制的に改行したい場合に使います。文書型がXHTMLの場合は<br />というふうに終了タグで閉じましょう。

 また、視覚的に行間を空けたいといった理由のみで使うのは好ましくありません。行間の調整にbr要素を使わず、視覚的表現はスタイルシートを使うようにしましょう。

 br 文章中での改行を表すbr要素

pre要素

 pre要素は整形済みテキスト表現したいときに使います。code要素と組み合わせてプログラミングのソースコードを表すのによく使われます。ブロックレベル要素として機能し、テキストとインライン要素を内包できます。

 また例外として、img要素、object要素、big要素、small要素、sub要素、sup要素などといった要素は内包できません。

 pre 整形済みテキストを表すときに使うpre要素

ins要素

 ins要素は文書中に変更が生じた場合、新たに追加した個所を表すために使われます。ブロックレベル要素としてもインライン要素としても機能できる特殊な要素です。テキストやインライン要素、ブロックレベル要素を内包できます。

 ins テキストの追記を明示的に表すins要素

del要素

 del要素は文書中に変更が生じた場合、新たに削除された個所を表すために使われます。

 ブロックレベル要素またはインライン要素となる特殊な要素で、テキストやインライン要素、ブロックレベル要素を内包できます。

 del テキストの削除を明示的に表すdel要素

sub要素

 sub要素は囲まれたテキストが、下付きで表示されるようになります。化学式や数式を表す際によく使われます。

 インライン要素として機能し、テキストとインライン要素を内包できます。

 sub 下付き文字を表すsub要素

sup要素

 sup要素は囲まれたテキストが、上付きで表示されるようになります。数式や注釈を付けたりする場合によく使われます。

 インライン要素として機能し、テキストとインライン要素を内包できます。

 sup 上付き文字を表すsup要素

特定部分にだけ論理的な意味を付加「フレーズ要素

 テキストの論理的な意味を付加する要素の中でも、特定部分に対してのみ論理的な意味を付加するものがフレーズ要素になります。これらの要素は通常文章中で使われ、インライン要素として機能します。フレーズ要素は、HTML4.01の仕様で em strong dfn code samp kbd var cite abbr acronymを指します。以下順に説明していきます。

em要素

 em要素は、強調を示す構造的情報を付加する場合に使われます。インライン要素として機能し、テキストとインライン要素を内包できます。

 em やや強い強調を表すem要素

strong要素

 strong要素は、より強い強調を示す構造的情報を付加する場合に使われます。インライン要素として機能し、テキストとインライン要素を内包できます。

 strong 強い強調を表すstrong要素

dfn要素

 dfn要素は、要素内のテキストが定義語として定義したものである場合に使われます。インライン要素として機能し、テキストとインライン要素を内包できます。

 dfn 定義語を表すdfn要素

code要素

 code要素は、要素内のテキストがコンピュータのプログラムコードである場合に使われます。インライン要素として機能し、テキストとインライン要素を内包できます。

 code プログラムのコードを表す場合に使うcode要素

samp要素

 samp要素はプログラムやスクリプトの出力結果を表す場合に使われます。インライン要素として機能し、テキストとインライン要素を内包できます。

 samp プログラムが出力した結果を表すsamp要素

kbd要素

 kbd要素はユーザーがキーボードから入力されるテキストを表す場合に使われます。インライン要素として機能し、テキストとインライン要素を内包できます。

 kbd キーボードから入力されるテキストを表すkbd要素

var要素

 var要素はプログラムの変数や引数といったテキストを表す場合に使われます。インライン要素として機能し、テキストとインライン要素を内包できます。

 var プログラムの変数となるテキストを表すvar要素

cite要素

 cite要素は引用元やほかのリソースの参照を明示的に表す場合に使われます。インライン要素として機能し、テキストとインライン要素を内包できます。

 cite 引用元やほかリソースの参照を表すcite要素

abbr要素

 abbr要素は語句の略語を表したい場合に使われます。title属性とともに使われ、属性値に略語のフルスペルを記述していきます。インライン要素として機能し、テキストとインライン要素を内包できます。

 abbr 語句の略語を表すabbr要素

acronym要素

 語句の頭文字であることを表したい場合に使われます。abbr要素同様title属性とともに使われ、属性値に頭字語を表すフルスペルを記述していきます。

 インライン要素として機能し、テキストとインライン要素を内包できます。

 acronym 語句の頭文字であることを表すacronym要素


喜安 亮介……1980年愛媛県生まれ。タグパンダの代表取締役。ディレクター兼デザイナーとしてWeb制作案件に携わる。社名のパンダは、「白・黒はっきりした正しい判断力と柔軟性のあるクリエイティブな発想」を提供するという思いから。

  1/20

 INDEX
Web標準HTMLタグリファレンス(2)
テキストの論理的な意味を付加する要素
テキストの論理的な意味を付加する
  p 文章の段落構造を表すp要素
  q 短い引用文をインライン要素として表すq要素
  blockquote 複数行にわたるブロックレベルを引用するblockquote要素
  br 文章中での改行を表すbr要素
  pre 整形済みテキストを表すときに使うpre要素
  ins テキストの追記を明示的に表すins要素
  del テキストの削除を明示的に表すdel要素
  sub 下付き文字を表すsub要素
  sup 上付き文字を表すsup要素
  特定部分に対してのみ論理的な意味を付加する「フレーズ要素」
  em やや強い強調を表すem要素
  strong 強い強調を表すstrong要素
  dfn 定義語を表すdfn要素
  code プログラムのコードを表す場合に使うcode要素
  samp プログラムが出力した結果を表すsamp要素
  kbd キーボードから入力されるテキストを表すkbd要素
  var プログラムの変数となるテキストを表すvar要素
  cite 引用元やほかリソースの参照を表すcite要素
  abbr 語句の略語を表すabbr要素
  acronym 語句の頭文字であることを表すacronym要素

【関連記事】

デザイナーのためのWeb学習帳
Webを構成する技術を超初心者向けに説明します。まずは基本の基本である「HTML」から攻略していこう!
デザインハック」コーナー
いまさら聞けないCSS/スタイルシート入門
Webデザインにあると便利なCSS。ちょっとサイトをステキにするためのスタイルシートです。基本の基本を学びませんか?
デザインハック」コーナー


「デザインハック」コーナーへ


@IT Special

- PR -

TechTargetジャパン


HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)
- PR -

イベントカレンダー

PickUpイベント

- PR -

アクセスランキング

もっと見る

ホワイトペーパーTechTargetジャパン

注目のテーマ

デザインハック 記事ランキング

本日 月間
ソリューションFLASH