HTML要素

HTML要素（HTMLようそ、英: HTML element）の記事では、HTML文書を構成する各種の要素を解説する。なお、一般に「HTML要素」と言った場合、HTML文書において「html」というタグ名のルート要素を指すことが多い。 例） <strong>強調部分です。</strong> 要素 (element) は、開始タグ (Start-tag)・内容 (Content)・終了タグ (End-tag) の3つから構成される。要素は<と>で囲まれる開始タグで始まり、</と>で囲まれる終了タグで終わる。開始タグと終了タグではさまれた部分が内容となる。また開始タグ内に、任意個の、属性 (attribute) と属性値 (value) のペア（HTML属性(HTML attribute)）を含むことができる。 「要素」と「タグ」はこのような関係にあり、明確に区別し、用語も明確に使い分ける必要がある。 また、XMLでは、開始タグや終了タグとは別に、空要素のための空要素タグ (Empty-Element Tags)が規程されている。空要素タグは<と/>で囲まれ、内容を持たない。意味は<elem></elem>のように記述された場合と基本的には全く同じに扱われる（ツール類の実装によっては、内部では識別しているものもある）。 HTMLを表記するための構文は、独自のHTML構文とXMLアプリケーションであるXML構文に大別される。HTML構文は、HTML 2～4.01までの間SGMLアプリケーションとして定義されていた。しかし、現実にはウェブブラウザのほとんどでSGMLとして処理されることはなく、そのためSGMLであることをやめて独自に構文を定義するようになった。もう一方のXML構文はXHTMLに由来する。 HTML構文とXML構文の相違は以下のようになる。 一部の開始タグ・終了タグは省略可能と定義されている。また、空要素 (void elements)と指定されている要素では開始タグのみを記述し、終了タグを書いてはならない。 HTML 4.01までは、SGMLの省略タグ機構によって同様のタグの省略が認められていた。 XMLはタグの省略は不可能である。そのため、XMLアプリケーションであるXML構文では空要素を表現する場合、次のうちどちらかを用いる必要がある。 空要素タグを使い「<要素名 />」や「<要素名/>」を使う。 開始タグの直後に終了タグを記述する（「<要素名></要素名>」）。 なお、古いユーザーエージェントのためには、前者のうち「/>」の前にスペースを入れる記述が推奨されている。 属性に関して次のような省略が可能である。 属性値に以下の文字を含まない場合、属性値を括る引用符が省略可能。 ASCII空白文字 U+0022 二重引用符 U+0027 アポストロフィー U+003D 等号 U+003C 不等号(より小) U+003E 不等号(より大) U+0060 グレイヴ・アクセント 空属性: 属性名が択一式である場合に属性名が省略可能。 XHL構文では、HTML構文で許されていた属性に関する省略は不可能である。これはXMLの特徴に因る。 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属性で指定する。 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> h1〜h6 文章の見出し (heading) を示す。h1が最上位の見出しで、h6が最下位の見出し。 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> 見た目を定義する要素。スタイルシートで代替が可能。これらのうち、i、bなどはHTML5以降、新たに意味づけがなされており、単なる見た目を定義する要素ではなくなっている。 i 文字を斜体 (italic) にする。（例：html） b 文字を太字 (bold) にする。（例：html） u 文字に下線 (underline) を引く。（例：html）CSSで代用可能で非推奨 s strike 文字に中央線 (strike-through) を引く。（例：html, html）CSSで代用可能で非推奨 big 文字を大きく(large)する。（例：html） small 文字を小さく(small)する。（例：html） 論理的な意味を表現する要素。 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属性に略さない状態の語を明示することができる。 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要素の振る舞いを取得・変更するにはAttributeを介した手法とPropertyを介した手法が存在する。AttributeとPropertyは互いの変更が反映されるように定義されている場合が多いが、必ずしもそうとは限らない（各HTML要素の定義による）。 HTMLの要素（Elements）はattributesをもつ。またElementsはWeb IDL（英語版）で記述されるDOM interfaceをもち、その中にWeb IDLのattributesをもつ。2つのattributesを呼び分けるために、前者のHTML attributesはContent attributes、後者のWebIDL attributeはIDL attributesと呼ばれる。JavaScriptはWeb IDLで書かれたDOM interfaceを実装することでWebページの操作を可能にしており、その際IDL attributesはJavaScript object propertiesとして実装されるため、しばしば俗称としてContent attributesはattribute、IDL attributesはpropertyと呼ばれる。 歴史的理由・言語的制約などにより、対応するattributeとpropertyは必ずしも名前が一致しない。例えばclass attributeはclassName propertyに対応する。大半のattribute-propertyは名前が一致しているが一致しているか否かに規則性はなく、逐一仕様書を確認する必要がある。 このようにHTML要素にはattribute（Content attribute）とproperty（IDL attribute）の2つの側面がある。あるattributeを変更したとき、対応するpropertyにも変更が反映されないとアクセスする方法によって得られる結果に矛盾が生じてしまう。それを防ぐために、いくつかのpropertyは対応するattributeを反映（reflect）する、と定義されている。reflectされるか否かは要素ごとにきまり、統一されたルールはない。 ウィキブックスにHTML関連の解説書・教科書があります。 W3C HTML 4.01 Specification HTML Living Standard HTML Living Standard 日本語訳