ラボラジアン 
HTML の各タグに関する情報を提供します。主に HTML5 の情報を扱います。
（HTML5の仕様書である HTML Standard を翻訳している部分も多くあります）
後半では、タグ毎に使い方などを書いていくつもりですが、まだ途中です。
目次
- 1. HTMLの仕様となる文書
- 2. コンテンツモデル と カテゴリー
- 3. HTML の要素
- 4. HTMLの書き方
- 5. 参照
1. HTMLの仕様となる文書
現在、WHATWG というコミュニティーと W3Cという組織がHTMLの仕様を公開していますが、WHATWG が公開している HTML Standard が主流のようです。
HTML Standard には バージョンがなく常に更新されていきます。最近のウェブブラウザもバージョンという考え方は薄れてきていて、バックグラウンドで自動的に更新されていきますが、これは HTMLの仕様と同じ更新方法であるといえます。
この更新方法に関しては、以下のページで詳しく説明されています。
2. コンテンツモデル と カテゴリー
HTML 要素（<p>, <div> など）は内容（コンテンツ）を持っています。
例として、p 要素で説明しますと、以下のように <p> と </p> で囲まれた部分がコンテンツです。
<p> ここが p の持つコンテンツ（内容）です。 </p>HTML5 では、コンテンツの性質をいくつかの種類にカテゴリ分けしています。１つの要素が複数のカテゴリに属していることもあります。
コンテンツは以下のカテゴリーに分類されます。
- メタデータ・コンテンツ（Metadata content）
- フロー・コンテンツ（Flow content）
- セクショニング・コンテンツ（Sectioning content）
- 見出しコンテンツ（Heading content）
- フレージング・コンテンツ（Phrasing content）
- 埋め込みコンテンツ（Embedded content）
- インタラクティブ・コンテンツ（Interactive content）
参考
以下、各コンテンツについて説明します。
1. メタデータ・コンテンツ（Metadata content）
以下の性質のどれかを持つコンテンツです。
- そのコンテンツ以外の部分の見栄えや振る舞いを定める。
- その文書と他の文書との関係を定める。
- その他のメタ情報を定める
このコンテンツに当てはまる要素
base,link,meta,noscript,script,style,template,title
参考
2. フロー・コンテンツ（Flow content）
body 内で使用される要素のほとんどは、フロー・コンテンツに分類されます。このコンテンツに当てはまる要素
a,abbr,address,area( map 要素の子孫である場合 ),article,aside,audio,b,bdi,bdo,blockquote,br,button,canvas,cite,code,data,datalist,del,details,dfn,dialog,div,dl,em,embed,fieldset,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hr,i,iframe,img,input,ins,kbd,label,link( body 内で許可されている場合 ),main,map,mark, mathmlmath,menu,meta,meter,nav,noscript,object,ol,output,p,picture,pre,progress,q,ruby,s,samp,script,section,select,slot,small,span,strong,sub,sup, svgsvg,table,template,textarea,time,u,ul,var,video,wbr, 自立型カスタム要素, text
※ mathml と svg は名前空間です。
※ text は、「何もない」もしくは「Text ノード」を表します。
参考
3. セクショニング・コンテンツ（Sectioning content）
見出しとフッターの適用範囲を定義するコンテンツです。
それぞれのセクショニング・コンテンツ要素は、潜在的に「見出し」と「アウトライン」を持ちます（「アウトライン」とは、階層構造になっているセクションのことです）。
このコンテンツに当てはまる要素
article,aside,nav,section
参考
4. セクショニングルート（sectioning roots）
これとは別に、 セクショニングルート（sectioning roots）と呼ばれる要素もあります。
こちらの要素もアウトラインを持ちますが、その内容は「外部の文書である」という扱いになります。
こちらの要素もアウトラインを持ちますが、その内容は「外部の文書である」という扱いになります。
セクショニングルートに当てはまる要素
blockquote,body,details,dialog,fieldset,figure,td
参考
5. 見出しコンテンツ（Heading content）
セクションの見出しを定義するコンテンツです。セクショニング・コンテンツを使って明示的に記述する場合と見出しコンテンツ自身により暗黙的に記述する場合があります。
このコンテンツに当てはまる要素
h1,h2,h3,h4,h5,h6,hgroup
参考
6. フレージング・コンテンツ（Phrasing content）
フレージング・コンテンツは、文書におけるテキスト部分、または段落内でテキストを表す要素です。フレージング・コンテンツが続くと段落になります。
フレージング・コンテンツに分類されるほとんどの要素は、フレージング・コンテンツしか含むことができません。
このコンテンツに当てはまる要素
a,abbr,area( map 要素の子孫である場合 ),audio,b,bdi,bdo,br,button,canvas,cite,code,data,datalist,del,dfn,em,embed,i,iframe,img,input,ins,kbd,label,link( body 内で許可されている場合 ),map,mark, mathmlmath,meta（itemprop属性がある場合 ）,meter,noscript,object,output,picture,progress,q,ruby,s,samp,script,select,slot,small,span,strong,sub,sup, svgsvg,template,textarea,time,u,var,video,wbr, 自立型カスタム要素, text
※ mathml と svg は名前空間です。
※ text は、「何もない」もしくは「Text ノード」を表します。
参考
7. 埋め込みコンテンツ（Embedded content）
以下の性質のどちらかを持つコンテンツです。
- 他のリソースを文書にインポートする
- 他の名前空間からきたコンテンツを文書に挿入する
このコンテンツに当てはまる要素
audio,canvas,embed,iframe,img, mathml<math>,object,picture, svg<svg>,video
※ MathML と SVG は名前空間です。
参考
8. インタラクティブ・コンテンツ（Interactive content）
ユーザーとのやり取りを特に意図したコンテンツです。
また、`tabindex` 属性を付けることによって、どんな要素も インタラクティブ・コンテンツにすることができます。
このコンテンツに当てはまる要素
a(href属性があった場合 ),audio(controls属性があった場合 ),button,details,embed,iframe,img(usemap属性があった場合 ),input(type属性が Hidden 状態でない場合),label,select,textarea,video(controls属性があった場合 )
参考
9. まとめ図
各コンテントと要素との関係がおおまかに分かるように図にまとめてみました。
※ 要素に対して条件付きで当てはまるコンテンツがある場合は、現実的にありそうな条件であれば当てはまるものとみなして書いています（あくまで参考です）。
参考
3. HTML の要素
各要素についての説明です。
執筆中
以下の表を利用して説明します。
| カテゴリー | その要素が属するカテゴリーです。 |
|---|---|
| 使用できる場所 | その要素を置くことのできる場所です。 |
| コンテンツ | その要素の中に配置することのできるコンテンツです。 |
1. ルート要素
参考
html 要素
2. メタデータ（Document metadata）
参考
head 要素
| カテゴリー | なし |
|---|---|
| 使用できる場所 | html 要素の1つ目の要素として |
| コンテンツ | ドキュメントが iframe 要素の srcdoc 属性で指定されたドキュメントである場合、またはタイトル情報が上位プロトコルから利用可能な場合： メタデータ・コンテンツの0個以上の要素。その中で title 要素は2つ以上ありません。base 要素も2つ以上ありません。そうでなければ： メタデータ・コンテンツの1つ以上の要素。そのうち title 要素が1つだけあり、base 要素は2つ以上ありません。 |
head要素は、文書のメタデータの集合を表します。
コードサンプル
<!doctype html>
<html>
<head>
<title>A document with a short head</title>
</head>
<body>
...
<!DOCTYPE HTML>
<HTML>
<HEAD>
<META CHARSET="UTF-8">
<BASE HREF="http://www.example.com/">
<TITLE>An application with a long head</TITLE>
<LINK REL="STYLESHEET" HREF="default.css">
<LINK REL="STYLESHEET ALTERNATE" HREF="big.css" TITLE="Big Text">
<SCRIPT SRC="support.js"></SCRIPT>
<META NAME="APPLICATION-NAME" CONTENT="Long headed application">
</HEAD>
<BODY>
...
title 要素
base 要素
base要素は使わない方がよい。
link 要素
meta 要素
style 要素
3. セクション（Sections）
参考
body 要素
article 要素
| カテゴリー | フロー・コンテンツ, セクショニング・コンテンツ, パルパブル・コンテンツ |
|---|---|
| 使用できる場所 | フロー・コンテンツが期待される場所 |
| コンテンツ | フロー・コンテンツ |
section 要素
h1からh6のどれかを含むことが推奨される。
参考
aside 要素
h1, h2, h3, h4, h5, h6 要素
header 要素
address 要素
4. グループ化 コンテンツ（Grouping content）
参考
p 要素
hr 要素
pre 要素
blockquote 要素
サンプルコード
<blockquote>
<p>For writing maintainable and scalable HTML documents.</p>
<footer>— HTML Best Practices</footer>
</blockquote>
ol 要素
ul 要素
li 要素
dl 要素
dt 要素
dd 要素
figure 要素
figcaption 要素
div 要素
main 要素
5. テキストレベル セマンティクス（Text-level semantics）
参考
a 要素
em 要素
| カテゴリー | フロー・コンテンツ, フレージング・コンテンツ, パルパブル・コンテンツ |
|---|---|
| 使用できる場所 | フレージング・コンテンツが期待される場所 |
| コンテンツ | フレージング・コンテンツ |
- 「重要」ではなく「強調」を表す。
- 入れ子にすることで、強調の度合いを強めることができる。
- 「強調」というのは、どこを強調するかで文章の意味を変えてしまう。
strong 要素
| カテゴリー | フロー・コンテンツ, フレージング・コンテンツ, パルパブル・コンテンツ |
|---|---|
| 使用できる場所 | フレージング・コンテンツが期待される場所 |
| コンテンツ | フレージング・コンテンツ |
- 「強調」ではなく「重要」を表す。
- ここでの「重要」とは、英単語で言うと importance（重要）, seriousness（深刻）, urgency（緊急） といった意味である。
small 要素
s 要素
cite 要素
q 要素
dfn 要素
abbr 要素
data 要素
time 要素
code 要素
var 要素
samp 要素
kbd 要素
sub, sup 要素
i 要素
b 要素
u 要素
mark 要素
ruby 要素
rb 要素
rt 要素
rtc 要素
rp 要素
bdi 要素
bdo 要素
span 要素
br 要素
wbr 要素
6. リンク (Links)
参考
a 要素
area 要素
7. 編集（Edits）
参考
ins 要素
del 要素
8. 埋め込みコンテンツ（Embedded content）
参考
picture 要素
- ブラウザによってサポートされていない形式のファイルを指定する場合に、異なる形式の代替えリソースと合わせて指定することができる（
source要素を使う）。 - スマートフォンや Retinaディスプレイなど高解像度のディスプレイに向けて、ピクセル密度記述子を使った画像の指示を行いたい場合は、代わりに
srcset属性をセットしたimg要素を使用します。
source 要素
主に picture 要素の中で使用する。
画面幅などに応じて、表示する画像を指定することができる。
例
<picture>
<source media="(min-width: 45em)" srcset="large.jpg">
<source media="(min-width: 32em)" srcset="med.jpg">
<img src="small.jpg" alt="The wolf runs through the snow.">
</picture>
img 要素
ドキュメント： 4.8.3 The img element – HTML Standard
- 画面の解像度に応じて、表示する画像を指定することができる。
例
<h2>From today's featured article</h2>
<img src="/uploads/100-marie-lloyd.jpg"
srcset="/uploads/150-marie-lloyd.jpg 1.5x,
/uploads/200-marie-lloyd.jpg 2x"
alt="" width="100" height="150">
<p><b><a href="/wiki/Marie_Lloyd">Marie Lloyd</a></b> (1870–1922)
was an English <a href="/wiki/Music_hall">music hall</a> singer, ...
- その画像を同期で読み込むのか、非同期で読み込むのかを指定することができる。
iframe 要素
ドキュメント： 4.8.5 The iframe element
- iframe 内に表示するコンテンツを記述する。
embed 要素
object 要素
param 要素
video 要素
audio 要素
track 要素
map 要素
area 要素
9. 表形式データ（Tabular data）
参考
table 要素
caption 要素
colgroup 要素
col 要素
tbody 要素
thead 要素
tfoot 要素
tr 要素
td 要素
th 要素
10. フォーム（Forms）
参考
form 要素
label 要素
input 要素
select 要素
datalist 要素
optgroup 要素
option 要素
textarea 要素
keygen 要素
output 要素
progress 要素
meter 要素
fieldset 要素
legend 要素
11. インタラクティブ要素（Interactive elements）
参考
details 要素
summary 要素
dialog 要素
12. スクリプト（Scripting）
参考
script 要素
nonscript 要素
template 要素
canvas 要素
13. その他
mathml math 要素
svg svg 要素
4. HTMLの書き方
参考になるページ
