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 では、コンテンツの性質をいくつかの種類にカテゴリ分けしています。1つの要素が複数のカテゴリに属していることもあります。
コンテンツは以下のカテゴリーに分類されます。
- メタデータ・コンテンツ(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
(itemprop
属性がある場合),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)(廃止)
2022年7月(?)
「セクショニング・コンテンツがドキュメントのアウトラインに影響を与える」という仕様が削除されたのにともないセクショニングルートは廃止されました。
こちらの要素もアウトラインを持ちますが、その内容は「外部の文書である」という扱いになります。
セクショニングルートに当てはまる要素
blockquote
,body
,details
,dialog
,fieldset
,figure
,td
参考
5. 見出しコンテンツ(Heading content)
このコンテンツに当てはまる要素
h1
,h2
,h3
,h4
,h5
,h6
,hgroup
(子孫のh1
からh6
要素を持つ場合)
参考
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
, MathMLmath
,object
,picture
, SVGsvg
,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. その他のコンテンツ
この他に、
- Palpable content(目に見えるコンテンツ)
- Script-supporting elements (
script
要素とtemplate
要素)
というコンテンツがある。
10. まとめ図
各コンテントと要素との関係がおおまかに分かるように図にまとめてみました。
※ 要素に対して条件付きで当てはまるコンテンツがある場合は、現実的にありそうな条件であれば当てはまるものとみなして書いています(あくまで参考です)。
参考
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の書き方
参考になるページ