HTML の基礎

HTML の各タグに関する情報を提供します。主に HTML5 の情報を扱います。

（HTML5の仕様書である HTML Standard を翻訳している部分も多くあります）

後半では、タグ毎に使い方などを書いていくつもりですが、まだ途中です。

1. HTMLの仕様となる文書

現在、WHATWG というコミュニティーと W3Cという組織がHTMLの仕様を公開していますが、WHATWG が公開している HTML Standard が主流のようです。

HTML Standard には バージョンがなく常に更新されていきます。最近のウェブブラウザもバージョンという考え方は薄れてきていて、バックグラウンドで自動的に更新されていきますが、これは HTMLの仕様と同じ更新方法であるといえます。

この更新方法に関しては、以下のページで詳しく説明されています。

• FAQ — WHATWG

2. コンテンツモデル と カテゴリー

HTML 要素（<p>, <div> など）は内容（コンテンツ）を持っています。
例として、p 要素で説明しますと、以下のように <p> と </p> で囲まれた部分がコンテンツです。

HTML5 では、コンテンツの性質をいくつかの種類にカテゴリ分けしています。１つの要素が複数のカテゴリに属していることもあります。

コンテンツは以下のカテゴリーに分類されます。

• メタデータ・コンテンツ（Metadata content）
• フロー・コンテンツ（Flow content）
• セクショニング・コンテンツ（Sectioning content）
• 見出しコンテンツ（Heading content）
• フレージング・コンテンツ（Phrasing content）
• 埋め込みコンテンツ（Embedded content）
• インタラクティブ・コンテンツ（Interactive content）

参考

• HTML Standard – 3.2.5 Content models

以下、各コンテンツについて説明します。

1. メタデータ・コンテンツ（Metadata content）

このコンテンツに当てはまる要素

• base, link, meta, noscript, script, style, template, title

参考

• HTML Standard – 3.2.5.2.1 Metadata content

2. フロー・コンテンツ（Flow content）

このコンテンツに当てはまる要素

• 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, mathml math, 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, svg svg, table, template, textarea, time, u, ul, var, video, wbr, 自立型カスタム要素, text

※ mathml と svg は名前空間です。
※ text は、「何もない」もしくは「Text ノード」を表します。

参考

• HTML Standard – 3.2.5.2.2 Flow content

3. セクショニング・コンテンツ（Sectioning content）

このコンテンツに当てはまる要素

• article, aside, nav, section

参考

• HTML Standard – 3.2.5.2.3 Sectioning content

4. セクショニングルート（sectioning roots）

セクショニングルートに当てはまる要素

• blockquote, body, details, dialog, fieldset, figure, td

参考

• HTML Standard – 4.3.11 Headings and sections

5. 見出しコンテンツ（Heading content）

このコンテンツに当てはまる要素

• h1, h2, h3, h4, h5, h6, hgroup

参考

• HTML Standard – 3.2.5.2.4 Heading content

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, mathml math, meta（ itemprop属性がある場合 ）, meter, noscript, object, output, picture, progress, q, ruby, s, samp, script, select, slot, small, span, strong, sub, sup, svg svg, template, textarea, time, u, var, video, wbr, 自立型カスタム要素, text

※ mathml と svg は名前空間です。
※ text は、「何もない」もしくは「Text ノード」を表します。

参考

• HTML Standard – 3.2.5.2.5 Phrasing content

7. 埋め込みコンテンツ（Embedded content）

このコンテンツに当てはまる要素

• audio, canvas, embed, iframe, img, mathml <math>, object, picture, svg <svg>, video

※ MathML と SVG は名前空間です。

参考

• HTML Standard – 3.2.5.2.6 Embedded content

8. インタラクティブ・コンテンツ（Interactive content）

このコンテンツに当てはまる要素

• a ( href 属性があった場合 ), audio ( controls 属性があった場合 ), button, details, embed, iframe, img ( usemap 属性があった場合 ), input ( type 属性が Hidden 状態でない場合), label, select, textarea, video ( controls 属性があった場合 )

参考

• HTML Standard – 3.2.5.2.7 Interactive content

9. まとめ図

各コンテントと要素との関係がおおまかに分かるように図にまとめてみました。

※ 要素に対して条件付きで当てはまるコンテンツがある場合は、現実的にありそうな条件であれば当てはまるものとみなして書いています（あくまで参考です）。

参考

• HTML Standard – 3 Semantics, structure, and APIs of HTML documents

3. HTML の要素

各要素についての説明です。

執筆中

以下の表を利用して説明します。

カテゴリー	その要素が属するカテゴリーです。
使用できる場所	その要素を置くことのできる場所です。
コンテンツ	その要素の中に配置することのできるコンテンツです。

1. ルート要素

参考

• HTML Standard – 4.1 The document element

html 要素

2. メタデータ（Document metadata）

参考

• HTML Standard – 4.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）

参考

• HTML Standard – 4.3 Sections

body 要素

article 要素

カテゴリー	フロー・コンテンツ, セクショニング・コンテンツ, パルパブル・コンテンツ
使用できる場所	フロー・コンテンツが期待される場所
コンテンツ	フロー・コンテンツ

section 要素

• h1 から h6 のどれかを含むことが推奨される。

参考

• HTML Standard – 4.3.3 The section element
• HTML/Usage/Headings/Missing – W3C Wiki

nav 要素

aside 要素

h1, h2, h3, h4, h5, h6 要素

header 要素

footer 要素

address 要素

4. グループ化 コンテンツ（Grouping content）

参考

• HTML Standard – 4.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）

参考

• HTML Standard – 4.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)

参考

• HTML Standard – 4.6 Links

a 要素

area 要素

7. 編集（Edits）

参考

• HTML Standard – 4.7 Edits

ins 要素

del 要素

8. 埋め込みコンテンツ（Embedded content）

参考

• HTML Standard – 4.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

Srcset 属性

• 画面の解像度に応じて、表示する画像を指定することができる。

例

<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, ...

decoding 属性

• その画像を同期で読み込むのか、非同期で読み込むのかを指定することができる。

iframe 要素

ドキュメント： 4.8.5 The iframe element

srcdoc 属性

• iframe 内に表示するコンテンツを記述する。

embed 要素

object 要素

param 要素

video 要素

audio 要素

track 要素

map 要素

area 要素

9. 表形式データ（Tabular data）

参考

• HTML Standard – 4.9 Tabular data

table 要素

caption 要素

colgroup 要素

col 要素

tbody 要素

thead 要素

tfoot 要素

tr 要素

td 要素

th 要素

10. フォーム（Forms）

参考

• HTML Standard – 4.10 Forms

form 要素

label 要素

input 要素

button 要素

select 要素

datalist 要素

optgroup 要素

option 要素

textarea 要素

keygen 要素

output 要素

progress 要素

meter 要素

fieldset 要素

legend 要素

11. インタラクティブ要素（Interactive elements）

参考

• HTML Standard – 4.11 Interactive elements

details 要素

summary 要素

dialog 要素

12. スクリプト（Scripting）

参考

• HTML Standard – 4.12 Scripting

script 要素

nonscript 要素

template 要素

canvas 要素

13. その他

mathml math 要素

svg svg 要素

4. HTMLの書き方

参考になるページ

• html-best-practices/README.ja.md at master · hail2u/html-best-practices · GitHub

5. 参照

• HTML Standard