基本 †
構文 †
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>タイトル</title>
<link rel="stylesheet" href="css/style.css" type="text/css"> /* スタイルシートを外部から読み込む */
<style type="text/css"> スタイルシートを直接記述 </style>
</head>
<body>
ページ内容
</body>
</html>
省略可能な要素 †
- HTML1.0では閉じスラッシュの省略はできない
- HTML5では閉じスラッシュの省略が可能。閉じスラッシュを入れても良い
グローバル属性 †
どの要素にも共通して指定可能な属性。
| 属性 | 指定する内容 |
| accesskey | キーボード、ショートカット |
| class | スタイルシートのクラス |
| contenteditable | 編集可能/不可能 |
| contextmenu | menu 要素のid値を指定してコンテキストメニューを表示 |
| dir | テキストの方向 |
| draggable | ドラッグの有効/無効 |
| hidden | 関係、無関係 |
| id | 固有のid |
| lang | 言語 |
| spellcheck | スペルチェックの有効性 |
| style | スタイルシート |
| tabindex | タブ、インデックス |
| title | タイトル |
| data | 独自データ |
実体参照 †
半角スペース
< <
> >
& &
" &quto;
カテゴリーの種類 †
| カテゴリー | 説明 |
| メタデータ・コンテンツ | HTMLのメタデータやスタイルに関する要素 |
| フロー・コンテンツ | body要素内に記述する要素 |
| セクショニング・コンテンツ | 文章のセクションを示す要素（article、aside、nav、section） |
| ヘッディング・コンテンツ | セクションの始まりの要素（h1 〜 h6） |
| フレージング・コンテンツ | テキストの要素 |
| エンベッディッド・コンテンツ | 外部ファイル（動画、画像など）を読み込む要素 |
| インタラクティブ・コンテンツ | ユーザが操作することで双方向にアクションが起こる要素 |
| パルパブル・コンテンツ | フロー・コンテンツまたはフレージング・コンテンツを含むことが可能な要素 |
メタデータ †
html †
HTML文書の全体を表す要素。
<html lang="ja"></html>
head †
HTMLの文書のタイトル、スタイルシートなどメタ情報を含める要素。
メタデータ要素では script/noscript以外は全て head 要素内に含める必要がある。
head 要素内には必ず title 要素を含める必要がある。
title †
HTML文書のタイトル。head 要素の中に必ず入れる必要がある
meta †
文字コードの指定などHTML文書に付随する様々なメタ情報。
<meta charset="UTF-8" name="keyword" content="検索キーワード">
| 属性 | 説明 |
| charset | 文字エンコーディング |
| name | メタデータのプロパティ名（keyword は検索してヒットさせるキーワードを指定、description は検索エンジンの検索結果画面に表示される） |
| http-equiv | プラグマ指示子（ブラウザに対してその文書の状態や挙動を指示する）を指定 |
| content | name、http-equivに対する値を指定 |
| http-equiv | 説明 |
| content-language | コンテンツの主言語を指定 |
| content-type | ファイルタイプ・文字エンコーディングを指定す（content="text/html; charset=UTF-8"） |
| default-style | デフォルトスタイルの指定。link要素で複数のCSSファイルを指定してる場合に、優先して利用するCSSファイルを指定 |
| refresh | リダイレクト・再読込を指定（content="秒数; URL=リダイレクト先のURL"） |
link †
外部リソース（HTML、CSS、RSS）を指定する時に使用。head 要素内に記述すること。
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="alternate" hreflang="en" href="english.html"/>
<link rel="alternate" media="print" href="print.pdf" />
| 属性 | 説明 |
| href | linkファイルのURLを指定（必須） |
| rel | linkファイルとHTMLの関係を指定（必須）（Appendix rel属性参照） |
| media | linkファイルの対象メディアを指定（Appendix media参照） |
| hreflang | linkファイルの言語を指定 |
| type | linkファイルのMIMEタイプを指定（省略可能で、デフォルトは text/css） |
| sizes | アイコンをリンクする場合にサイズを指定 |
base †
img 要素の src など、相対パスの基準URLを指定する。
<base href="http://vre.sakura.ne.jp/img/">
| 属性 | 説明 |
| href | 基準となるURLを指定 |
| target | 基準となるファイルのターゲット指定 |
style †
スタイルシートを記述する。scoped属性を指定しない場合は文書全体に影響する。head 要素内に埋め込むこと。
<style type="text/css">スタイルシートの内容を記述する</style>
| 属性 | 説明 |
| type | sytleのMIMEタイプを指定 |
| media | スタイルを適用するメディアを指定する（Appendix media参照） |
| scoped | <style scoped>〜</style>が記述されてた親要素と子要素に対してのみスタイルを適用 |
script †
JavaScriptを埋め込む場合に使用。head または bodyどちらの記述も可能。
async または defer を指定しない場合は、スクリプトファイルの読込が完了するまでページの描画を停止する。
<script type="text/javascript src="script.js" async></script>
| 属性 | 説明 |
| type | タイプを指定（デフォルトは text/javascript） |
| src | 読み込む外部ファイルのURLを指定 |
| async | ページを描画しつつ、スクリプトが読み込まれた時点で実行 |
| defer | ページの読み込みが完了した時点でスクリプトを実行（asyncと同時指定した場合は、asyncが優先される） |
| charset | 外部スクリプトファイルの文字エンコーディングを指定 |
noscript †
スクリプトが実行されない環境での代替を記述する。
<noscript>JavaScriptを利用していますのでONにして下さい</noscript>
セクション †
セクションとアウトラインの概念 †
セクション要素を入れ子にしてアウトラインを作成する。
各セクションは最初にある見出し（h1 〜 h6）が、そのセクションの見出しと見なされる。
h1 〜 h6 に対して暗黙的にセクションが区切られる。（sectionを指定しなくて暗黙的に付与されている）
<section>
<h1>1 見出し１</h1>
内容
<section>
<h2>1.1 見出し1</h2>
内容
</section>
</section>
セクショニングルート †
親のアウトラインから独立したアウトライン（階層構造）を持つことが可能な要素。
以下の要素がセクショニングルートに属する要素。
h1 〜 h6 †
見出しを示す。数値が小さい程、大きい見出しとなる。
見出しを配置すると暗黙的に新しいセクションを開始したことになる。
セクショニング・コンテンツの要素（article、aside、nav、section）内にある最初の<h>要素は、そのセクションの見出しを表す。
その後に低い見出しが続く場合は、暗黙的にサブセクションを開始したものと見なされる。
同ランク以上の見出しが続く場合は、暗黙的に新しいセクションを開始したものと見なされる。
body †
html 要素内で1度だけ使用でき、ドキュメントの内容を表す。
header †
イントロダクションやナビゲーショングループであることを示す際に使用。
見出し（h1 〜 h6）が含まれてることが想定されるが必須ではない。アウトラインは形成しない。
nav †
ナビゲーション（他のページ或いはページ内の部分にリンクするページのセクション）であることを示す。
利用規約ページ、著作権ページ、トップページへ戻るなどは nav 要素ではなく、footer 要素を使う。
<nav>
<h1>メニュー</h1>
<ul>
<li><a href="index.html">トップページ</a></li>
<li><a href="shop.html">店舗紹介</a></li>
</ul>
</nav>
section †
セクションは文脈に沿ってコンテンツをテーマ別にグループ化（書籍の目次のように全体の構造を示す）したもの。
section 要素の子として見だし（h1〜h6要素）を含めることで識別される。
一般的に section 要素は、要素の内容が文書のアウトラインを構成する必要がある場合に使用するのが適切。
article †
内容が独立した単独の記事として完結するセクションであることを示す。
article を入れ子にして使用する場合、内側の article の内容は、原則として外側の article の内容に関連している。
<body>
<article>
<header>
<h1>スタッフ紹介</h1>
<p><time datetime="2014/12/28">3 day a go</time></p>
</header>
<p>新しいコンテンツが増えました</p>
<footer>
<a href="?comments=1">コメントを見る</a>
<p>投稿：管理人</p>
</footer>
</article>
</body>
aside †
本文のメインコンテンツ以外の要素（補足情報など）であることを示す。
本文と関連してはいるけれど区別して掲載するべき内容のこと。
<p>本文</p>
<aside> <p>補足情報</p> </aside>
footer †
そのセクションに関する情報のことで、著作権や、関連文書へのリンクなどの情報が含まれる。
<footer>
<p>Copyright 2010</p>
</footer>
address †
そのセクション要素の住所や連絡先を表す。
連絡先情報以外の情報を含めてはいけない。
直近の親要素が article であった場合は、article で囲まれた記事に対する連絡先。
直近の親要素が bodyであった場合は、文書全体の連絡先。
<address><a href="/about/">株式会社 北コーン</a></address>
グルーピング †
main †
メインコンテンツであることを示す。
HTML文書の中で1回のみ使用し、要素の中に header、nav、footer は含まない。
div †
特別な意味を持たない要素で、主にコンテンツをスタイリングする目的で分離する際に使用。
<div style=" background-color:black; color:white;">
<p>黒背景、白文字</p>
</div>
段落を示す。<p>〜</p>の間が1つの段落になる。
ol / ul / li †
ol 順序立てられたリスト（インデントに番号を付与）を記述する場合に使用。
ul インデントに・が付与するリストを記述する場合に使用。
<ol reversed="reversed" start="3">
<li>3. </li>
<li>2. </li>
<li value="5">5. </li>
</ol>
| <ol>属性 | 説明 |
| start | リストの始まりの番号を指定。指定した番号から付与される |
| reversed | reversedを指定することで、リストの並びを降順に指定 |
| <li>属性 | 説明 |
| value | リスト番号を変更する（親要素が<ol>の場合のみ指定可能）
|
dl / dt / dd †
dl で名前（dt）と値（dd）を持つ記述リストを定義する。dd は dt に対して複数定義することが可能。
<dl>
<dt>商品説明</dt>
<dd>・安い</dd>
<dd>・早い</dd>
<dd>・旨い</dd>
<dt>発売時期</dt>
<dd>・2014/12/29</dd>
</dl>
hr †
段落レベルのテーマの区切り。コンテンツの内容が切り替わる時に使用。
pre †
改行などを含むテキストをもそのまま改行されて表示される。
<pre>
整形済みテキスト
改行もされる
</pre>
blockquote †
他のソースから文書などを引用したセクションであることを示す。
<blockquote cite="http://vre.sakura.ne.jp/">
瑠璃アプリからの〜
</blockquote>
figure †
本文から参照されるような説明文のついた図や表を示す。
<p>詳しい説明は<a href="#ruri">こちらの画像</a>を参照</p>
<figure id="ruri">
<img src="./ruri.gif">
<figcaption>瑠璃の全身図</figcaption>
</figure>
fogcaption †
figure要素で指定した図に対するキャプション（説明文）をつける場合に使用。
テキスト †
他サイトに移動するためのハイパーリンクを指定。
name属性が廃止され id属性で指定する方法に変更されている。
<a href="/">ホーム</a>
<a href="#link2">IDでリンク先へ</a>
<h2 id="link2">商品No2</h2>
| 属性 | 説明 |
| href | リンク先のURL |
| target | 開く場合のターゲット |
| rel | リンク先との関連性 |
| media | リンク先のメディアを指定 |
| hreflang | リンク先の言語を指定 |
| type | リンク先のMIMEタイプを指定 |
| target | 説明 |
| _self | 現在のウィンドウでリンク先を開く |
| _parent | 現在のウィンドウの親ウィンドウでリンク先を開く |
| _top | 現在のウィンドウの最上位階層のウィンドウでリンク先を開く（フレームを外して開く場合など） |
| _blank | 新しいタブやウィンドウでリンク先を開く |
| 名前 | 任意の名前を付けたウィンドウでリンク先を開く |
span †
フレージング・コンテンツを、ひとつの範囲として定義する際に使用。（フロー・コンテンツとしてまとめたい場合は<div>を使用）
単独では何も意味を持ってない為、style属性・class属性・lang属性・dir属性などグローバル属性と一緒に使用する。
<span style="background-color: #33CC33">背景が黄色</span>
<style> span.red { color: #ff0000; } </style>
<span class="red">この範囲はスタイルシートで指定したスタイルになる</span>
strong †
重要度が高いことを示す。入れ子にすることでより重要度が高いことを示す。
em †
コンテンツを部分的に強調する場合に使用する。入れ子の階層により強度の度合いが変わる。
small †
註釈や細目（著作権表記、ライセンス要件など）を示す。
time †
日付や24時間制での正確な日時を記載する場合に使用。
コンピュータが読み取ることが可能な形式で日時を記載する必要がある。
<time>2014-12-29</time>
<time datetime="2014-12-31">大晦日</time>
| 属性 | 説明 |
| datetime | <time>要素の中に日時以外の内容を記述することが可能だが、内容がdatetimeで指定した日時と一致する必要がある |
cite †
文書内に引用して使用した作品のタイトル（本、新聞、歌、台本、ゲームなど）を示す為に使用。
タイトルのみを意味するので作者名などは使用できない。
短い文章を引用する際に使用する。cite属性は引用元のURLを指定。長めの文書を引用したい場合は、blockquoteを使用すること。
<q cite="http://vre.sakura.ne.jp/">引用部分</q>
dfn †
定義された用語を示す。
dfn要素の親となる段落かセクション、または記述リストの同じグループ内に、その用語に対する定義を含めること。
<dl>
<dt><dfn title="HyperText Markup Language">HTML</dfn><dt>
<dd>Webページを制作するためのマークアップ言語</dd>
</dl>
| 属性 | 説明 |
| title | <dfn>要素内の文字ではなく、ここで指定した文字を定義用語にする |
abbr †
略語、または頭文字を示す。
<dfn><addr title="HyperText Markup Language">HTML</addr>5</dfn>
code / var / samp †
| 要素 | 説明 |
| code | プログラムのコードを示す |
| var | 数式やプログラムで、変数や定数を表す識別子を示す |
| samp | プログラムなどの出力サンプルを示す |
kbd †
ユーザーが入力する部分（キーボードや音声入力）を指定する場合に使用。
<kbd> <kbd>CTRL</kbd> ＋ <kbd>C</kbd> </kbd>
sub / sup †
| 要素 | 説明 | 指定例 |
| sub | 下付き文字を示す | 水の化学式はH<sub>2</sub>O |
| sup | 上付き文字を示す | 3<sup>3</sup>=27 |
i / b / u / s / mark †
| 要素 | 説明 |
| i | 音声や心の声など、他の内容と異なっている場合に使用 |
| b | 他と区別したいテキストを示す場合に使用。重要性を伝える意味はない |
| u | ラベル付けを行う。明確に伝わらなかったり、本来とは異なる表記になるテキストに使用
<p>宛名が<u>川角</u>なっているが、私は<em>川澄</em></p> |
| s | テキストが正確でないことを示す。テキストの内容を修正する場合は del を使用する |
| mark | ハイライトすることで重要な部分に注意が向くことにする為に使用
例えば検索した単語をハイライト表示するなど、文書として強調するのではなく見た目で注意を惹きやすくするような意味になる |
ruby / rt / rp / rtc †
ルビをふる。rubyを親要素とし、rt子要素で読み仮名を記述する。
rp は rt の前後に指定することで、振り仮名サポートしてないブラウザでもルビをで表示する。
rtc は 複数のルビを振る場合に、<rt>要素を区別する為に指定する。
<ruby>川澄<rt>かわすみ</rt>舞<rt>まい<rt></ruby>
<ruby>亜米利加<rp>（</rp><rt>アメリカ</rt><rp>）</rp></ruby>
<ruby>亜米利加
<rtc><rt>アメリカ</rt></rtc>
<rtc><rt>America</rt></rtc>
</ruby>
bdi †
テキストの一部を異なる文字の方向に指定する場合に使用。この要素内では周囲の書字方向の影響を受けない。
英文（左から右）の中にアラビア語（右から左）を入れる場合などに使用。
bdo †
文字の表示方向を指定。
<bdo dir="rtl">右から左に表示</bdo>
| 属性 | 説明 |
| dir | 表示方向を指定（ltr：左から右、rtl：右から左） |
wbr †
コンテンツの表示領域が小さくなった時に折り返す位置を明示的に指定。
wbr を入れておくことで、必要に応じて、その箇所で折り返されるようになる。
ins †
文書や画像を後から挿入、追加する場合に使用。
<ins datetime="2014-12-29T13:08:30">
<p>追加した情報</p>
</ins>
| 属性 | 説明 |
| cite | 訂正理由の参照先 |
| datetime | 訂正した日時 |
| title | 補足情報 |
del †
文書を削除、訂正する場合に使用。
<del datatime="2014-12-30T01:10:30>火曜日開催</del>
埋め込みコンテンツ †
img †
画像をHTMLファイルに埋め込む。
<img src="image.png" width="100" height="100" alt="イメージ画像">
| 属性 | 説明 |
| alt | 代替テキストを指定 |
| src | イメージファイルのURL（必須） |
| usemap | クライアントサイドイメージマップを利用。詳細は map と area |
| ismap | 埋め込み画像のサーバサイドイメージマップを指定 |
| width | 画像の横幅指定 |
| height | 画像の縦幅指定 |
map / area †
map で img 要素を指定（usermapで定義された名前）し、area 要素でリンク領域を定義する。
<img src="map.png" usemap="#example">
<map name="example">
<area shape="rect" coords="50,50,150,150" href="map1.html" alt="四角">
<area shape="circle" coords="250,100,50" href="map2.html" alt="丸">
<area shape="poly" coords="400,50,450,150,350,150" href="map3.html" alt="三角">
<area shape="default" href="map4.html" alt="その他の領域">
</map>
| map | 説明 |
| name | イメージマップの名前（ img 要素の usemapで定義された名前 ） |
| area | 説明 |
| shape | リンク領域の形状 |
| coords | 座標（x,y）shapeの内容によって指定が異なる |
| href | リンク先の指定 |
| alt | 代替テキスト |
| hreflang | リンク先の記述言語 |
| type | リンク先のMIMEタイプ |
| rel | 現在の文書からみたリンク先の関係 |
| media | 対象とするメディア |
| target | リンク先の表示方法 |
| shape | 説明 |
| rect | 四角形（左上と右下の座標 x,y,x,y） |
| circle | 円形 （中心点の座標と半径 x,y,半径） |
| poly | 多角形（x,y,x,y...） |
| default | 画像全体（指定しない） |
iframe †
インラインフレームでコンテンツを表示する場合に使用。
<iframe src="http://vre.sakura.ne.jp/" width="1024" height="764" sandbox></iframe>
<iframe srcdoc="<p>フレームの内容を直接ここに記述</p>" seamless></iframe>
| 属性 | 説明 |
| src | フレーム内に表示する文書のURL |
| srcdoc | フレームで表示する内容を直接記述する |
| sandbox | フレームの表示を制御。引数を指定することで制限を弛めることが可能 |
| width | フレームの幅 |
| height | フレームの高さ |
| name | フレームの名前 |
| seamless | インラインフレームのコンテンツを親コンテンツの一部のように表示する |
| sandbox | 説明 |
| allow-same-origin | 親文書と同じドメインを持つものとする |
| allow-top-navigation | 最上位のウィンドウの操作を許可する |
| allow-forms | フォームの送信を許可する |
| allow-scripts | スクリプトの実行を許可する |
embed †
FLASHなどの外部のプラグインなどを利用するファイルを表示する時に使用。
<embed src="flash.swf" type="application/x-shockwave-flash" width="400" height="240">
| 属性 | 説明 |
| src | コンテンツのURLを指定 |
| type | MIMEタイプを指定 |
video †
動画やオーディオファイルを読み込み再生する時に使用。
この要素に対応しているブラウザでは、プラグインを使わずに動画を再生することが可能。
<video src="video.mp4" preload="metadata" width="400" height="240"></video>
| 属性 | 説明 |
| src | 動画のURLを指定 |
| poster | 静止画のURLを指定 |
| preload | 先読みの目安を指定 |
| mediagroup | グループ名を指定 |
| autoplay | 自動再生を行う |
| loop | ループ再生を行う |
| muted | 音声を出さない |
| controls | コントローラを表示する |
| preload | 説明 |
| none | 先読みなし |
| metadata | メタデータは先読み |
| auto | 動画全体を先読み |
object †
様々な形式のコンテンツ（画像、音声、動画、HTML文書、Javaアプレット）をHTMLファイルに埋め込む。
<object data="example.jpg" type="image/jpeg" width="300" height="150"></object>
| 属性 | 説明 |
| data | オブジェクトの指定（必須） |
| type | オブジェクトのMIMEタイプを指定（必須） |
| name | オブジェクトの名前を定義 |
| usemap | クライアントサイドイメージマップを利用。詳細は mapと area |
| form | フォームとの関連付けられてる場合はidを指定 |
param †
objectの子要素として使用。object によって呼び出されたプラグインのパラメータ初期値を定義する。
<object data="sample.mp3" type="audio/mp3">
<param name="src" value="sample.mp3">
<param name="bgcolor" value="#ffffff">
<a href="bgm1.mp3">音楽再生</a>
</object>
| 属性 | 説明 |
| name | パラメータ名（任意）を指定 |
| value | パラメータの値を指定 |
audio †
音や音楽ファイルの再生に使用する。この要素に対応してるブラウザはプラグインを使用せず再生可能。
<audio src="bgm0.mp3" autoplay loop></audio>
| 属性 | 説明 |
| src | 音声ファイルのURLを指定 |
| preload | 先読みの目安を指定（none、metadata、auto） |
| mediagroup | グループ名を指定 |
| autoplay | 自動再生を行う |
| loop | ループ再生を行う |
| muted | 音声を出さない |
| controls | コントローラを表示する |
source †
audio や video 内に source 子要素で複数の再生候補を指定することでブラウザが対応してる形式を自動で選択する。
<audio preload="metadata" controls>
<source src="bgm1.mp3" type="audio/mp3">
<source src="bgm1.ogg" type="audio/ogg">
</audio>
track †
動画や音声ファイルに字幕やキャプションなどのテキストを指定。
<video>
<source src="video.mp4">
<track src="video_ja.vtt" kind="subtitles" srclang="ja" label="日本語字幕" default>
</video>
| 属性 | 説明 |
| src | テキストトラックの指定（VTTフォーマットを指定）（必須） |
| kind | トラックの種類を指定 |
| srclang | テキストトラックの記述言語を指定 |
| label | トラックのタイトルを指定 |
| default | トラックを有効にする |
| kind | 説明 |
| subtitles | 翻訳の字幕（初期値） |
| captions | 難聴用の字幕 |
| descriptions | 音声合成用のテキスト |
| chapters | 頭出し用のタイトル |
| metadata | スクリプト用のデータ |
canvas †
HTML上にグラフィックを描く為の領域を作る。
グラフィックスは別途<script>で作成する。対応してないブラウザは要素の内容を表示する。
<canvas id="canvas">非対応</canvas>
<script>
// 黒く塗り潰された正方形を描画
var canvas = document.getElementById('canvas');
if (canvas && canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillRect(50,50,50,50);
}
</script>
svg †
SVGで描画を指定する。ベクターグラフィックスなので拡大縮小しても画像の劣化がない。
<svg>
<rect x="5" y="5" width="100" height="80" ry="10" fill="#ffff00" stroke="#ff0000" />
<circle cx="100" cy="80" r="40" fill="#ffff00" stroke="#ff0000" />
<ellipse cx="100" cy="80" rx="90" ry="40" fill="#ffff00" stroke="#ff0000" />
<polyline points="0,0 100,150 250,30 0,0" fill="none" stroke="#ff0000" />
<polygon points="0,0 80,110 200,130 180,80 0,0" fill="#ffff00" stroke="#ff0000" />
</svg>
| 属性 | 説明 |
| fill | 枠内の色 |
| stroke | 枠線の色 |
| 要素 | 説明 |
| <rect> | 四角形／角丸四角形（x y width height ry：角の丸み） |
| <circle> | 正円（cx cy r：半径） |
| <ellipse > | 楕円（cx cy rx：縦の半径 ry：横の半径） |
| <line> | 直線（x1 y1 x2 y2） |
| <polyline> | 連続直線（points） |
| <polygon> | 多角形（points） |
テーブル †
table / th / tr / td †
table を親要素に tr で「行」を作り、th（太字になる）または td で「セル（列）」を作る。それ以外の要素は省略可能。
<table border="1">
<caption>表のタイトル</caption>
<colgroup span="2" width="60"> <!-- 1 - 2列目の横幅は60 -->
<colgroup span="1" width="100"> <!-- 3列目の横幅は100 -->
<colgroup span="1" class="sample"> <!-- 4列目はスタイルシートを適用 -->
<thead>
<tr><th id="name">名前</th><th>年齢</th><th>好物</th><th>備考</th></tr>
</thead>
<tbody>
<tr><td headers="name">川澄</td><td>18</td><td>牛丼</td><td>Kanon</td></tr>
<tr><td headers="name">雪 </td><td>20</td><td>不明</td><td>水月 </td></tr>
<tbody>
</table>
| table属性 | 説明 |
| border | 表がレイアウト目的で無いことを明示する場合は、空または1を指定する |
| th/td属性 | 説明 |
| colspan | セルの結合（水平方向） |
| rowspan | セルの結合（垂直方向）0で全ての列を結合（グループ化されてる場合はグループ化されてる列まで） |
| headers | どの見出しに対するデータなのか明確にする。<th>で定義したIDを指定（複数指定する場合はスペースで区切る） |
| scope | 見出しの対象範囲 |
| scope | 説明 |
| auto | 自動、文脈に基づいて判断（初期値） |
| row | 行方向のセルを対象にする |
| col | 列方向のセルを対象にする |
| rowgroup | 行グループ内の全セルを対象にする |
| colgroup | 列グループ内の全セルを対象にする |
caption †
表のタイトルを記述。テーブルの上部に表示される。
colgroup / col †
表の列をグループ化する。グループ化した列は同じ属性やスタイルを適用することが可能。
colの動作はcolgroupと同じだがグループ化の意味を持たない。
<colgroup span="2" width="100" >
<colgroup>
<col span="2" width="100">
<col span="1" width="60">
</colgroup>
| 属性 | 説明 |
| span | グループ化する列数（<col>子要素を持たない場合のみ指定可能） |
thead / tbody / tfoot †
| 要素 | 説明 | <table>要素内の指定 |
| thead | 表のヘッダであることを示す | １つのみ |
| tbody | 表の本体であることを示す | 複数指定可能 |
| tfoot | 表のフッタであることを示す | 1つのみ |
フォーム †
from †
<form method="post" action="from.cgi">
<p>お名前：<input type="text" name="name"></p>
<p><input type="submit" value="送信する"></p>
</form>
| 属性 | 説明 |
| action | 送信先の指定 |
| method | HTTPメソッドの指定（get post） |
| enctype | 送信時のデータ形式 |
| accept-charset | 送信時の文字エンコーディング |
| name | フォームの名前を指定 |
| target | 送信結果の表示方法を指定 |
| autocomplete | オートコンプリートの有効有無（on off） |
| novalidate | 妥当性をチェックしない |
| enctype | 説明 |
| application/x-www-form-urlencoded | URLエンコード（初期値） |
| multipart/form-data | マルチパート |
| text/plain | プレーンテキスト |
fieldset / legend †
fieldsetは 複数の入力フォームをグループ化する。黒枠で囲まれる。
legend は fieldset 要素内の最初に記述し、グループ化された入力フォームのキャプション（グループの左上に表示）を指定する。
<fieldset form="group1">
<legend>個人情報</legend>
<p>お名前：<input type="text" name="name" size="30" form="group1"></p>
<p>ご住所：<input type="text" name="address" size="50" form="group1"></p>
</fieldset>
<form method="post" action="from.cgi" id="group1">
<p><input type="submit" value="送信する"></p>
</form>
| 属性 | 説明 |
| form | fieldset をどの form 要素に関連付けるかを指定（formのid）する（フォーム部品を form 要素外に配置する場合に使用） |
| name | 部品グループの名前を指定（スクリプトから参照する際に使用） |
| disabled | グループ内の部品を無効にする |
label †
入力フォームに項目名などのラベルをつける。
ラベル部分のクリックでその部品を選択できるようになる。
<label>名前：<input type="text"></label>
<label for="tellabel">電話：</label>
<input type="text" id="tellabel">
input †
フォーム部品（入力欄・選択肢・ボタン）を作成する。
| 属性 | 説明 |
| accept | type="file"の場合にサーバ側で受け取れるファイルの種類を指定 |
| alt | 画像の代替テキストを指定 |
| autocomplete | オートコンプリートを有効にする |
| autofocus | オートフォーカスを有効にする |
| checked | ラジオボタンとチェックボックスの初期状態でのチェック有無を指定 |
| dirname | フォームのinput要素の書字方向を示すクエリ名を指定 |
| disabled | input要素を無効にする |
| form | どの form 要素に関連付けるか指定する（フォーム部品を form 要素外に配置する場合に使用） |
| formaction | 送信先のURLを指定 |
| formenctype | 送信するデータ形式を指定 |
| formmethod | 送信方法を指定（get post） |
| formnovalidate | 入力されたデータの確認を無効にする |
| formtarget | ターゲット先を指定 |
| name | フォーム部品を識別するための名前を指定（ここで指定した名前と入力値がセットで送信される） |
| value | ボタン名や、テキストならテキストエリアに表示される文字列を指定（nameとvalueがセットで送信される） |
| type | フォーム部品の種類を指定 |
| height | 高さを指定 |
| width | 幅を指定 |
| list | リスト要素を id 属性で指定 |
| max | 入力できる数値の最大値を指定 |
| min | 入力できる数値の最小値を指定 |
| maxlength | 入力できる最大文字数を指定 |
| minlength | 入力できる最小文字数を指定 |
| multiple | 複数の値の入力、選択を可能に設定 |
| pattern | 入力値のパターンを指定 |
| placeholder | 入力内容に初期表示するテキストを指定 |
| readonly | 読み取り専用に指定 |
| required | 入力必死に指定 |
| size | 表示文字数を指定 |
| src | 画像ファイルのURLを指定 |
| step | 入力欄のステップ数を指定 |
typeの指定
| 分類 | type | 説明 |
| テキスト | text | 1行のテキスト入力欄 |
| password | パスワード入力欄 |
| tel | 電話番号の入力欄 |
| url | URLの入力欄 |
| email | メールアドレスの入力欄 |
| search | 検索テキストの入力欄 |
| 時間 | datetime | UTC（協定世界時）による日時の入力欄 |
| datetime-local | ローカル日時の入力欄 |
| date | 日付の入力欄 |
| month | 年月の入力欄 |
| week | 週の入力欄 |
| time | 時間の入力欄 |
| 数・色 | number | 数値の入力欄 |
| range | 大まかな数値の入力欄 |
| color | 色の入力欄 |
| 選択 | radio | ラジオボタン |
| checkbox | チェックボックス |
| 他 | file | ファイルの送信欄 |
| hidden | 隠しデータ |
| ボタン | submit | 送信ボタン |
| image | 画像形式の送信ボタン |
| reset | リセットボタン |
| button | 汎用的なボタン |
button †
フォームの送信ボタンなどを作成する。
＜input type="button"＞ と異なり要素内でボタン名を指定できる。
<button type="submit" name="btn-name" value="btn-value">送信</button>
| 属性 | 説明 |
| name | フォーム部品を識別するための名前を指定 |
| value | 送信される値を指定 |
| type | ボタンの種類（submit reset button） |
| autoforcus | オートフォーカスを指定 |
| formaction | 送信先の指定（form要素のaction属性上書き） |
| formmethod | HTTPメソッド（form要素のmethod属性上書き） |
| formenctype | 送信時データ形式（form要素のenctype属性上書き） |
| formtarget | 送信結果表示方法（form要素のtarget属性上書き） |
| formnovalidate | 妥当性をチェックしない（form要素のnovalidate属性の代わりに使用） |
select †
選択ボックスを作成する。
<select name="select1" multiple size=3>
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3" selected>選択肢3</option>
</select>
| 属性 | 説明 |
| name | フォーム部品を識別するための名前を指定（option要素のvalueとセットで送信される） |
| size | 表示する選択肢の数を指定（デフォルトは1。multipleが指定されてる場合は4） |
| autoforcus | オートフォーカスを指定 |
| disabled | 操作を無効にする |
| multiple | 複数選択を可能にする |
| required | 必須入力 |
option / optgroup †
select の子要素として、選択項目を記述する。
optgrpup は option をグループ化する。
<select name="select1" multiple size=3>
<optgroup label="グループ1">
<option value="選択肢1">選択肢1</option>
<option value="選択肢2">選択肢2</option>
<option value="選択肢3">選択肢3</option>
</optgroup>
</select>
| option属性 | 説明 |
| label | 項目の表示名 |
| value | 送信する値（省略時は要素の内容が送信される） |
| selected | 最初から選択された状態にする |
| disabled | 選択できないようにする |
| optgroup属性 | 説明 |
| label | グループの表示名 |
| disabled | 操作を無効にする |
textarea †
複数行のテキスト入力エリアを指定。
<textarea name="textarea" cols="50" rows="10">最初から表示される文字</textarea>
| 属性 | 説明 |
| name | フォーム部品を識別するための名前を指定 |
| cols | 1行当たりの最大文字数 |
| rows | テキストエリアの表示行数 |
| maxlength | 入力可能な最大文字数を指定 |
| readonly | ユーザーテキストの編集を無効化し読み取り専用にする |
| disabled | 操作を無効にする |
| wrap | 入力テキストの改行ルール（soft：改行反映せず送信 hard：改行反映して送信） |
| autofocus | 自動フォーカスの指定 |
| placeholder | 入力ヒントの文字列を指定（薄い色で指定した文字列を表示し入力すると消える） |
| dirname | 入力内容の書字方向（ltr または rtl）とセットで送信（指定した文字={ltr or rtl}） |
| required | 入力必須 |
keygen †
鍵のペア（公開鍵と秘密鍵）の作成を行う。選択できる鍵の長さはブラウザによって異なる。
フォームが送信されると秘密鍵はローカル保存、公開鍵はパッケージされてサーバに送信される。
<keygen name="key">
| 属性 | 説明 |
| name | フォーム部品を識別するための名前を指定 |
| keytype | 暗号化方式（現状rsaしか指定できない） |
| challenge | 公開鍵と一緒に送信する任意の文字列を指定 |
| disabled | フォーム部品を無効化する |
output †
計算の結果を表す場合に使用。（対応してるブラウザなら数値を入れた時点で自動的に結果を表示する）
<form onsubmit="return false" oninput="answer.value = a.valueAsNumber + b.valueAsNumber>
<input type="number" name="a"> + <input type="number" name="b">
= <output name="answer" for="a b"></output>
</form>
| 属性 | 説明 |
| name | 出力欄を識別する為の名前を指定 |
| for | 計算対象のフォームを明示したい場合に使用（指定しなくても計算結果は出力される） |
progress †
タスクが完了するまでの進捗状況を表示させる。
スクリプトと組み合わせてリアルタイムに進捗状況を表示させることが可能。
<progress value="30" max="100">進捗度：30%</progress>
| 属性 | 説明 |
| max | 全体の量（初期値は1） |
| value | 全体量に対する進捗度 |
meter †
特定の範囲内における数量や割合を示す。バーの色が最適値の領域は緑色、それ以外は黄色になる。
<meter value="50" min="0" max="100" low="30" height="60" optimum="80"></meter>
<!-- 0〜30:低い値 30 〜 60:中間値 60 〜 100:高い値（最適値が80なので、ここが最適な値になる）-->
| 属性 | 説明 |
| value | 計測結果の値（必須） |
| min | 最小値 |
| max | 最大値 |
| low | 最も低い値の上限値を指定 |
| high | 最も高い値の下限値を指定 |
| optimum | 最適となる値を指定（省略時はlowとheightの中間）この値を含む領域が最適値になる |
datalist †
入力フォームの為の入力候補を定義する。
<p><input type="text" name="day1" list="daylist"></p>
<p><input type="text" name="day2" list="daylist"></p>
<datalist id="daylist">
<option value="12/30"></option>
<option value="12/31"></option>
</datalist>
| 属性 | 説明 |
| id | input で定義されたlist属性の値を指定 |
インタラクティブ †
ユーザの操作によって表示、非表示のコントロールが可能な要素。
details / summary †
ユーザ操作によって表示/非表示可能なコントローラ（アウトライン表示）を表示する。
summary 子要素がある場合は、summary の内容を表示する。ない場合はブラウザデフォルトの文字列になる。
<details open>
<summary>詳細</summary>展開される内容をここに記述
</details>
| details属性 | 説明 |
| open | 詳細情報を最初から展開しておく |
menu †
操作メニューのコマンドリストを作成する（HTML5の仕様通りに表示する対応ブラウザはないっぽい）
<p contextmenu="con">ここで右クリックするとコマンドが表示される</p>
<menu type="context" id="con">
<li>コマンド1</li>
<li>コマンド2</li>
</menu>
| 属性 | 説明 |
| type | メニューの種類を指定（context:右クリックで表示されるメニュー、toolbaar） |
| label | ラベル名を指定。入れ子にされた<menu>要素に指定することでサブメニューとして機能する |
dialog †
dialog 要素は閲覧者が操作することが可能なダイアログを表示。
<dialog open>
<p>ダイアログを表示</p>
</dialog>
| 属性 | 説明 |
| open | dialog要素がブラウザ上で表示され操作可能になる |
HTML5で廃止された要素と属性 †
廃止された要素 †
| 要素 | 説明 | 代替手段 |
| acronym | 略称 | addr |
| applet | Javaアプレットの埋め込み | object |
| bgsound | BGMの再生 | sound |
| basefont | 基準となるフォントサイズ | CSS |
| big | 大きめの文字 | CSS |
| blink | 文字の点滅 | CSS |
| center | センタリング | CSS |
| font | フォントのサイズ・色・種類 | CSS |
| tt | 等幅フォント | CSS font-family:monospace; |
| strike | 取り消し線 | del |
| isindex | 1行のテキスト入力欄 | form |
| dir | ディレクトリ型のリスト | ul |
| frame | フレーム内の設定 | iframe |
| rb | ルビベース | ruby / rt |
| frameset | ウィンドウの分割 | 廃止 |
| noframes | フレームの代替コンテンツ | 廃止 |
| nobr | 改行させない | 廃止 |
| noembed | embed要素の代替コンテンツ | 廃止 |
| marquee | 文字のスクロール | 廃止 |
廃止された属性 †
| グループ | 要素 | 属性 |
| メタデータ | html | version |
| head | profile |
| meta | scheme |
| link | rev charset target |
| セクション | h1-h6 | align |
| body | background bgcolor text link vlink alink |
| グルーピング | div | align |
| p | align |
| ol | compact |
| li | type |
| dl | compact |
| hr | size width align noshade |
| pre | width |
| テキスト | a | charset rev shape coords |
| br | clear |
| ul | type compact |
| 埋め込みコンテンツ | img | longdesc name align hspace vspace |
| area | nohref |
| iframe | longdesc scrolling frameborder marginwidth marginheight align |
| object | classid codetype archive codebase standby declare align border hspace vspace |
| param | valuetype type |
| テーブル | table | width frame rules cellspacing cellpadding align bgcolor |
| td | align valign char charoff abbr scope axis width height bgcolor nowrap |
| th | align valign char charoff abbr axis width height bgcolor nowrap |
| tr | align valign char charoff bgcolor |
| caption | align |
| colgroup | width align valign char charoff |
| col | width align valign char charoff |
| tfoot | align valign char charoff |
| tbody | align valign char charoff |
| thead | align valign char charoff |
| フォーム | form | accept |
| legend | align |
| input | align usemap ismap |
| インタラクティブ | menu | compact |
意味が変更されたもの †
主に見た目を整える為に使用されていた要素はHTML5では意味を持つように変更されている。
| 要素 | 元の意味 | 変更された意味 |
| strong | 強い強調 | 強い重要性 |
| em | 強調 | 強調（アクセント） |
| i | イタリック | 音声や心の中で思ったこと |
| b | 太字 | 他と区別するテキスト |
| small | 小さい文字 | 註釈や細目 |
| u | アンダーライン | 伝わりにくいテキスト |
メタデータとセマンティックWEB †
HTMLに埋め込まれたテキストに意味を表現する情報を「メタデータ」と呼ぶ。
「メタデータ」を埋め込むことでプログラムが、そのテキストの意味を理解できるようになり、
自動的に情報収集し分析できるプラットフォームへ変化していく構想を「セマンティックWEB」と呼ぶ。
MicroData †
HTMLにメタデータを埋め込む技術。任意のHTML要素に以下の様な属性を定義する。
<p itemscope itemtype="http://schema.org/Person">
私の名前は<span itemprop="name">川澄舞</span>です。
</p>
| 属性 | 説明 |
| itemscope | アイテムを定義する範囲を示す |
| itemtype | アイテムのデータ型を示す |
| itemprop | アイテムのプロパティを示す |
| itemid | アイテムのグルーバルIDを示す |
| itemref | アイテムのIDを参照する |
RDFa / RDFa Lite †
MicroDataと同様にHTML/XHTMLに属性を付与することでメタデータを指定できる仕様。
- RDF（Resource Description Framework）
XMLを用いてメタデータを記述する為の包括的な枠組み
- RDFa（Resource Description Framework in attributes）
RDFをXHTML属性として埋め込めるようにしたもの
- RDFa Lite
RDFaの機能を絞り込み、より簡単に扱えるようにしたもの
RDFa / RDFa Lite で表される情報はアイテムと呼ばれ、アイテムが持つ属性をプロパティと呼ぶ。
アイテムを定義するには任意のHTML要素に対して以下の属性を付与する。
| 属性 | 説明 |
| vocab | メタデータの語彙（ボキャブラリ）を表す特定の識別子 |
| typeof | アイテムのデータ型 |
| property | アイテムのプロパティ |
| resource | Webページ内でアイテムに任意のidを付与することができる
#id と指定した場合、このWebページのURLが、http://ex.org/people であった場合、http://ex.org/people#id というURLでこのアイテムを参照できる |
| prefix | 1つのアイテム内で、vocab属性で指定したもの以外のボキャブラリーを使用したい場合に、そのボキャブラリーにプレフィックスを指定することができる |
<p vocab="http://schema.org/" typeof="Person" prefix="ov: http://open.vocab.org/terms/" resource="#shumpei">
私の名前は<span property="name">川澄舞</span>です。
電話番号は<span property="telephone">080-1234-5678</span>です。
好きな動物は<span property="ov:preferredAnimal">熊</span>です。
</p>
schema.org †
Google、MicroSoft、Yahooなどの検索エンジンベンダーが合同で策定したボキャブラリ。
それ以外には、data-vocabulary.org がある。schema.org でデータ型が存在しない場合に利用する。
schema.org の大分類として定義されてるプロパティ
| プロパティ | 定義内容 |
| Person | 人物 |
| Place | 場所 |
| Product | 製品 |
| CreativeWork | 捜索活動 |
| Event | イベント |
| Intangible | 無形 |
| Organization | 組織 |
カスタムデータ属性 †
カスタムデータ属性 †
「data-」という接頭辞を持つ属性に要素に追加することで、独自の設定項目を属性と指定することが可能。
data URI †
データの内容をそのままHTMLに埋め込むことが可能。
外部リソースへのアクセスがなくなり、1つのファイルアクセスのみで済むというメリットがある。
データ量が増加（一般的に3倍になる）、ブラウザのキャッシュが利用できないというデメリットがある。
【書式】data:[MIME][;charset=<文字セット>][;base64],<base64でエンコードされた文字列>
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAcwAAA〜">
Windowsでは以下でBase64に変換できる。
certutil -f -encode 入力 出力
アプリケーションキャッシュ †
マニフェストファイルの書式に従って全てのリソースをキャッシュし終えると以降、そのWebアプリケーションはオフラインで利用が可能になる。
キャッシュの更新は、マニフェストファイルが更新されたタイミングで行われる。
1. マニフェストファイルを作成
-- manifest.appcache
CACHE MANIFEST
index.html
index.css
2. MIMEタイプの設定
AddType text/cache-manifest .appcache
3. HTMLソースに manifest属性を追加
<html manifest="manifest.appcache">
4. マニフェストファイルの作成
- MIMEタイプは、text/cache-manifest
- エントリは行で区切られる。\r\n、\r、\n何れの改行でも良い
- 相対URLを用いる場合は、マニフェストファイルのURLを基準にする
- 全てのURLはメインページと同じオリジン（配信元）でなくてはならない
- セクション（CACHE、FALLBACK、NETWORK、SETTINGS）名の後に : をつけてセクションを区切る
- セクションを明示的に指定しない場合は、CACHEセクションとして扱われる
| '''セクション' | 説明 |
| CACHE | ここに記述されたURLのファイルをキャッシュする |
| FALLBACK | 指定したURLのリソースにアクセスできなかった場合に代用となるリソースを指定
空白区切りで2つの引数を指定。最初がアクセス対象のファイル（ワイルドカードの指定も可能）で、2つ目が代替となるファイル |
| NETWORK | キャッシュを無視して必ずネットワークからリソースを取得する |
| SETTINGS | prefer-online（オンライン時にはアプリケーションキャッシュを無視して通常のネットワークアクセスを行う）のみ指定可能 |
Appendix †
media †
メディアを指定することでスタイルを適用するメディアを限定することが可能。
| メディア | 対象 |
| all | すべてのメディア（初期値） |
| screen | 一般的なディスプレイ |
| print | 通常のプリンタ |
| projection | プロジェクタ |
| tv | テレビ |
| handheld | ハンドヘルドデバイス |
| tty | 固定文字サイズの端末 |
| embossed | 点字プリンタ |
| braille | 点字の触角デバイス |
| speech | 読み上げブラウザ |
rel属性 †
リンク先の関係を指定する。
| 値 | link | a、area | 説明 |
| alternate | ○ | ○ | 代替の文書を示す |
| stylesheet | ○ | × | 外部スタイルシートを示す |
| author | ○ | ○ | 著者情報の文書、または連絡先を示す |
| bookmark | × | ○ | ブックマークリンクを示す |
| help | ○ | ○ | ヘルプの文書を示す |
| icon | ○ | × | アイコンを示す |
| license | ○ | ○ | 著作権情報の文書を示す |
| next | ○ | ○ | 一連の文書の中で次の文書を示す |
| nofollow | × | ○ | リンク先をフォローしない |
| noreferrer | × | ○ | リンク先にリファラーを送らない |
| prefetch | ○ | ○ | リンク先の事前読み込み |
| prev | ○ | ○ | 一連の文書の中で前の文書を示す |
| search | ○ | ○ | 関連文書を検索するためのページを示す |
| tag | × | ○ | 関連するタグを示す |
