超入門 HTML5

HTML5 の入門向けの解説をしているサイトです

HTML の簡単な手引き

基本的な HTML 文書は、次のようになります

<!DOCTYPE html>
<html lang="ja">
 <head>
  <title>サンプルページ</title>
 </head>
 <body>
  <h1>サンプル</h1>
  <p>サンプルのページです。</p>
 </body>
</html>

<!DOCTYPE html> は DOCTYPE 宣言になります。DOCTYPE 宣言は、<html> よりも上に記述する必要があり、これを記述することで、HTML5 のドキュメントであることを宣言します。

HTML 文書は、要素とテキストツリーで構成されます。各要素は、<body> のような開始タグ</body> のような終了タグで記述します。

タグは、重複することなく、その要素が互いの中に完全に入れ子になっている必要があります。

NG... <p>It's a <em>common <strong>mistake</em>!</strong></p>
OK... <p>This <em>is <strong>correct</strong>.</em></p>

要素は、動作を制御するための属性を持つことができます。次の例では、a 要素と href 属性を使用して形成される、ハイパーリンクです。

<a href="sample.html">demo</a>

属性は開始タグの内部に置かれ、“=” で区切られた名前と値で構成されます。属性値は 1 つの属性値しかない場合は、引用符を省略することができます。それ以外は、単一引用符(')または二重引用符(")のいずれかで囲む必要があります。

次の記述は、すべて正しい書き方です。

<input type="check" checked="checked">
<input type="check" checked="">
<input type="check" checked>

コンテンツの種類

HTML の各要素には、メタデータ、フロー、セクション、ヘッディング、フレージング、エンベッディッド、インタラクティブというコンテンツの種類が定義されています。

メタデータ・コンテンツ
見栄えなどを設定したり、ドキュメント情報や他のドキュメントとの関係性を定義する。
base, link, meta, noscript, script, style, title
フロー・コンテンツ
ドキュメントの body で使用される多くの要素は、フローコンテンツとして分類されます。
a, abbr, address, area*, article, aside, audio, b, bdi, bdo, blockquote, br, button, canvas, cite, code, data, datalist, del, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, i, iframe, img, input, ins, kbd, keygen, label, main, map, mark, math, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, sub, sup, svg, table, textarea, time, u, ul, var, video, wbr, テキスト
* map 要素が子孫の場合
セクショニング・コンテンツ
見出しとフッターの範囲を定義する。
article, aside, nav, section
ヘディング・コンテンツ
セクションの見出しを定義する。
h1, h2, h3, h4, h5, h6
フレージング・コンテンツ
ドキュメントのテキストおよび、段落内でのマークアップするための要素です。
a, abbr, area*, audio, b, bdi, bdo, br, button, canvas, cite, code, data, datalist, del, dfn, em, embed, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, meter, noscript, object, output, progress, q, ruby s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, var, video, wbr, テキスト
* map 要素が子孫の場合
エンベディッド・コンテンツ
ドキュメントに他のリソースを埋め込む。
audio, canvas, embed, iframe, img, math, object, svg, video
インタラクティブ・コンテンツ
ユーザーによる操作に対応するもの。
a, audio*, button, embed, iframe, img**, input***, keygen label object****, select textarea video*****
* controls属性が存在する場合
** usemap 属性が存在する場合
*** type 属性が hidden 状態でない場合
**** usemap 属性が存在する場合
***** controls 属性が存在する場合

コンテンツの種類は、上のコンテンツのいずれか 1 つに分類されるのではなく、複数のコンテンツの種類が定義されることもあります。 例えば、article 要素はフロー・コンテンツであり、セクショニング・コンテンツでもあります。また、条件付きで要素の種類が変化するコンテンツもあります。

コンテンツ・モデルのイメージ

グローバル属性

次の属性は、すべての HTML 要素に共通に指定することができます。

accesskey
要素にキーボードショートカットなどを割り当てる属性。
contenteditable
要素の内容を編集可能かどうかを指定する属性。
contextmenu
要素のコンテキストメニューを指定する属性。
dir
要素のテキストの方向を指定する属性。
draggable
要素がドラッグ可能かどうかを指定する属性。
dropzone
ドロップしたアイテムの受け入れ方法を指定する属性。
hidden
要素がないこと、またはページとは直接関係がないことを指定する属性。
lang
要素内の言語コードを指定する属性。
spellcheck
要素内のテキストのスペルチェックをするかしないかを指定する属性。
style
直接スタイルシートを記述して、要素にスタイルを適用するための属性。
tabindex
要素をフォーカスできるかどうかを指定する属性。
title
要素の補足的な情報を指定する属性。
translate
ページ翻訳時、要素の内容を翻訳するかどうかを指定する属性。
data-***
要素にカスタム(独自、オリジナル)・データを格納する属性。
class
要素にクラスを割り当てる属性。
id
要素に、固有の id を指定する属性。CSS のセレクタにもなる。

ドキュメントタイプ宣言

ドキュメントタイプを宣言する

要素

ルート

ドキュメントのルート要素を表わす

メタデータ

ドキュメントのメタデータの集まりを表わす。html 要素の最初の子要素として 1 つだけ使用することがでる。
ドキュメントのタイトルを表わす。記述できるのは、ドキュメントに 1 つだけ。
ドキュメントにおける全ての相対 URL の基準となる URL と、リンク先ドキュメントの開き方を指定するための要素。記述できるのは、ドキュメントに 1 つだけ。
title, base, link, style, script で表わせない、様々なメタデータを指定する。
ドキュメントにスタイル情報を埋め込むための要素。

セクション

実際に表示されるドキュメントの本体を表わす
article
ドキュメントの内容から独立したコンテンツまたは、記事であることを示す HTML5から追加
section
見出しとそれに関する内容の範囲を示す HTML5から追加
nav
ナビゲーションリンクを伴う範囲を表します HTML5から追加
aside
メインのコンテンツほど重要でないコンテンツを示す
h1, h2, h3, h4, h5, h6
見出しを示す
header
ヘッダであることを示す HTML5から追加
footer
フッタであることを示す HTML5から追加
address
連絡先・問合せ先を表す

グルーピングコンテンツ

p
段落を表わす
hr
“テーマ” や “話題” の区切りを表わす
pre
半角スペースや改行をそのまま表示します
blockquote
別のソースから引用されているコンテンツを表わす
ol
順序づけられた項目のリストを表わす
ul
順序が重要でない項目のリストを表わす
li
リスト項目を表わす
dl
“用語とその定義” や “質問と回答” などから成る記述リストを示す
dt
記述リスト (dl) 内の “用語” や “質問” などを表わす
dd
記述リスト (dl) 内の “定義” や “回答” などを表わす
figure
図表であることを示す HTML5から追加
figcaption
図表のキャプションを示す HTML5から追加
div
特別な意味を何も持たない要素。特定の範囲をグループ化する
main
ドキュメントの主要コンテンツであることを示す

テキストレベルセマンティック

a
ハイパーリンクを指定する
em
強勢する(アクセントを付ける)箇所を表わす
strong
強い重要性を表わす
small
免責・警告・著作権などの注釈や細目を表わす
s
すでに正確ではなくなった内容を表わす
cite
作品のタイトルを表わす
q
引用句・引用文であることを表わす
dfn
用語が使用されていることを表わす
abbr
略語や頭字語であることを表わす
data
必須である value 属性に、data 要素で括った内容を、機械可読な形式(アラビア数値)で指定する要素
time
日付や時刻を正確に示す HTML5から追加
code
プログラムなどのコードであることを示す
var
変数であることを示す
samp
プログラムによる出力結果のサンプルであることを示す
kbd
ユーザーが入力する内容であることを示す
sub
下付き文字を表わす
sup
上付き文字を表わす
i
声や心の中で思ったことなど、他と区別したいテキストを表わす
b
文書内のキーワードや製品名など、他と区別したいテキストを表わす
u
伝わりにくいテキストや、スペルミスのあるテキストであることを示す要素
mark
文書内の該当テキストを目立たせる
ruby
ルビをふる HTML5から追加
rt
ルビのテキストを指定する HTML5から追加
rp
ルビに対応していないブラウザだった場合、ルビを囲む記号を指定する HTML5から追加
bdi
双方向テキスト書式の範囲を示す要素
bdo
文字表記の方向を指定する
span
ひとつの範囲として定義する
br
改行する
wbr
改行しても良い位置を示す HTML5から追加

挿入と削除

ins
追加された部分であることを示す
del
削除された部分であることを示す

コンテンツの埋め込み

img
画像を表示する
inframe
インラインフレームを作る
embed
プラグインデータを埋め込む HTML5から追加
object
ドキュメントに外部リソースを埋め込む
param
プラグインのパラメータを指定する
video
動画を再生する HTML5から追加
audio
音声を再生する HTML5から追加
source
動画や音声などの URL や種類を指定する HTML5から追加
canvas
図形を描く HTML5から追加
map
イメージマップを作成する
area
イメージマップのハイパーリンク領域を設定する

テーブル

table
テーブル(表)を作成する
caption
テーブル(表)にキャプションをつける
colgroup
表の縦列をグループ化する
col
表の縦列の属性やスタイルを指定する
tbody
テーブル(表)のボディ部分を定義する
thead
テーブル(表)のヘッダ部分を定義する
tfoot
テーブル(表)のフッタ部分を定義する
tr
テーブル(表)の横一行を定義する
td
テーブル(表)のデータセルを作成する
th
テーブル(表)の見出しセルを作成する

フォーム

form
入力・送信フォームを作る
fieldset
フォームの入力項目をグループ化する
legend
フォームの入力項目グループにキャプションを付ける
label
フォーム部品と項目名(ラベル)を関連付ける
input
フォームを構成する様々な入力部品を作成する
button
ボタンを作成する
select
セレクトボックスを作成する
datalist
入力候補となるデータリストを定義する HTML5から追加
optgroup
選択肢をグループ化する
option
セレクトボックスや入力候補リストの選択肢を指定する
textarea
複数行のテキスト入力欄を作成する
keygen
フォーム送信時にキーを発行する HTML5から追加
output
計算結果を示す HTML5から追加
progress
タスク完了までの進行状況を示す HTML5から追加
meter
規定範囲内の測定値を表す HTML5から追加

スクリプト

ドキュメントに JavaScript などのスクリプトを組み込むための要素。
スクリプトが動作しない環境用の表示内容を指定する。

属性

ドキュメントの文字エンコーディングを表わす。
リンク先を指定する。
リンク先の言語コードを表わす
ドキュメントの言語コードを表わす
リンク先のメディアを表わす
現在のドキュメントからみた、リンク先となるリソースの位置づけを表わす
リンク先のドキュメントを、どのように開くかを指定する
リンク先の MIME タイプを指定する