HTML要素

HTML要素（HTMLようそ、英: HTML element）の記事では、HTML文書を構成する各種の要素を解説する。なお、一般に「HTML要素」と言った場合、HTML文書において「html」というタグ名のルート要素を指すことが多い。

要素の構成

例）

<strong>強調部分です。</strong>

要素（element）は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される^[1]。要素は<と>で囲まれる開始タグで始まり、</と>で囲まれる終了タグで終わる。開始タグと終了タグではさまれた部分が内容となる。また開始タグ内に、任意個の、属性（attribute）と属性値（value）のペアを含むことができる。

「要素」と「タグ」はこのような関係にあり、明確に区別し、用語も明確に使い分ける必要がある。

また、XMLでは、開始タグや終了タグとは別に、空要素のための空要素タグ（Empty-Element Tags）が規程されている。空要素タグは<と/>で囲まれ、内容を持たない。意味は<elem></elem>のように記述された場合と基本的には全く同じに扱われる（ツール類の実装によっては、内部では識別しているものもある）。

SGMLとXMLとの違い

HTMLはSGMLアプリケーションであるHTMLとXMLアプリケーションであるXHTMLに大別される。この違いによる相違は以下のようになる。

タグの省略

HTML

SGML宣言でSHORTTAG YESと宣言されているSGMLアプリケーションは省略タグ機構に則って開始タグや終了タグの省略が可能である。HTML 4.01などの大半のHTMLはSHORTTAG YESと宣言されているので、DTDで省略可能とされているタグ^[2]を省略することができる。ただし、省略タグ機構に則る必要があるため、いかなる場合でも省略可能というわけではない^[3]。

XHTML

XMLはタグの省略は不可能である。そのため、XMLアプリケーションであるXHTMLでは空要素を表現する場合、次のうちどちらかを用いる必要がある。

空要素タグを使い「<要素名 />」や「<要素名/>」を使う。
開始タグの直後に終了タグを記述する（「<要素名></要素名>」）。

なお、古いユーザエージェントのためには、前者のうち「/>」の前にスペースを入れる記述が推奨されている^[4]。

属性の省略

HTML

SGML宣言でSHORTTAG YESと宣言されているSGMLアプリケーションは属性に関して次のような省略が可能である。なお、HTML 4.01などの大半のHTMLはSHORTTAG YESと宣言されている。

属性値がname token^[5]となる場合に属性値を括る引用符が省略可能。
属性名が択一式である場合に属性名が省略可能。

XHTML

XHTMLでは、HTMLで許されていた属性に関する省略は不可能である。これはXMLの特徴に因る。

HTML要素一覧

基本的な構造を表す要素

html: HTML文書のルート要素(document root element)。
head: HTML文書のヘッダ部分(document head)を指定する要素。HTML文書自身に関する情報（例：タイトルやスタイルシートに関する情報など）を指定できる。
body: HTML文書の本体部分(document body)を指定する要素。

HTML文書は、ヘッダ部分と本体部分の2つに分けることができる。2007年11月現在で有効なスキーマでは、ルート要素であるhtml要素の直下にはhead要素、body要素をこの順で1つずつだけ取ることができる。

HTML文書は次のような構造となる。

<html>
  <head>
    head要素以下に取ることができる要素群。
    title要素などをはじめとしたそのHTML文書自身に関する情報からなる。
  </head>
  <body>
    body要素以下に取ることができる要素群。
    HTML文書の本文となる情報を記述する。
  </body>
</html>

ヘッダ内に記述可能な要素

title: タイトル (document title) を指定する。多くのウェブブラウザ実装系では、タイトルバーに表示される。例えば、このページのタイトルは "HTML要素 - Wikipedia" である。; HTML文書で唯一必須かつ省略のできない要素。
base: 相対パスの基準URL (document base URI) をhref属性で指定する。

ヘッダ内で複数記述できる要素 (repeatable head elements)

link: 自分自身とhref属性で指定したファイルとの関係をrel属性で定義する。; rel属性はHTML4.01で有効なものには alternate, stylesheet, start, next, prev, contents, index, glossary, copyright, chapter, section, subsection, appendix, help, bookmarkがあり、他に使われるものとして、shortcut iconがある。
meta: 文書の情報 (generic metainformation) を定義する。
object: 埋め込みオブジェクト (generic embedded object) であることを示す。大抵の場合はインライン要素として使用する。data属性にURI、type属性にMIMEタイプ(image/gif等)を指定することでFLASHや音楽など様々な種類のオブジェクトを出力する事ができる。; 内容には代替(オブジェクト要素も可)を記述する。例えば一番外からオブジェクト要素(FLASH)、オブジェクト要素(画像)、説明文、のように入れ子にするとFLASHの利用できない環境では画像が、FLASHと画像の利用できない環境では説明文が出力される。これはimg要素等のalt属性と比べると高性能な代替システムであるが、これに対応しないウェブブラウザも少なくない。
param: プロパティ値の設定(named property value)を行う。object要素で使用するメディアに対しての初期値を設定するために使用する。; 内容は空で終了タグは存在しない。
style: スタイル情報(style info)を記述する。; type属性の記述が必要（text/css等）。
script: スクリプト(script statements)を記述する。; type属性（text/javascriptなど）とmeta要素でスクリプトタイプの宣言が必要。

文書の更新情報を示す要素

ins: 追加された文書(inserted text)であることを示す。; datetime属性に追加日時を記載できる。
del: 削除された文書(deleted text)であることを示す。; datetime属性に削除日時を記載できる。

ブロックレベル要素

p: 段落(paragraph)を構成する。
blockquote: 引用文(long quotation)であることを示す。; ウェブブラウザによってはインデントして表示することがあるが、この要素はあくまで引用目的に用いるべきであり、単にインデントするために用いるのは好ましくない。また、内容にクォーテーションマーク（「"」や「'」）を用いるのは避けるほうが良い。; cite属性で引用元・出典を明示することができる。
pre: 整形済みテキスト(preformatted text)の節であることを示す。; 内容にはインライン要素を含める事もできるがimg、object、big、small、sub、sup要素は使用できない。; ウェブブラウザのサイズによる折り返しがされなくなるため、リキッドレイアウトを行うには不向き。
div: ブロックレベルでのスタイルコンテナ。; この要素自体に意味は無い。文書の構造を示すときや、既存の要素には含められない物の代用要素として使用する。
noscript: スクリプトが動作しない環境での代替コンテンツ(alternate content container for non script-based rendering)であることを示す。スクリプトが動作する環境では無視される。; 代替となりうるコンテンツを示す要素である。
hr: 水平線(horizontal rule)を示す。内容は空で終了タグは存在しない。
address: 著者の情報・連絡方法(information on author)を示す。; メールアドレスを記述するのが一般的。ただし、address要素内のメールアドレスがメールアドレス検索ロボットの標的になりスパムメールなどの被害に遭う可能性もある。
form: コントロール要素を纏めた入れ物であることを示す(interactive form)。; action属性が必須で、入力されたデータの処理を行うURIを指定する。
fieldset: フォームコントロールのグループ(form control group)を示す。; 関連したフォームコントロールを記述することで利便性を高めることが出来る。
legend: fieldset要素の表題(fieldset legend)を示す。

以下にfieldset要素とlegend要素の記述例を示す。

<form action="http://...">
  <fieldset>
    <legend>名前</legend>
    <label>姓:<input type="text"></label>
    <label>名:<input type="text"></label>
  </fieldset>
  <fieldset>
    <legend>住所</legend>
    <label>県:<input type="text"></label>
    <label>市:<input type="text"></label>
  </fieldset>
</form>

見出し(heading)

h1〜h6: 文章の見出し(heading)を示す。h1が最上位の見出しで、h6が最下位の見出し。

リスト(list)

ul: 順序なしリスト(unordered list)を示す。一つ以上のli要素を含む必要がある。
ol: 順序付きリスト(ordered list)を示す。一つ以上のli要素を含む必要がある。
li: リストの項目(list items)を示す。ブロック要素を含められるため、入れ子のリストを作成することもできる。
dl: 定義のリスト(definition list)であることを示す。dt要素かdd要素を1つ以上含む必要がある。
dt: 定義する用語(definition term)であることを示す。
dd: 定義の説明(definition description)であることを示す。

表を構成する要素

表形式のデータを表す要素群。その特性からレイアウトに使用されることがあるが間違いである。

また正しくマークアップする為には(他の要素に比べ)多少の知識を要する。これは音声ブラウザの挙動など、アクセシビリティを考慮した場合に制約が多いため。

table: 表(table)を構成する要素の大枠を示す。summary属性に表の要約・解説を記述する。; 内容の要素には細かく順番が規定されていて以下の通りである。; 0個か1個のcaption要素、0個以上のcolgroup要素とcol要素、0個以上のthead要素、0個以上のtfoot要素、1個以上のtbody要素。
caption: 表題(table caption)を示す。table要素の直下に記述する。
thead、tfoot、tbody: それぞれヘッダ(table header)、フッタ(table footer)、本体(table body)で、表内での節(table section)を示す。; 内容はtr要素のみで、1つ以上の記述が必要である。また、各要素内においての列の数は等しくなくてはならない。
colgroup: 構造的な列のグループ(table column group)を示す。; グループ化させるには2つの方法があり、span属性で列数を指定する方法かcol属性を列数分記述する方法である。
col: 列のグループ(table column)を示す。; colgroup要素と違い、構造的なグループを示さず、スタイルの指定を主としたグループ化を行う。; span属性でグループ化する列数を指定する。内容は空で終了タグは存在しない。
tr: 表内の行(table row)を示す。; 内容に1つ以上のth要素かtd要素が必要。
th、td: それぞれ、ヘッダのセル(table header cell)、データのセル(table data cell)を示す。; 視覚系でないユーザーエージェントに対応する為にいくつかの整形方法がある。

ヘッダ要素のid属性と、データ要素のheaders属性を結びつける(同じ値を指定する)。これによって音声ブラウザではヘッダとデータの内容を交互に読み上げることが出来る。
上記の省略系といえるscope属性を用いる。ヘッダ属性にcolを指定することで縦方向・rowを指定することで横方向のデータと結びつけることが出来る。
ヘッダ要素にabbr属性で短縮系を指定する。例えば、ヘッダ要素の内容が"価格（円）"等の場合、逐一読み上げるのは冗長になる。abbr属性が"価格"となっていれば、「価格100」等と読み上げられ、冗長さは解消される。

以下にtable要素の記述例を示す。

<table summary="取り扱い商品の一覧表。商品ごとに価格・備考を表記する。" border="1">
  <capthion>商品一覧</capthion>
  <colgroup class="head" span="1"></colgroup>
  <colgroup class="data" span="2"></colgroup>
  <thead>
    <tr>
      <th id="t1">商品名</th>
      <th id="t2" abbr="価格">価格（円）</th>
      <th id="t3" abbr="備考">備考（産地・在庫など）</th>
    </tr>
  </thead>
  <tbody>
    <tr><td headers="t1">りんご</td><td headers="t2">100</td><td headers="t3">青森産</td></tr>
    <tr><td headers="t1">みかん</td><td headers="t2">150</td><td headers="t3">在庫無し</td></tr>
  </tbody>
</table>

インライン要素

物理要素(fontstyle)

見た目を定義する要素。スタイルシートで代替が可能。

i: 文字を斜体(italic)にする。（例：html）
b: 文字を太字(bold)にする。（例：html）
u: 文字に下線(underline)を引く。（例：html）CSSで代用可能で非推奨
s
strike: 文字に中央線を引く(strike-through)。（例：~~html~~,~~html~~）CSSで代用可能で非推奨
big: 文字を大きく(large)する。（例：html）
small: 文字を小さく(small)する。（例：html）

論理要素(phrase)

論理的な意味を表現する要素。

em: 強調(Indicates emphasis)する。（例：html）
strong: 強く強調(Indicates stronger emphasis)する。（例：html）
dfn: 定義された用語(defining)を示す。
code: プログラムなどのソースコード(computer code)を示す。
samp: プログラムなどによる出力のサンプル(sample output from programs, scripts, etc.)を示す。
kbd: ユーザが入力する文字(text to be entered by the user)を示す。; アプリケーションのチュートリアルなどでユーザが自由に入力できる箇所であることを示す際などに用いる。
var: プログラムなどに用いる変数(variable or program argument)を示す。
cite: 出典(citation or a reference)を示す
abbr: 略語(abbreviated form)を示す。; title属性に略さない状態の語を明示することができる。
acronym: 頭字語(acronym)を示す。; abbr要素と同様に、title属性に略さない状態の語を明示することができる。

特別な要素(special)

a: アンカー(anchor)であることを示す。href属性にリンク先URIを指定しハイパーリンクを作成する。; 内容にはリンク先の概要を表記する。内容だけを見てリンク先が判断できることが望ましく、「ここをクリック」等は使うべきでないとされる。内容が冗長になる場合はtitle属性で説明を付加することができる。; accesskey属性でショートカットキーを設定することができ、ユーザビリティの向上が期待できる。
audio: 音声再生。但し、ファイルによっては対応コーデックを導入しないと再生が実現できない場合がある。詳細は上記の内部リンクを参照。
canvas: 解像度に依存したビットマップキャンバスを表示。グラフやゲーム用の表示画像を描画することができる。HTML5で導入予定であり、主要ブラウザではすでに実装済み。Internet Explorer 向けに、Adobe FlashやVMLなどを使い、canvas タグを実現するライブラリがある。
img: 埋め込み画像(Embedded image)であることを示す。src属性にURIを指定し画像を表示させる。内容は空で終了タグは存在しない。; alt属性で画像の説明を記述することが必要である。これは画像に対応できないユーザーのため。単にレイアウト用の画像(スペーサー画像等)の場合にはaltは空にする。また「画像が表示できません」や「画像」と言った代替テキストはユーザにとっては有用でなく、「犬の写真」など簡素な説明や「飼い犬のポチが…」など情景が把握できる説明が有用である。説明が長文になる場合longdesc属性にURIを指定し、説明の文書を示す事もできる。; 他のドメインの画像を指定することも可能であるため、著作権の観点から問題視されることもある。詳細は(無断リンク)の項目参照。
video: 動画再生。前者のaudio要素と同様、ファイルによっては対応コーデックを導入しないと再生が実現できない場合がある。

: コメントは、文書ソースの任意の場所に追加することができる。たとえば doctype の前にもコメントを記入できる。しかし、他のタグ内に入れることはできない。ただし、doctype の前に空白文字以外の文字があると、Internet Explorer 6 はブラウザの互換モードでその文書をひらく仕様になっている。

コメント内の文字は、ブラウザによって処理(表示)されないで無視される。コメントは入れ子構造できない。

参考

脚注

↑ 開始タグ・終了タグをあわせてHTMLタグ（もしくはタグ）と呼ぶこともあるが仕様で定められた表現ではない。
↑ HTML 4.01では、body要素の開始タグ・終了タグやli要素の終了タグなどがそれに該当する
↑ 例えば、タグを省略した場合にでも、どの箇所でどのタグを省略したのかを一意に特定できる必要がある。
↑ XHTML 1.0 The Extensible HyperText Markup LanguageHTML C. Compatibility Guidelines
↑ SGML宣言のNAMING LCNMCHARとNAMING UCNMCHARにある文字とアルファベットから構成される文字列。

[1] 開始タグ・終了タグをあわせてHTMLタグ（もしくはタグ）と呼ぶこともあるが仕様で定められた表現ではない。

[2] HTML 4.01では、body要素の開始タグ・終了タグやli要素の終了タグなどがそれに該当する

[3] 例えば、タグを省略した場合にでも、どの箇所でどのタグを省略したのかを一意に特定できる必要がある。

[4] XHTML 1.0 The Extensible HyperText Markup LanguageHTML C. Compatibility Guidelines

[5] SGML宣言のNAMING LCNMCHARとNAMING UCNMCHARにある文字とアルファベットから構成される文字列。

[1]

[2]

[3]

[4]

[5]

HTML要素

Contents

要素の構成

SGMLとXMLとの違い

タグの省略

HTML

XHTML

属性の省略

HTML

XHTML

HTML要素一覧

基本的な構造を表す要素

ヘッダ内に記述可能な要素

ヘッダ内で複数記述できる要素 (repeatable head elements)

文書の更新情報を示す要素

ブロックレベル要素

見出し(heading)

リスト(list)

表を構成する要素

インライン要素

物理要素(fontstyle)

論理要素(phrase)

特別な要素(special)

コメント

参考

脚注

案内メニュー

表示

個人用ツール

navigation

search

tool