HTMLタグとは?

Weblio 辞書 > 辞書・百科事典 > 百科事典 > HTMLタグの意味・解説 

HyperText Markup Language

(HTMLタグ から転送)

出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2020/01/19 07:37 UTC 版)

ナビゲーションに移動 検索に移動
HTML
HTMLコードの例。
拡張子 .html, .htm
MIMEタイプ text/html
タイプコード TEXT
HTML
UTI public.html
開発者 W3C
WHATWG
種別 マークアップ言語
派生元 SGML
拡張 XHTML
国際標準 ISO/IEC 15445:2000

HyperText Markup Language(ハイパーテキスト マークアップ ランゲージ、HTML(エイチティーエムエル))は、ハイパーテキストを記述するためのマークアップ言語の1つである。World Wide Web (WWW)において、ウェブページ(1990年代後半頃からはコンテンツという語も利用されている。「中身」という意味の語であり、大層な意味は無い)を表現するために用いられる。ハイパーリンクや画像等のマルチメディアを埋め込むハイパーテキストとしての機能、見出し段落といったドキュメントの抽象構造、フォントや文字色の指定などの見た目の指定、などといった機能がある。

2019年6月以降[1]WHATWG により仕様が作られ、それがW3C勧告となる流れになっている(ただし、この体制になってからW3C勧告に至った仕様はまだ存在しない)。W3C は、XML ベースの規格である XHTML の勧告も行っている。

特徴

HTMLは木構造入子構造)のマークアップ言語であり、形式言語である。「プレーンテキストの文書を要素で括って意味付け」という一般的な説明[2]は間違いである。「『タグ』と『タグ』で括られたもの全体」が「要素」(element)であり、タグすなわち要素ではない。マークアップ言語としての特徴は、先祖であるSGMLや、兄弟のXMLと共通しているため、以下ではWWWというシステムにおける「ハイパーテキスト記述言語」としての側面についてのみ記述する。

HTMLの要素には、文書を表現するものとしてごく一般的なものである見出し(ヘッドライン、h1〜 )、段落(パラグラフ、p )、ハイパーテキストとして特徴的な「アンカー」( a )に関係するもの、画像など( img など)の電子メディア的なもの、などがある。また文字色の指定などといった、意味ではなく直接見た目のみを指定するようなものは、近年ではスタイルシートなどに分離するべきとされているが、歴史的事情、及び、スタイルシートよりもこの、HTMLでの記述が簡便になる場合が度々あること[3]から現在でもしばしば使われている。その他主要な要素は、HTMLの要素の記事で解説している。

形式言語として見た場合「構文規則」(あるいは文法)に相当する「スキーマ」は、HTML4まではDTDとして公開され要素ごとに記載することの出来る属性、内容に含むことの出来る要素などが定められていた。HTML 4.01 では厳密なもの[4]、HTML 3.2 からの移行過渡期のためのもの[5]、フレームを用いた文書のためのもの[6]といった3つのDTDが定義されていた。

HTML 3.2 では見た目を左右する要素や属性が追加されたがHTMLは本来文書構造を示すためだけにその存在意義があり、それらの要素は目的に反するものとされた。そのため視覚的・感覚的効果を定義する手段としてスタイルシート(一般にはその中のCSS)が考案された。見た目を左右する要素や属性の一部は HTML4 以降では非推奨とされており、HTML 4.01 Strict では定義されていないので使用できない。ただし HTML 4.01 Strict で定義され、非推奨とされない要素や属性の一部にも見た目を左右するものがある。装飾的な視覚表現のためにそれらの要素や属性を用いているのであればその内容に適する要素を用いた上で、スタイルシートで表現を指定するのが望ましい。

HTML文書

HTML で書かれた文書をHTML文書と言い、HTML では、まず文書型宣言を書く。文書型宣言が無いものは、HTML の規格に従っているとはいえない。HTML5 の文書型宣言は以下のようなものである。HTML4 までは Document Type Definition (DTD) によって定義される書式に沿って記述しなければならなく、DTD は文書型宣言(DOCTYPE 宣言)で宣言したバージョンのものが選択された。

<!DOCTYPE html>

次にHTML文書の例を挙げる。

<!DOCTYPE html>
<html lang="ja">
 <head>
  <meta charset="UTF-8">
  <link rel="author" href="mailto:mail@example.com">
  <title lang="en">HyperText Markup Language - Wikipedia</title>
 </head>
 <body>
  <article>
   <h1 lang="en">HyperText Markup Language</h1>
   <p>HTMLは、<a href="http://ja.wikipedia.org/wiki/SGML">SGML</a>
      アプリケーションの一つで、ハイパーテキストを利用してワールド
      ワイドウェブ上で情報を発信するために作られ、
      ワールドワイドウェブの<strong>基幹的役割</strong>をなしている。
      情報を発信するための文書構造を定義するために使われ、
      ある程度機械が理解可能な言語で、
      写真の埋め込みや、フォームの作成、
      ハイパーテキストによるHTML間の連携が可能である。</p>
  </article>
 </body>
</html>

このHTML文書は次のような構造を示している。

  • <!DOCTYPE html>:文書型宣言
    このテキストがHTML5であることを示す。
  • <html lang="ja">:html 要素。また、lang="ja"で、言語コード ja の言語が使われていることの明示。
    • <head>:head 要素(この文書のヘッダ情報の明示)
      • <meta :meta要素(文書のメタ情報)。ここでは、charset="UTF-8"で、文字コードが、「UTF-8」であることを示す。
      • link 要素(他のリソースとの関連を明示。この場合、作者の明示)
      • <title lang="en">:title 要素(この文書のタイトル)の明示。また、この部分は en の言語が使われていることの明示。
    • <body>:body要素(この文書の内容の明示)
      • <article>:article 要素(この要素が、記事であることを明示)
        • <h1 lang="en">:h1要素(第一レベル)の見出しを明示。また、lang="en">で、この部分の見出しは en の言語が使われていることを明示。
        • <p>:p(段落)要素の明示。
          • <a href="http://ja.wikipedia.org/wiki/SGML/">SGML</a>:a(アンカー)要素(他のリソースへのアンカー)であることの明示。hrefで、「""」内にリンク先のURLを記述する。ちなみに、このURLの場合は、WIKIPEDIA 日本語版のSGMLの記事。
          • <strong>:strong 要素(強い強調であることの明示)

タグによって文字列を括ることによりその文字列の意味付けがなされる。ユーザエージェントはそれを解釈して、例えば GUI によるウェブブラウザであれば strong 要素で括られたテキストを太字として表示するなどする。また、スタイルシートを用いることで見た目などを指定することができるようになっている。 尚、テキストエディターで改行をしても、ウェブブラウザ上では br 要素がなければ改行はされない。

要素

W3C勧告の HTML4.01 仕様書で、要素はタグではない[7]としている[8]。「タグ」とは、文字「<」で始まり、文字「>」で終わっている部分(マークアップ)のみを指し、「要素」(エレメント)は開始タグ~終了タグに囲まれた全体を指す概念である。 <br/> のように、開始タグと終了タグを兼ねる一つのタグのみで一つの要素を構成する場合もあるが、あくまでタグと要素の概念は別物である。

属性

要素にid、class、styleなどの属性を付与することができる。

歴史

1989年CERNティム・バーナーズ=リーは、オリジナルのHTML(および多くの関連したプロトコル、HTTPなど)のメモを提案し、1990年5月にコード化した[9]NEXTSTEPの動作するNeXTcubeワークステーション上で開発された。当時のHTMLは仕様ではなく、直面していた問題を解決するためのツール群であった。直面していた問題とは、ティム・バーナーズ=リーやその同僚たちがどのように情報や進行中の研究を共有するかということである。彼の成果は後に国際的かつ公開のネットワークの出現として結実し、世界的な注目を集めることになった。

HTML の初期のバージョンはゆるい文法規則によって定義されており、ウェブ技術になじみのない層に受け入れられる助けとなった。ウェブブラウザはウェブページの意図を推測し、レンダリングを実行するのが一般的であった。やがて公式規格においては厳格な言語構文を作ることを志向するようになっていったが、それに加え、ウェブブラウザの挙動を元に構文エラーの取り扱いも規格に含めることで、既存のウェブページに対する互換性の維持が図られている[10]

HTML が公式な仕様として定義されたのは1990年代からである。それは従来のマークアップ言語であるSGMLに、インターネットのためのハイパーテキストの機能を取り入れるというティム・バーナーズ=リーの提案に大きく影響を受けたものだった。

1993年にはIETFからHTML仕様書バージョン 1.0が公開され、SGMLからの拡張として文法定義のDTDを持つようになった。また1994年にIETFのHTMLワーキンググループが発足した。しかし、2.0以降のIETFの元での開発は他の開発との競合から停滞した。1996年からはW3Cによって商用ソフトウェア・ベンダーからの支援も受け、HTMLの仕様が標準化されている[11]。また2000年からは国際標準ともなった(ISO/IEC 15445:2000)。W3Cから勧告された最新のHTML仕様はHTML 5.2である。

HTML 1.0、HTML+

1993年6月に、IETFのIIIR Workingグループより提出されたHTML仕様書がインターネット・ドラフトとして発表された。本来はバージョン番号が付いていないが通常HTML 1.0と呼ぶ。このドラフトはティム・バーナーズ=リーおよびダニエル・コノリーによって、ティム・バーナーズ=リーの出した HTML Design Constraints に極力従うように書かれた。

1993年11月に、HTML の上位互換な HTML+ が発表された。テーブルなどが追加になっている。HTML+仕様書

HTML 2.0

1995年11月に、IETFのHTMLワーキンググループによって RFC 1866日本語訳)として仕様が発表された。下記の補助的な RFC もリリースされた。HTML 2.0 は RFC 2854 によって廃止され HTML は IETF ではなく W3C が管理することとなった。

  • 1995年11月:フォームベースのファイルアップロード。RFC 1867
  • 1996年5月:テーブル。RFC 1942
  • 1996年8月:クライアントサイドイメージマップ。RFC 1980
  • 1997年1月:HTMLの国際化。RFC 2070非公式な日本語訳)。「HTML i18n」とも呼ばれる。日本語を扱えるHTMLのバージョンとしては、最も古い。

HTML 3.0、HTML 3.2

HTML 3.0は策定作業が行われたが、ドラフトの段階で策定途中に破棄された。HTML 3.0仕様書

1997年1月14日に、HTML 3.2 がW3C勧告として仕様が発表された。HTML 3.2 Reference Specification非公式な日本語訳)。

HTML 4.0、HTML 4.01

1997年12月18日に、W3C勧告としてHTML 4.0の仕様が発表された。HTML 4.0は1998年4月24日に仕様が改訂[12]された。この仕様にいくらかのマイナーな修正が加えられたHTML 4.01は1999年12月24日にW3C勧告となった。Strict DTD の他にHTML 3.2からの移行過渡期のための Transitional DTD とフレームを使うことのできる Frameset DTD の3つのスキーマを持つ。

この後、HTML 4.01をベースとしてXHTML 1.0が策定されることになる。

2018年3月28日に代替された勧告に指定され、最新の勧告を参照することを推奨されている。

ISO/IEC 15445:2000

ISO/IEC JTC 1による規格。HTML 4.01を参考にし、より厳密に規格化された。これは2000年に翻訳され JIS X 4156:2000 というJIS規格になった。

ISO/IEC 15445:2000は2003年に訂正版[13]が発行された(ただし訂正なので、その後も名称はISO/IEC 15445:2000のまま)。JIS X 4156は2005年に改正され、JIS X 4156:2005となっている。

HTML5、HTML 5.1、HTML 5.2

その後、HTMLの改良にW3Cが興味を示さなかったことから、2004年にWHATWGが開発を開始した[14]。2007年には、W3Cもワーキンググループを設立し[15]、WHATWGと共同での開発が始まった。しかし、2012年7月、両者は別個に作業する体制となった[16]。WHATWGの仕様策定はHTML Living Standardとして継続している。

2014年10月28日に HTML5 が W3C より勧告された[17]。ブログや記事向けの「article」要素やマルチメディアのための「audio」および「video」要素などをはじめとした新要素・属性が追加され、以前は見た目を規定していた要素の殆どは変更または削除された。2016年11月1日に HTML 5.1 が勧告され[18]2017年12月14日に HTML 5.2 が勧告された[19]

W3CによるHTML5~HTML 5.2は、WHATWGのHTML Living Standardを元に編集が加えられたものであり、HTML Living Standardとの差異が発生している状態となっていた。これについてWHATWGのIan Hickson英語版がW3C側を強く非難する事態となっている[20]。W3CはHTML 5.3への作業を進められていたものの、2019年のWHATWGとの合意により、取りやめている[1]

HTML Living Standard

HTML Living Standard[21]WHATWG が更新し続けている HTML の最新仕様。2019年まではW3CのHTML5~HTML 5.2と並行して仕様策定が進められている状態だった。これを元にして W3C の勧告が作られている。

HTML形式の電子メール

脚注

[ヘルプ]
  1. ^ a b HTML標準仕様の策定についてW3CとWHATWGが合意発表。今後はWHATWGのリビングスタンダードが唯一のHTML標準仕様に”. ITmedia (2019年6月10日). 2020年1月19日閲覧。
  2. ^ ビレッジセンターHTML&SGML研究チーム『正しいHTML4.0リファレンス&作法』ビレッジセンター出版局、1998年3月20日。ISBN 4-89436-111-6
  3. ^ 例えば、太字指定の「<b></b>
  4. ^ : Strict
  5. ^ : Transitional
  6. ^ : Frameset
  7. ^ : Elements are not tags.
  8. ^ W3C "HTML 4.01 Specification" 3.2.1 Elements、1999年12月24日
  9. ^ Tim Berners-Lee. “Information Management: A Proposal”. CERN (March 1989, May 1990). 2012年11月28日閲覧。
  10. ^ 矢倉 (2009年7月21日). “HTML5の構文解析がもたらすもの”. Web標準Blog | ミツエーリンクス. 2020年1月19日閲覧。
  11. ^ Raggett, Dave (1998). Raggett on HTML 4. Addison-Wesley. pp. chap. 2: A history of HTML. ISBN 0-201-17805-2. http://www.w3.org/People/Raggett/book4/ch02.html. 
  12. ^ : revised
  13. ^ : corrected version
  14. ^ WHATWG; Mondo (2017年7月14日). “HTML Standard 日本語訳 1.6 歴史”. 2017年7月15日閲覧。
  15. ^ W3C (2007年3月8日). “HTML 標準の更新に着手”. 2017年7月15日閲覧。
  16. ^ HTML5仕様をめぐるW3CとWHATWGについて、Ian Hickson氏がメーリングリストに書いたこと”. Publickey (2012年7月24日). 2017年7月15日閲覧。
  17. ^ HTML5勧告–オープン・ウェブ・プラットフォームの重要なマイルストーンを達成
  18. ^ HTML 5.1 is a W3C Recommendation | W3C News
  19. ^ HTML 5.2 is done, HTML 5.3 is coming | W3C Blog
  20. ^ 渡邉卓 (2017年1月1日). “2017年のWeb標準:WEB+DESIGN STAGE新春特別企画”. gihyo.jp. 2020年1月19日閲覧。 “この事態を,WHATWG側のエディターであるIan Hickson氏は,「⁠剽窃」(⁠Plagiarism)という強い語を用いて非難しています。”
  21. ^ HTML Living Standard

関連項目

外部リンク


HTML要素

(HTMLタグ から転送)

出典: フリー百科事典『ウィキペディア(Wikipedia)』 (2019/11/02 15:00 UTC 版)

ナビゲーションに移動 検索に移動

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>のように記述された場合と基本的には全く同じに扱われる(ツール類の実装によっては、内部では識別しているものもある)。

HTML構文とXML構文との違い

HTMLを表記するための構文は、独自のHTML構文とXMLアプリケーションであるXML構文に大別される。HTML構文は、HTML 2~4.01までの間SGMLアプリケーションとして定義されていた。しかし、現実にはウェブブラウザのほとんどでSGMLとして処理されることはなく、そのためSGMLであることをやめて独自に構文を定義するようになった[2][3]。もう一方のXML構文はXHTMLに由来する。

HTML構文とXML構文の相違は以下のようになる。

タグの省略

HTML

一部の開始タグ・終了タグは省略可能と定義されている[4][5]。また、空要素 (void elements)と指定されている要素では開始タグのみを記述し、終了タグを書いてはならない[6][7]

HTML 4.01までは、SGMLの省略タグ機構によって同様のタグの省略が認められていた。

XML

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

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

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

属性の省略

HTML

属性に関して次のような省略が可能である。

  • 属性値に以下の文字を含まない場合、属性値を括る引用符が省略可能[9][10]
    • ASCII空白文字
    • U+0022 二重引用符
    • U+0027 アポストロフィー
    • U+003D 等号
    • U+003C 不等号(より小)
    • U+003E 不等号(より大)
    • U+0060 グレイヴ・アクセント
  • 空属性: 属性名が択一式である場合に属性名が省略可能。
XML

XHL構文では、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)

h1h6
文章の見出し (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要素の直下に記述する。
theadtfoottbody
それぞれヘッダ (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要素が必要。
thtd
それぞれ、ヘッダのセル (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) を引く。(例:htmlCSSで代用可能で非推奨
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 FlashVMLなどを使い、canvas タグを実現するライブラリがある。
img
埋め込み画像 (Embedded image) であることを示す。src属性にURIを指定し画像を表示させる。内容は空で終了タグは存在しない。
alt属性で画像の説明を記述することが必要である。これは画像に対応できないユーザーのため。単にレイアウト用の画像(スペーサー画像等)の場合にはaltは空にする。また「画像が表示できません」や「画像」と言った代替テキストはユーザにとっては有用でなく、「犬の写真」など簡素な説明や「飼い犬のポチが…」など情景が把握できる説明が有用である。説明が長文になる場合longdesc属性にURIを指定し、説明の文書を示す事もできる。
他のドメインの画像を指定することも可能であるため、著作権の観点から問題視されることもある(詳細は無断リンクの項目を参照)。
video
動画再生。前者のaudio要素と同様、ファイルによっては対応コーデックを導入しないと再生が実現できない場合がある。

コメント

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

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

AttributeとProperty

HTML要素の振る舞いを取得・変更するにはAttributeを介した手法とPropertyを介した手法が存在する。AttributeとPropertyは互いの変更が反映されるように定義されている場合が多いが、必ずしもそうとは限らない(各HTML要素の定義による)。

定義

HTMLの要素(Elements)はattributesをもつ[11][12]。またElementsはWeb IDLで記述されるDOM interfaceをもち、その中にWeb IDLのattributesをもつ[13][14]。2つのattributesを呼び分けるために、前者のHTML attributesContent attributes、後者のWebIDL attributeはIDL attributesと呼ばれる[15]。JavaScriptはWeb IDLで書かれたDOM interfaceを実装することでWebページの操作を可能にしており、その際IDL attributesはJavaScript object propertiesとして実装されるため、しばしば俗称としてContent attributesはattribute、IDL attributesはpropertyと呼ばれる[16]

Table. HTML attributesとWeb IDL attributes
spec formal name formal alt. name informal name
HTML attributes Content attributes attributes
Web IDL attributes IDL attributes properties

歴史的理由・言語的制約などにより、対応するattributeとpropertyは必ずしも名前が一致しない。例えばclass attributeはclassName propertyと対応する。大半のattribute-propertyは名前が一致しているが、一致しているか否かに法則はなく、逐一仕様書を確認する必要がある。

リフレクション

このようにHTML要素にはattribute(Content attribute)とproperty(IDL attribute)の2つの側面がある。あるattributeを変更したとき、対応するpropertyにも変更が反映されないとアクセスする方法によって得られる結果に矛盾が生じてしまう。それを防ぐために、いくつかのpropertyは対応するattributeを反映(reflect)する、と定義されている[17]。reflectされるか否かは要素ごとにきまり、統一されたルールはない[18]

参考

脚注

[ヘルプ]
  1. ^ 開始タグ・終了タグをあわせてHTMLタグ(もしくはタグ)と呼ぶこともあるが仕様で定められた表現ではない。
  2. ^ HTML Standard 12.2 Parsing HTML documents”. WHATWG (2019年10月31日). 2019年10月27日閲覧。
  3. ^ WHATWG HTML 標準 HTML Standard 12.2. HTML 文書の構文解析法”. ウェブ関連仕様 日本語訳 (2019年10月25日). 2019年10月27日閲覧。
  4. ^ HTML Standard, Developer's Edition 12.1.2.4 Optional tags”. WHATWG (2019年10月31日). 2019年11月2日閲覧。
  5. ^ HTML Standard, Developer's Edition 日本語訳 12.1.2.4 任意のタグ”. 2019年11月2日閲覧。
  6. ^ HTML Standard, Developer's Edition 12.1.2 Elements”. WHATWG (2019年10月31日). 2019年11月2日閲覧。 “Void elements only have a start tag; end tags must not be specified for void elements.”
  7. ^ HTML Standard, Developer's Edition 日本語訳 12.1.2 要素”. 2019年11月2日閲覧。 “空要素に対して終了タグは指定してはならない。”
  8. ^ XHTML 1.0 The Extensible HyperText Markup Language HTML C. Compatibility Guidelines
  9. ^ HTML Standard, Developer's Edition 12.1.2.3 Attributes Unquoted attribute value syntax”. WHATWG (2019年10月31日). 2019年11月2日閲覧。
  10. ^ HTML Standard, Developer's Edition 日本語訳 12.1.2.3 属性 引用符で囲まれない属性値構文”. 2019年11月2日閲覧。
  11. ^ 3.2.4.1 Attributes [1]
  12. ^ Content attributes /n A normative list of attributes that may be specified on the element [2]
  13. ^ 2.1.9 Dependencies / Web IDL / The IDL fragments in this specification must be interpreted as required for conforming IDL fragments, as described in Web IDL. [3]
  14. ^ A normative definition of a DOM interface that such elements must implement. [4]
  15. ^ they are referred to as content attributes for HTML and XML attributes, and IDL attributes for those defined on IDL interfaces. HTML Living Standards
  16. ^ The IDL attribute is also known as a JavaScript property. MDN web docs
  17. ^ Some IDL attributes are defined to reflect a particular content attribute. [5]
  18. ^ Unfortunately, there are no clear rules and the way IDL attributes behave in conjunction with their corresponding content attributes depends on the attribute. [6]


英和和英テキスト翻訳>> Weblio翻訳
英語⇒日本語日本語⇒英語
  

辞書ショートカット

すべての辞書の索引

「HTMLタグ」の関連用語

HTMLタグのお隣キーワード

   

英語⇒日本語
日本語⇒英語
   
検索ランキング



HTMLタグのページの著作権
Weblio 辞書情報提供元は参加元一覧にて確認できます。

  
ウィキペディアウィキペディア
All text is available under the terms of the GNU Free Documentation License.
この記事は、ウィキペディアのHyperText Markup Language (改訂履歴)、HTML要素 (改訂履歴)の記事を複製、再配布したものにあたり、GNU Free Documentation Licenseというライセンスの下で提供されています。 Weblio辞書に掲載されているウィキペディアの記事も、全てGNU Free Documentation Licenseの元に提供されております。

©2020 Weblio RSS