このページではJavaScriptをONにしてください。

HTML Reference

A

<a>
<a href=”リンク内容”>Library</a>

ハイパーリンクを指定する際に使用します。
ウェブページ内のテキストや画像などを<a>~</a>で囲んで必要な属性値を指定してやることで、ハイパーリンクの始点(出発点)や終点(到達点)とすることができます。

<a>は、anchor(アンカー)の略です。
anchorを日本語にすると”船の錨・つなぎ止めて固定する”といった意味になります。
<a>は指定した場所同士をつなぐことで関連する情報同士を結び付け、ユーザーに情報間の移動手段を提供する重要なタグです。

href属性はハイパーリンク先のURLを指定する際に使用します。
href属性の値には相対パスと絶対パスのどちらでも指定することができます。

相対パスとは、現在のファイルの場所からの相対的なパスを指定する方法で、 同じドメイン名のURL同士ならフォルダ階層やファイル名を指定するだけでリンクすることができます。
絶対パスとは、http://~で始まるURLを指定する方法で別のドメイン名のURLにリンクする際などに利用されます。

target属性

<a href=”リンク内容” target=”_blank”>Libraty</a>

_blank
新しいタブやウィンドウでリンク先を開く
_parent
現在のウィンドウの親ウィンドウでリンク先を開く
_self
現在のウィンドウでリンク先を開く
_top
現在のウィンドウの最上位階層のウィンドウでリンク先を開く
<abbr>
<abbr title=”HyperText Markup Language”>HTML</abbr>

略語や頭字語であることを表す際に使用します。

title属性は様々な要素で使用できる汎用的な属性ですが、<abbr>にtitle属性を指定した場合には特別な意味を持ちます。
<abbr>のtitle属性には、略語や頭字語の正式な名称を指定します。
title属性を指定した場合、一般的なブラウザではマウスカーソルを乗せた際にツールチップとして表示されます。

略語や頭字語は必ず<abbr>~</abbr>で囲まなくてはならないということはありませんが、 読者になじみのない略語を使用する場合にはtitle属性を持つ<abbr>でマークアップするか、 その略語が最初に使われるテキストに正式な名称を含めておくことが推奨されています。

HTML4.01では略語はacronym要素、頭字語はabbr要素でそれぞれ表すことになっていました。
HTML5ではacronym要素は廃止され、abbr要素に代替することが推奨されています。

略語(abbreviation)とは、例えばHTML(Hypertext Markup Language)、XML(Extensible Markup Language)などのことです。
一方、頭字語(acronym)とは、SOHO(ソーホー、Small Office Home Office)、LAN(ラン、Local Area Network)などの頭文字をとった略語で1つの単語として発音するものを指します。
HTML4.01では、略語と頭字語を別の要素として区別していましたが、HTML5ではどちらもabbr要素で表すことが出来るように変更されています。

title属性
<abbr title=”HyperText Markup Language”>HTML</abbr>

略称や頭字語の正式な内容を指定

<address>
<footer>
<address>
この作者への連絡先は、<a href=”mailto:info@html.com”>info@htmq.com</a>までメールをお送りいただくか、<a href=”../contact/”>お問合わせフォーム</a>からメッセージをお送りください。
</address>
</footer>

連絡先・問合せ先を表す際に使用します。
通常はその文書の作者への連絡先情報を表しますが、article要素の中に配置されている場合には直近の祖先となるarticle要素の内容の作者への連絡先情報を表します。

address要素は、あくまでも内容に関する連絡先・問合せ先を表す要素です。
“address”という単語は日本語では”住所”という意味になりますが、 文章中に住所が出てきたらからといって<address>~</address>でくくるのは誤りです。
このような場合には<p>タグなどを使用するほうがふさわしいでしょう。
また、address要素の中には連絡先情報以外の情報を含めてはいけません。
例えば最終更新日時などの情報を含めるのは誤りです。

article要素の内容としては、連絡先のメールアドレスや問合せページへのリンクなどを指定します。
article要素は、一般的には、footer要素の中に他の情報と一緒に入れられることが多いでしょう。

<area>
<img src=”images/area.gif” usemap=”#sample” alt=”サンプル” width=”384″ height=”128″>
<map name=”sample”>
<area href=”aaa.htm” shape=”rect” alt=”四角形” coords=”15,19,126,104″>
<area href=”bbb.htm” shape=”circle” alt=”円形” coords=”197,69,54″>
<area href=”ccc.htm” shape=”poly” alt=”多角形” coords=”306,12,261,109,378,92″>
</map>

イメージマップのハイパーリンク領域を設定する際に使用します。
<area>は<map>~</map>の中に配置します。

href属性はハイパーリンク先のURLを指定する際に使用します。
href属性を指定する場合にはalt属性が必須となります。
alt属性にはハイパーリンクのテキストを指定します。
反対にhref属性を指定しない場合には、alt属性も省略しなくてはなりません。

尚、href属性を指定しない<area>は、その領域からリンクを外すという意味を持ちます。
他のhref属性を指定した<area>と組み合わせることで、 例えば円形から三角形を切り抜くなど、より複雑な形状のハイパーリンク領域を指定することが可能となります。

ハイパーリンク領域の形状はshape属性で指定します。
指定できる形状は、円形・多角形・四角形のいずれかで、circle・default・poly・rectなどのキーワードで指定します。
shape属性を省略した場合には、ハイパーリンク領域の形状は四角形となります。

circle
円形(正円のみ指定可能、楕円は指定できない)
default
初期状態(画像全体がハイパーリンク領域となる)
poly
多角形
rect
四角形

coords属性はハイパーリンク領域の座標を指定する際に使用します。
座標は半角カンマ( , )区切りの整数のリストで指定します。

shape属性でcircleなどのキーワードで円形を指定している場合には、coords属性の値は3つの整数のリストとなります。
1つ目の整数は画像の左端から円の中心までのピクセル距離、 2つ目の整数は画像の上端から円の中心までのピクセル距離、 3つ目の整数は円の半径のピクセル距離となります。

shape属性でdefaultのキーワードで初期状態を指定している場合にはcoords属性は指定できません。
この場合、画像全体がハイパーリンク領域となります。

shape属性でpolyなどのキーワードで多角形を指定している場合には、coords属性の値は少なくとも6つ以上の偶数個の整数のリストとなります。
整数2つごとに順番にペアとなって座標が決定されますが、整数のペアが3組あれば三角形、4組あれば四角形、5組あれば五角形…という具合です。
各ペアは画像の左端と上端からのピクセル距離となります。

shape属性でrectなどのキーワードで四角形を指定している場合には、coords属性の値は4つの整数のリストとなります。
shape=”poly”で四角形を指定する場合は8つの整数のリストが必要ですが、 shape=”rect”で四角形を指定する場合は4つの整数のリストです。
4つの整数はそれぞれ順番に画像の左端からハイパーリンク領域の左端までのピクセル距離、 画像の上端からハイパーリンク領域の上端までのピクセル距離、 画像の左端からハイパーリンク領域の右端までのピクセル距離、 画像の上端からハイパーリンク領域の下端までのピクセル距離となります。

target属性・ping 属性はハイパーリンクをどのようにたどるかを、 rel属性・media属性・hreflang属性・type 属性は、ハイパーリンク先がどのような性質であるかを示す際に指定します。
target属性・ping属性・rel属性・media属性・hreflang属性・type 属性はhref属性を指定しない場合には省略しなくてはなりません。

area要素は、HTML5ではnohref属性が廃止されています。 一方で、新しくhreflang属性・media属性・rel属性・type属性が追加されています。

属性

alt属性
ハイパーリンクのテキストを指定
coords属性
ハイパーリンク領域の座標を指定
shape属性
ハイパーリンク領域の形状をキーワードで指定(circle・circ・default・poly・polygon・rect・rectangle)
href属性
ハイパーリンク先のURLを指定
target属性
ハイパーリンク先を開くターゲットを指定
ping属性
ハイパーリンクをたどったことを通知するURLを指定
rel属性
ハイパーリンク先との関係を指定
media属性
ハイパーリンク先のメディアを指定
hreflang属性
ハイパーリンク先の言語を指定
type属性
ハイパーリンク先のMIMEタイプを指定
<article>
<article>
<h2><a href= “blog01.html”>散歩</a></h2>
<p>今日は散歩に出掛けた…</p>
<article>
<h2>コメント</h2>
<p>いいですね…</p>
</article>
</article>

内容が単体で完結するセクションであることを示す際に使用します。
例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなどです。

<article>を入れ子にして使用する場合、内側の<article>の内容は、原則として外側の<article>の内容に関連していることになります。
例えば、<article>タグでくくられたブログのエントリの内側に、さらに<article>タグでくくられたユーザーコメントを入れ子に配置することで、そのコメントがそのブログエントリに対して投稿されたものであることを示すことができるでしょう。

この際、ウェブページ内で<address>タグを使って示されている作者情報は、入れ子の内側の<article>の内容にまでは適用されません。

<aside>
<aside>
<h1>ヒシアマゾンといえば</h1>
<p>
やっぱりクリスタルカップの出遅れスタートからのものすごい追い込みでしょう。
</p>
</aside>

その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用します。

ここで言う余談・補足情報とは、本文と関連してはいるけれど区別して掲載するべき内容のことです。
例えば、印刷物などで本文の補足として欄外に掲載されるような内容です。

<aside>でタグ付けした要素は、あくまでも本文から外れる余談・補足情報ですから本文の流れの一部となる挿入句(カッコでくくって差し込むような内容など)に対して、<aside>タグを使用するのは適切ではありません。

<audio>
<body>
<audio src=”sample/sample.ogg” controls>
<p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>
</body>

音声を再生する際に使用します。
再生する音声ファイルは、src属性で指定します。

<audio>~</audio>の中には<audio>タグがサポートされていない環境で表示させるメッセージを記述することができます。

動画の再生については<video>タグのページを参照してください。

audio要素はHTML5から新たに追加された要素です。

属性

src属性
音声ファイルを指定する
preload属性
音声をあらかじめ読み込む(auto、metadata、none)
autoplay属性
音声を自動再生する
loop属性
ループ再生を指定する
controls属性
インターフェースを表示する

以下のサンプルではFirefoxとGoogle Chromeで音声を再生できます。

<body>
<audio src=”sample/sample.ogg” controls>
<p>音声を再生するには、audioタグをサポートしたブラウザが必要です。</p>
</audio>
</body>

B

<b>
<p>
当軒は<b>注文の多い料理店</b>ですからどうかそこはご承知ください。
</p>

文書内のキーワードや製品名など、他と区別したいテキストを表す際に使用します。

一般的に印刷される際に太字となるようなテキストです。
その箇所が重要であるという意味や強調する役割はありません。

<b>は、他により適切な要素が存在しない場合の最終手段として使用するべきものです。
特に見出しには<b>ではなく、<h1> – <h6>を使用してください。
また、強勢する箇所を示す場合には<em>、 重要性を示す場合には<strong>、 テキストをハイライトして目立たせる場合には<mark>を使用します。

HTML 4.01ではテキストを太字にすると定義されていましたが、 HTML5では他と区別したいテキスト・印刷される際に太字となるようなテキストを表すと変更されています。

<base>
<!DOCTYPE html>
<html>
<head>
<title>HTML5のbase要素</title>
<base href=”http://969work.net/”>
</head>

相対パスの基準URIを指定する際に使用します。
<base>タグを使用する場合には、一つの文書に一つだけ<head>~</head>の中に配置します。
一つの文書内で複数の<base>を指定することはできません。

<base>タグを使用する場合には、href属性とtarget属性のどちらか、または両方を指定する必要があります。
href属性には基準URIを、target属性にはリンク先ターゲットを指定します。

base要素にhref属性を指定する場合、他の要素でURLが指定されているものより前に記述する必要があります。
ただし、HTML要素は除きます。
html要素のmanifest属性で指定するURIは、base要素で基準URIをした場合にもその影響を受けません。

href属性
基準となるURIを指定(必須属性)
target属性
リンク先ターゲットを指定
<bdo>
<p>
<bdo dir=”rtl”>あいうえお かきくけこ</bdo>
</p>
<p>
<bdo dir=”ltr”>あいうえお かきくけこ</bdo>
</p>

ブラウザ上での表示

あいうえお かきくけこ

あいうえお かきくけこ

文字表記の方向を指定する際に使用します。
アラビア語やヘブライ語のように右から左に記述する言語を表記する際などに使用します。

文字表記の方向はdir属性で指定します。
dir属性の値は、表記方向が左から右ならltr(left-to-right)、右から左ならrtl(right-to-left)となります。

<bdo>をスタイリング目的で使用するのは誤りです。
そのような目的にはCSSを使用してください。
CSSでは<p style=”direction: rtl; unicode-bidi: bidi-override;”>~</p> などと記述します。

dir属性
文字表記の方向を指定(左から右ならltr、右から左ならrtl)
<blockquote>
<p>夏目漱石の<cite>草枕</cite>は、こんな風に始まります。</p>
<blockquote cite=”引用元のアドレス”>
<p>山路を登りながら、こう考えた。
智に働けば角が立つ。
情に棹させば流される。
意地を通せば窮屈だ。
とかくに人の世は住みにくい。</p>
</blockquote>
<p>この作品の主人公は30歳の洋画家ですが、世間にあまりなじめていない彼の芸術家らしい生きざまがすでに冒頭で表現されています。</p>

他の情報源からの引用・転載セクションであることを表す際に使用します。
cite属性には、引用元のアドレスが存在する場合にそのURLを指定します。

<body>
<body>

文書の本体を表す際に使用します。
文書の本体とはブラウザ上に表示されるメインコンテンツのことです。

HTML文書では、<body>要素は<html>~</html>の中に一つだけ配置します。
<body>~</body>の中には見出し・段落・表・フォームなどの要素を配置します。

<br>
<p>
株式会社XXX<br>
東京都豊島区0-0-0<br>
ABCマンション000号室
</p>

改行する際に使用します。

<br>は、例えば詩や住所などのように改行が実際にコンテンツの一部を成すような場合にのみ使用します。
文の長さを揃えたりレイアウトを整えるなどのスタイリング目的に<br>を使用してはいけません。

フォームの入力項目を見栄え上分かりやすくするために、入力項目ごとに<br>タグで改行するような使い方は誤りです。
このような目的には<br>ではなく、それぞれの入力項目を<p>~</p>で囲むほうが適切です。

<button>
<button type=button onclick=”alert(‘button要素は、この使用例のようにスクリプトと組み合わせて利用されることが多いようです。’)”>
button要素に関するワンポイントメモを表示
</button>

ボタンを作成する際に使用します。

type属性はボタンの種類を指定する際に使用します。
type属性の値には、以下の3種類のいずれかを指定することができます。
初期値はtype=”submit”です。

type=”submit”
フォーム入力内容を送信するサブミットボタン(初期値)
type=”reset”
フォーム入力内容をリセットするリセットボタン
type=”button”
何もしない汎用ボタン

form属性は、どのフォームと関連付けるかを指定する際に使用します。
<button>は初期値では直近の親要素となる<form>と関連付けられますが、 <form>のid属性の値と<button>のform属性の値を一致させることで、 ボタンを特定のフォームと関連付けることができます。
ボタンを任意の場所に配置できるので、ウェブアプリケーションなどを制作する際には便利かもしれません。

name属性は<button>に名前を付ける際に使用します。
スクリプトで操作する際などに必要となる<button>のコントロール名です。

disabled属性はボタンを無効にする際に使用します。
disabled属性が指定されていると、ボタンを押せなくなりデータは送信されません。

autofocus属性はボタンへの自動フォーカスを指定する際に使用します。

formaction属性(送信先URL)・ formenctype属性(送信するデータの形式)・ formmethod属性(送信方法)・ formnovalidate属性(入力されたデータの妥当性を確認しない)・ formtarget属性(フォーム送信するターゲット先)は、 <form>の属性でも同様の指定をすることができますが、 <button>側でこれらの属性を指定すると、<form>の指定より優先されます。

formaction属性・formenctype属性・formmethod属性・formnovalidate属性・formtarget属性は、 type=”submit”の場合にのみ指定することができます。

value属性は<button>自身の値を指定する際に使用します。
例えば<input>などの入力部品が無くても<button>の値を送信して何らかのフラグにすることができます。

button要素は、HTML5ではHTML4.01には無かった autofocus属性・form属性・formaction属性・formenctype属性・formmethod属性・formnovalidate属性・formtarget属性が新たに追加されています。

属性

autofocus属性
自動フォーカスを指定する(autofocus)
disabled属性
操作を無効にする(disabled)
form属性
どのフォームと関連付けるかを<form>のid名で指定
formaction属性
送信先URLを指定
formenctype属性
送信するデータの形式を指定(application/x-www-form-urlencoded・multipart/form-data・text/plain)(初期値はapplication/x-www-form-urlencoded)
formmethod属性
送信方法(HTTPメソッド)を指定(get・post)(初期値はget)
formnovalidate属性
入力されたデータの妥当性を確認しない(formnovalidate)
formtarget属性
フォーム送信するターゲット先を指定(_blank・_self・_parent・_top・任意のターゲット名)
name属性
ボタンの名前を指定
type属性
ボタンの種類を指定(submit・reset・button)(初期値はsubmit)
value属性
値を指定

C

<canvas>
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>canvasで図形を描く</title>

<script type=”text/javascript”>
<!–
function sample() {
//描画コンテキストの取得
var canvas = document.getElementById(‘sample1′);
if (canvas.getContext) {

var context = canvas.getContext(’2d’);

//左から20上から40の位置に、幅50高さ100の四角形を描く
context.fillRect(20,40,50,100);

//色を指定する
context.strokeStyle = ‘rgb(00,00,255)’; //枠線の色は青
context.fillStyle = ‘rgb(255,00,00)’; //塗りつぶしの色は赤

//左から200上から80の位置に、幅100高さ50の四角の枠線を描く
context.strokeRect(200,80,100,50);

//左から150上から75の位置に、半径60の半円を反時計回り(左回り)で描く
context.arc(150,75,60,Math.PI*1,Math.PI*2,true);
context.fill();

}
}
//–>
</script>

</head>
<body onLoad=”sample()”>
<h2>canvasで図形を描く</h2>
<canvas id=”sample1″ style=”background-color:yellow;”>
図形を表示するには、canvasタグをサポートしたブラウザが必要です。
</canvas>
</body>
</html>

図形を描く際に使用します。
今までウェブページ上で図形を描くにはPNG・JPEG・GIFなどの画像に置き換えるか、Flashなどのプラグインデータを埋め込むのが一般的でしたが、<canvas>を使用すると標準のHTMLやJavaScriptだけで、グラフやゲームグラフィックスなどの図形をすばやく表示できるようになります。

<canvas>の幅と高さはwidth属性とheight属性で指定することができますが、特に指定しない場合の初期値は300×150となります。
以下のサンプルでは、キャンバスの背景をCSSのbackground-color:yellow;の指定で黄色くしていますが、これはキャンバスのサイズを分かりやすくするためです。
また、図形の色を特に指定しない場合には、一般的なブラウザでは黒になります。

<canvas>~</canvas>の中には、 <canvas>タグがサポートされていない環境で表示させるメッセージを記述することができます。

尚、より適切な要素がある場合には<canvas>を使うべきではありません。
例えばページの見出しに<canvas>を使うのは不適切です。
見出しを装飾する場合には、<h1>などの適切な要素を使用した上でCSSでスタイリングするべきでしょう。

canvas要素は、HTML5から新たに追加された要素です。

属性

width属性
幅を指定する(初期値は300)
height属性
高さを指定する(初期値は150)
<caption>
<table>
<caption>
<p>これは、2つのサイコロを振った場合の合計値の早見表です。最初の横行と縦行は、それぞれのサイコロの目を表します。</p>
</caption>
<tbody>
<tr><th></th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th></tr>
<tr><th>1</th><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td></tr>
<tr><th>2</th><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td></tr>
<tr><th>3</th><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td></tr>
<tr><th>4</th><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
<tr><th>5</th><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td></tr>
<tr><th>6</th><td>7</td><td>8</td><td>9</td><td>10</td><td>11</td><td>12</td></tr>
</tbody>
</table>

テーブルにキャプションをつける際に使用します。
<caption>は<table>~</table>の最初の子要素として配置します。

キャプションとは表のタイトルや説明のことです。
例えば<caption>~</caption>の中に段落を配置して、表の説明文を入れても問題ありません。

<figure>~</figure>の子要素に<figcaption>と<table>しか存在しない場合、<figcaption>がテーブルのキャプションとして機能するので、<caption>は省略するべきでしょう。

一般的なブラウザではキャプションはテーブルの上部に表示されますが、 CSSのcaption-sideプロパティで表示位置を指定することができます。

HTML4.01ではcaption要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。 HTML5では、caption要素のalign属性は廃止されています。 揃え位置の指定にはCSSを使用してください。

<cite>
夏目漱石の<cite>草枕</cite>は、こんな風に始まります。

作品のタイトルを表す際に使用します。
ここでいう作品とは、本・書類・随筆・詩・楽譜・歌・脚本・映画・テレビ番組・ゲーム・彫刻・絵画・劇場作品・芝居・オペラ・ミュージカル・展覧会・訴訟事件の報告…などのことです。

<cite>は人の名前に使用することはできません。
文中の有名人の名前を際立たせたい場合などには <b>や<span>のほうが適しているでしょう。

また、作品の内容を引用する場合には<blockquote>や<q>を使用してください。
<blockquote>や<q>のcite属性には引用元のURLを指定します。
作品のタイトルを表すcite要素と混同しないように注意してください。

HTML5では作品のタイトルを表す要素となり、使用範囲がより限定されています。

<code>
<code>
<script type=”text/javascript”>
document.write(“サンプルテキスト”);
</script>
</code>

プログラムなどのコードであることを示す際に使用します。
HTMLやXMLの要素名や属性名、ファイル名、プログラムなどのコンピューターが認識するであろう文字列です。

一般的なブラウザでは、等幅フォントで表示されます。

<col>
<table>
<caption>寿司ネタ人気ランキング</caption>
<colgroup span=”1″ style=”width:30px; background-color:#FF9900;”>
<colgroup>
<col span=”2″ style=”width:100px; background-color:#FF3300;”>
<col span=”1″ style=”width:250px; background-color:#FFCC00;”>
</colgroup>
<thead>
<tr><th>順位</th><th>名前</th><th>人気度</th><th>備考</th></tr>
</thead>
<tbody>
<tr><th>1位</th><td>トロ</td><td>☆☆☆☆☆</td><td>やはり何といってもトロ!</td></tr>
<tr><th>2位</th><td>サーモン</td><td>☆☆☆☆</td><td>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th>3位</th><td>うに</td><td>☆☆☆</td><td>軍艦もので唯一ランクイン。</td></tr>
<tr><th>4位</th><td>えび</td><td>☆☆☆</td><td>プリプリした歯ごたえが魅力。</td></tr>
<tr><th>5位</th><td>イカ</td><td>☆☆</td><td>やはり外せない甘みのあるイカ。</td></tr>
</tbody>
</table>

表の縦列に属性やスタイルを指定する際に使用します。
<col>は表の縦列をグループ化しませんが、複数の縦列に対して同じ属性やスタイルをまとめて指定することができます。

span属性には属性やスタイルを適用する縦列の数を指定します。
span属性の値に指定できるのは0より大きい正の整数で、負の数値を指定することはできません。

<col>は必ず<colgroup>~</colgroup>の中に配置します。
ただし<colgroup>がspan属性を持っている場合には<col>を配置することはできません。

<colgroup>と<col>の違い

<colgroup>と<col>は混同しがちですが、以下の点を意識すると理解しやすいでしょう。

1.<colgroup>は表の縦列グループを表す要素です。
2.<col>は<colgroup>によってグループ化された縦列グループ内の1つ以上の縦列を表す要素です。
3.<colgroup>は表の縦列をグループ化しますが、グループ化した縦列にまとめて属性やスタイルを適用することができます。
4.<col>は表の縦列をグループ化しませんが、複数の縦列にまとめて属性やスタイルを適用することができます。
5.<colgroup>は必ず<table>~</table>の中に配置します。
6.<col>は必ず<colgroup>~</colgroup>の中に配置します。
<colgroup>がspan属性を持っている場合には、<col>を配置することはできません。
7.<colgroup>がspan属性を持っている場合には、空要素となります。
8.まとめると表の縦列をグループ化する場合、および表の縦列をグループ化した上で属性やスタイルを指定する場合には<colgroup>を使用します。
一方、表の縦列をグループ化することなく属性やスタイルを指定する場合には<col>を使用します。

col要素はHTML5ではalign属性・char属性・charoff属性・valign属性・width属性が廃止され、 span属性だけが残されています。

属性

span属性
縦列の数を指定
<colgroup>
<table>
<caption>寿司ネタ人気ランキング</caption>
<colgroup span=”1″ style=”width:30px; background-color:#FF9900;”>
<colgroup span=”3″ style=”width:150px; background-color:#FF3300;”>
<thead>
<tr><th>順位</th><th>名前</th><th>人気度</th><th>備考</th></tr>
</thead>
<tbody>
<tr><th>1位</th><td>トロ</td><td>☆☆☆☆☆</td><td>やはり何といってもトロ!</td></tr>
<tr><th>2位</th><td>サーモン</td><td>☆☆☆☆</td><td>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th>3位</th><td>うに</td><td>☆☆☆</td><td>軍艦もので唯一ランクイン。</td></tr>
<tr><th>4位</th><td>えび</td><td>☆☆☆</td><td>プリプリした歯ごたえが魅力。</td></tr>
<tr><th>5位</th><td>イカ</td><td>☆☆</td><td>やはり外せない甘みのあるイカ。</td></tr>
</tbody>
</table>

表の縦列(カラム)をグループ化する際に使用します。
<colgroup>を使用すると、表の1つ以上の縦列をグループ化してその縦列グループに対して同じ属性やスタイルをまとめて指定することができます。

span属性にはグループ化する縦列の数を指定します。
span属性の値に指定できるのは0より大きい正の整数で、負の数値を指定することはできません。

<colgroup>は<table>~</table>の中の<caption>より後、 <thead>・ <tbody>・ <tfoot>・ <tr>より前に配置します。

<colgroup>はspan属性を持つ場合には空要素となり、子孫要素を含むことはできません。
反対にspan属性を持たない場合には、子要素として<col>を含むことができます。

尚、<colgroup>と<col>の使い分けについては、 <col>のページを参照してください。

colgroup要素はHTML5ではalign属性・char属性・charoff属性・valign属性・width属性が廃止され、 span属性だけが残されています。

属性

span属性
グループ化する縦列の数を指定
<command>
<menu type=”toolbar”>
<command type=”radio” radiogroup=”alignment” checked=”checked” label=”Left” icon=”images/alL.png” onclick=”setAlign(‘left’)”>
<command type=”radio” radiogroup=”alignment” label=”Center” icon=”images/alC.png” onclick=”setAlign(‘center’)”>
<command type=”radio” radiogroup=”alignment” label=”Right” icon=”images/alR.png” onclick=”setAlign(‘right’)”>
<hr>
<command type=”command” disabled label=”Publish” icon=”images/pub.png” onclick=”publish()”>
</menu>

操作メニューの各コマンドを指定する際に使用します。
<menu>~</menu>で全体が操作メニューであることを定義して、その子要素として<command>を配置してユーザーが呼び出すことのできる各コマンドを指定します。

type属性はコマンドの種類を指定します。
指定できるコマンドの種類は、command(通常のコマンド)、checkbox(選択式)、radio(択一式)の3種類で初期値はcommandです。

label属性はコマンドにラベル(項目名)を付けてユーザーに分かるようにします。
label属性は必須属性で、空文字を指定することはできません。

disabled属性を指定すると、コマンドを使用不能の状態にします。

radiogroup属性はtype=”radio”で選択肢が複数階層になっているときに、子となる選択肢リストの各グループに対して名前を付けます。

尚、<command>要素は<menu>~</menu>の中に配置しないと表示されません。

command要素はHTML5から新たに追加された要素です。

属性

type属性
コマンドの種類を指定する(command、checkbox、radio)
label属性
コマンドにラベル(項目名)を付ける(※必須属性)
icon属性
コマンドを表す画像を指定する
disabled属性
コマンドを使用不能の状態にする
checked属性
コマンドを選択した状態にする(type=”checkbox”、または、type=”radio”の時に指定可)
radiogroup属性
コマンドグループに名前を付ける(type=”radio”の時に指定可)
title属性
コマンドのヒントを提供する

D

<datalist>
<form>
<fieldset>

<input type=”search” name=”q” autocomplete=”on” list=”keywords”>
<datalist id=”keywords”>
<option value=”ウィキペディア”>
<option value=”ウィルス対策”>
<option value=”ウィンドウズ”>
</datalist>

<input type=”submit” value=”送信”>
</fieldset>
</form>

フォームの入力欄などで入力候補となるデータリストを定義します。
各データのリスト項目は<option>タグで定義します。
<datalist>タグをサポートしたブラウザでは<option>タグで指定された値がユーザーに対して入力候補として提案表示されます。

<datalist>タグを使って作成するインターフェースの具体的な例を挙げると、 検索エンジンでキーワードの入力候補を表示するオートコンプリート機能などです。
この場合、キーワードの入力欄は<input>タグで作成しますが<input>タグのlist属性の値と<datalist>タグのid属性の値を同じにして、入力欄とデータリストを関連付けます。

<datalist>~</datalist>の内容は、その子要素も含めてブラウザ上では表示されないことになっています。

datalist要素は、HTML5から新たに追加された要素です。

<dd>
<article>
<dl>
<dt>好きなアーティスト</dt>
<dd>ゆらゆら帝国</dd>
<dd>アーバンギャルド</dd>
<dd>相対性理論</dd>
<dd>毛皮のマリーズ</dt>
</dl>
</article>

定義用語や言葉の説明をする際に使用します。
定義・説明リストを作成する際には<dl>~</dl>の中に<dt>タグで定義・説明される言葉を<dd>タグでそれに対応する説明を配置してリストを作成します。

<del>
<h1>今週やることリスト</h1>
<ul>
<li>仕様書を作成する</li>
<li><del datetime=”2009-10-11 01:25-07:00″>ソフトウェアのマニュアルを読む</del></li>
<li><del datetime=”2009-10-10 23:38-07:00″>ソフトウェアをインストールする</del></li>
<li>プリンタ用紙を買う</li>
</ul>

ブラウザ上での表示

今週やることリスト

  • 仕様書を作成する
  • ソフトウェアのマニュアルを読む
  • ソフトウェアをインストールする
  • プリンタ用紙を買う

削除された部分であることを示す際に使用します。

cite属性には、変更について説明する文書がある場合にそのURLを指定します。
cite属性に指定するURLの文書が、例えば会議の議事録のような長い文書になっている場合には、 その文書内のどの部分が変更についての説明なのか分かるように、 id属性で識別子を付けることが推奨されています。

datetime属性は、変更日時を指定する際に使用します。 値はグローバル日時で指定します。

HTML4.01では、del要素の中にはブロックレベル要素を含めてはいけないことになっていました。
HTML5ではブロックレベル要素という概念自体が廃止されており、<del>~</del>の中に<p>を配置することもできるようになっています。
ただし、HTML5ではdel要素は、段落の境界にまたがるべきではないとされています。

<details>
<section>
<h1>動画ファイルのダウンロード</h1>
<details>
<summary>『sample.mp4』をダウンロードしています。</summary>
<dl>
<dt>ファイル名:</dt><dd>sample.mp4</dd>
<dt>ファイル形式:</dt><dd>MPEG-4</dd>
<dt>ファイル容量:</dt><dd>6.55MB</dd>
<dt>画面サイズ:</dt><dd>320×240</dd>
<dt>再生時間:</dt><dd>24秒</dd>
<dt>転送速度:</dt><dd>452KB/秒</dd>
</dl>
</details>
</section>

ユーザーが追加で得ることのできる備考や操作手段などの詳細情報であることを示す際に使用します。

もし、<details>~</details>の子要素として<summary>が存在する場合には<summary>~</summary>の内容がこの詳細情報の要約となります。
<summary>が存在しない場合には、ブラウザが<details>の内容を要約するかもしれません。

尚、<details>を脚注に使用することは推奨されていません。(脚注であることを明示的に表す専用のタグはありません)

details要素は、HTML5から新たに追加された要素です。

<dfn>
<p>いま解説している<dfn id=”sample”><abbr title=”HyperText Markup Language”>HTML</abbr></dfn>は、ウェブページを作成するための言語の一つです。</p>
<p><a href=#sample><abbr title=”HyperText Markup Language”>HTML</abbr></a>はそれほど難しいものではありません。
簡単なウェブページなら数種類のタグを覚えれば十分に作成することが可能です。</p>

用語が使用されていることを示す際に使用します。

<dfn>~</dfn>の中には用語を配置しますが、 その直近の親要素となる<p>・<dl>・<section> などの中には用語の定義内容を一緒に入れる必要があります。

title属性は様々な要素で使用できる汎用的な属性ですが<dfn>にtitle属性を指定した場合には特別な意味を持ちます。
<dfn>のtitle属性には、定義される用語の正式な名称を指定します。
また、<dfn>~</dfn>の直下に<abbr>を配置した場合には <abbr>のtitle属性の値が定義される用語の正式な名称を表すことになります。

dfn要素の祖先となる要素にtitle属性を指定してもdfn要素には影響を与えません。

<div>
<div class=”cats”>
<p>シロは真っ白です。おっとりしていますが、暖かいパソコンの上に乗ってきて仕事の邪魔をするのが日課です。</p>
<p>クロは真っ黒です。やんちゃでいつも走り回っています。ドアを開けてやると鉄砲玉のように飛び出します。</p>
</div>

ひとかたまりの範囲として定義する際に使用します。
<div>には特別な意味はありませんが<div>~</div>で囲まれた範囲を一つのグループとしてまとめることができます。
ページレイアウトやスタイリングを指定する際に、CSSを適用するためのコンテナ要素として使用されることの多いタグです。

<div>は大変便利なタグですが、他に適切な要素が無い場合の最終手段として使用することが強く推奨されています。
より適切な要素があるにも関わらず<div>を使用していると、 ウェブページのアクセシビリティやメンテナンス性が低下してしまうからです。

例えば、ブログの投稿には<article>、 章の区切りには<section>、 ページのナビゲーションには<nav>、 フォームグループには<fieldset> を使用してマークアップするべきでしょう。

一方で<div>はスタイリング目的の場合や、class属性・lang属性・title属性などの属性で複数の要素に同じ値をまとめて指定する場合には便利でしょう。
以下の使用例は、二つの段落を<div>でくくってCSSによるスタイリングをまとめて指定しています。

HTML5では<article>・<aside>・<nav>・<section>などの新しい要素が追加されているので、 これらの新しい要素のほうが<div>よりも適切なケースがあるかもしれません。

title属性
<dfn title=”HyperText Markup Language>HTML</dfn>

定義される用語の正式な名称を指定

<dl>
<article>
<dl>
<dt>好きな曲</dt>
<dd>ナンダカンダ</dd>
<dd>へぶん</dd>
<dd>夜間飛行</dd>
<dd>99 RED BALLOONS</dt>
</dl>
</article>

定義・説明リストを表す際に使用します。
<dl>~</dl>の中に、 <dt>タグで定義・説明される言葉を<dd>タグでそれに対応する説明を配置してリストを作成します。
例えば、用語の定義リストを作成したり、何かの手順を箇条書きで説明する場合などに使用します。

HTML5では<dl>~</dl>の中の<dt>と<dd>は必ずしも一対一である必要はありません。

<dt>
<article>
<dl>
<dt>好きな映画</dt>
<dd>紀子の食卓</dd>
<dd>サマータイムマシン・ブルース</dd>
<dd>冴え冴えてなほ滑稽な月</dd>
<dd>くそガキの告白</dt>
</dl>
</article>

定義・説明される言葉を表す際に使用します。
例えば、定義用語・名前・何らかの説明をする際の説明の前半部分などです。
定義・説明リストを作成する際には<dl>~</dl>の中に<dt>タグで定義・説明される言葉を<dd>タグでそれに対応する説明を配置してリストを作成します。

E

<em>
<em>猫</em>はかわいい

ブラウザ上での表示

はかわいい

強勢する(アクセントを付ける)箇所を表す際に使用します。

<em> ~ </em>を入れ子にすることで、 コンテンツの特定個所が持つ強勢の度合いを指定し分けることができます。

同じ文でもどの個所をどの程度の強さで強勢するかによって、ニュアンスが異なってくるでしょう。
例えば「猫はかわいい」という文を「<em>猫</em>はかわいい」とすれば(犬などの他の動物じゃなくて…)というニュアンスが出せるかもしれません。
また「猫は<em>かわいい</em> 」とすれば(猫はかわいくないという意見への反論)というニュアンスが出せるかもしれません。

<embed>
<p>マウスを乗せると反応するFlashです。</p>
<embed src=”images/wave.swf” width=”400″ height=”300″>

外部アプリケーションやインタラクティブなコンテンツ、例えばFlashなどのプラグインを必要とするデータをHTML文書に埋め込む際に使用します。

よく利用されるプラグインデータには、動画データにはMPEGファイル(.mpg)・FLASHファイル(.swf)・QuickTimeファイル(.mov)等、 音声データにはWAVEファイル(.wav)・AIFFファイル(.aif)・AUファイル(.au)・MIDIファイル(.mid)・ RealAudio(.ra) 等があります。
これらの動画データや音声データは、ブラウザに追加インストールされたプラグインで再生しますが、再生するデータの形式により必要なプラグインは異なります。

データを埋め込むにはsrc属性でリソースのURLを指定して、type属性でMIMEタイプを指定します。
src属性とtype属性を同時に指定する場合、当然ながらsrc属性で指定したリソースに合致する適切なMIMEタイプを指定してやる必要があります。

もともとはNetscape Navigator独自の要素で、 HTML4.01の仕様には取り入れられていませんが、すでに事実上の標準として一般的なブラウザでサポートされています。
HTML5では、正式に標準仕様として採用される予定です。

属性

src属性
データのURLを指定する
type属性
MIMEタイプを指定する
width属性
幅を指定する
height属性
高さを指定する

F

<fieldset>
<form action=”mail.php” method=”post”>
<p><label>名前:<input type=”text” name=”name” size=”40″></label></p>
<fieldset disabled=”disabled”>
<legend>性別</legend>
<p><label><input type=”radio” name=”sex” value=”male”>男</label></p>
<p><label><input type=”radio” name=”sex” value=”female”>女</label></p>
</fieldset>
<fieldset>
<legend>趣味</legend>
<p><label><input type=”checkbox” name=”hobby” value=”sports”>スポーツ</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”reading”>読書</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”music”>音楽</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”travel”>旅行</label></p>
</fieldset>
<p><input type=”submit” value=”送信”><input type=”reset” value=”リセット”></p>
</form>

フォームの入力項目をグループ化する際に使用します。
<fieldset>~</fieldset>の中に配置された<input>・ <select>・ <textarea>等のフォーム部品がグループ化され、一般的なブラウザではボーダーで囲まれて表示されます。

フォーム部品のグループにキャプション(タイトルや説明)を付ける場合には<fieldset>~</fieldset>の中の最初の<legend>で指定します。

disabled属性はグループ内のフォーム部品を無効にする際に使用します。
<legend>でグループ名を指定している場合には、 <legend>~</legend>の内容を除く、それ以外のフォーム部品が無効となります。
disabled属性はまだサポートしているブラウザが少ない(無い?)ようです。

form属性はどのフォームと関連付けるかを指定する際に使用します。
フォーム部品は初期値では直近の親要素となる<form>と関連付けられますが、 <form>のid属性の値と<fieldset>のform属性の値を一致させることで、 フォーム部品グループを特定のフォームと関連付けることができます。
フォーム部品を任意の場所に配置できるので、ウェブアプリケーションなどを制作する際には便利かもしれません。

name属性は<fieldset>に名前を付ける際に使用します。
スクリプトで操作する際などに必要となる<fieldset>のコントロール名です。

fieldset要素はHTML5ではdisabled属性・form属性・name属性が追加されています。

属性

disabled属性
グループ内のフォーム部品を無効にする(disabled)
form属性
どのフォームと関連付けるかを<form>のid名で指定
name属性
<fieldset>に名前を付ける
<figcaption>
<figure id=”lemon”>
<img src=”../images/lemon.jpg” alt=”とても酸っぱいレモン”>
<figcaption>たくさんのレモン</figcaption>
</figure>

図表のキャプションを示す際に使用します。
<figure>~</figure>の中に配置すると、図表にキャプションを付けることができます。

figcaption要素は、HTML5から新たに追加された要素です。

<figure>
<figure id=”lemon”>
<img src=”../images/lemon.jpg” alt=”とても酸っぱいレモン”>
<figcaption>たくさんのレモン</figcaption>
</figure>

図表であることを示す際に使用します。
ここで言う図表とは、文書の本文(メインフロー)から参照されるようなイラスト・図・写真・ソースコードなどのことです。

図表は本文から参照される内容ですが、本文に影響を与えることなく、ページの端・専用ページ・別表にして切り離すことができます。

必要ならば図表にキャプションや注釈を付けても良いでしょう。
図表にキャプションを付ける場合には、<figcaption>タグを使用します。

figure要素は、HTML5から新たに追加された要素です。

<footer>
<footer>
<nav>
<a href=”index.html”>トップページ</a>
<a href=”about.html”>このサイトについて</a>
<a href=”profile.html”>作者紹介</a>
</nav>
<p>Copyright 2010</p>
</footer>

直近のセクションのフッタであることを示す際に使用します。

フッタとは、そのセクションに関する情報のことで、一般的には誰が書いたのか、関連文書へのリンク、著作権などの情報が含まれます。
作者の連絡先情報は<address>で示しますが、これを<footer>~</footer>の中に入れても良いでしょう。

フッタはセクションの最後に配置されることが多いですが、必ずしもそうする必要はありません。
記事セクションのフッタ、文書全体のフッタとなっていても問題ありません。

<form>
<form action=”mail.php” method=”post”>
<p><label>名前:<input type=”text” name=”name” size=”40″></label></p>
<p><label>血液型:
<select name=”blood”>
<option value=”A”>A型</option>
<option value=”B”>B型</option>
<option value=”O”>O型</option>
<option value=”AB”>AB型</option>
</select>
</label></p>
<fieldset>
<legend>性別</legend>
<p><label><input type=”radio” name=”sex” value=”male”>男</label></p>
<p><label><input type=”radio” name=”sex” value=”female”>女</label></p>
</fieldset>
<fieldset>
<legend>趣味</legend>
<p><label><input type=”checkbox” name=”hobby” value=”sports”>スポーツ</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”reading”>読書</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”music”>音楽</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”travel”>旅行</label></p>
</fieldset>
<p><label>コメント:<br><textarea name=”comments” rows=”2″ cols=”40″></textarea></label></p>
<p><input type=”submit” value=”送信”><input type=”reset” value=”リセット”></p>
</form>

入力・送信フォームを作る際に使用します。
<form>~</form>の間に<input>・<select>・<textarea>等のタグで、 一行テキストボックス・サブミットボタン・ラジオボタン・チェックボックス・セレクトボックス・テキストボックス等のフォーム部品を配置します。

フォームに入力されたデータは、送信ボタンを押すことでウェブサーバーへ送信されます。
その際の送信先URLはaction属性、データの送信方法はmethod属性、送信するデータの形式はenctype属性でそれぞれ指定します。
ウェブサーバーへ送信されたデータのプログラム処理は、 HTMLやCSSではなくPHPやCGIなどのサーバーサイド・スクリプトで行います。

action属性は送信先URLを指定する

action属性は、送信先URLを指定する際に使用します。

<form action=”mail.php”> ~ </form>

尚、<input>や <button>で作成されるサブミットボタンに formaction属性が指定されている場合には、formaction属性の値が優先されます。

method属性はデータの送信方法を指定する

method属性はデータの送信方法(HTTPメソッド)を指定する際に指定します。
method属性の値として指定できるのは以下の2種類です。

get
送信内容がURLとして渡される(初期値)
post
本文(本体)として送信される

初期値はmethod=”get”です。
method=”get”を指定すると送信内容がURLとして渡されます。
フォーム入力された内容はaction属性で指定したURLの後ろにクエスチョンマーク( ? )を付けて、それ以降続くにクエリとして送信先ページに渡されます。
そのため、入力内容はURLにそのまま表示されます。
一般的なブラウザではURLの長さに制限があるため、長すぎるデータは途中で切れてしまうので注意が必要です。
短めのキーワードや番号などを送信するのに適した送信方法であり、長い文章などを送信するのには向いていません。 “get”というのは「クエリ付きURLの情報を“取得する”」というほどの意味です。

method=”post”を指定するとURLの後ろに付くクエリとしてではなく、送信内容自体が本文(本体)として送信されます。
入力内容がURLに表示されることはなく、かなり長い文章も送信することができます。
“post”というのは「フォームの内容を送信先ページに“送る”」というほどの意味です。

<form action=”mail.php” method=”post”> ~ </form>

尚、<input>や <button>で作成されるサブミットボタンに formmethod属性が指定されている場合には、formmethod属性の値が優先されます。

enctype属性は送信データの形式を指定する

enctype属性は送信するデータの形式を指定する際に指定します。
enctype属性の値として指定できるのは以下の3種類です。
どのような形式のデータを送信するかによって、値を使い分けます。

application/x-www-form-urlencoded
複数の「フィールド名=入力内容」を&でつないだ形式のデータ(初期値)
multipart/form-data
ファイルを含むデータ
text/plain
プレーンテキストのみ

初期値はenctype=”application/x-www-form-urlencoded”です。
これは複数の「フィールド名=入力内容」を&でつないだ形式のデータで送信されるデータはURLエンコードされます。
送信するデータの中にファイルが含まれる場合、例えば画像のアップロードなどの場合にはenctype=”multipart/form-data”を指定します。

<form action=”mail.php” method=”post” enctype=”application/x-www-form-urlencoded”> ~ </form>

accept-charset属性は送信データの文字エンコーディングを指定する

accept-charset属性は送信されるデータの文字エンコーディングを指定する際に使用します。
多くの場合、文字エンコーディングを指定しなくてもサーバー側で自動判別されるようですが、 文字化けが起きる場合にはaccept-charset属性を指定することで回避できるかもしれません。

日本語の文字エンコーディングの値としては、”UTF-8″・”Shift_JIS”・”EUC-JP”などが挙げられます。
大文字と小文字の違いは区別されません。

accept-charset属性の値には、複数の文字エンコーディングの候補を半角スペースで区切って指定することもできます。

この場合、指定した順にサポートされている文字エンコーディングが使用されることになっています。

<form action=”mail.php” method=”post” accept-charset=”UTF-8″> ~ </form>

name属性はフォームに名前を付ける

name属性はフォームの名前を指定する際に使用します。
name属性の値に空文字を指定することはできません。
また、他のフォーム名と重複しないようにしなくてはなりません。

<form action=”mail.php” method=”post” name=”sample”> ~ </form>

autocomplete属性は自動補完のオンオフを指定する

autocomplete属性はオートコンプリートのオン(on)/オフ(off)、つまり入力欄の自動補完を有効にするかどうかを指定する際に使用します。
初期値はautocomplete=”on”です。
オートコンプリートを無効にする場合にはautocomplete=”off”を指定します。

<form action=”mail.php” method=”post” autocomplete=”off”> ~ </form>

novalidate属性はフォームのバリデーション機能を無効にする

novalidate属性は入力されたデータのバリデーション(妥当性チェック)をしないようにする際に使用します。
HTML5では<input type=”email”>や、 <input type=”url”>などの属性値を指定することができますが、 これらの属性値に対応したブラウザでは、EメールやURLとして妥当ではない内容が入力された場合には バリデーション機能が働いてデータが送信されません。
novalidate属性を指定すると、このバリデーション機能が無効になります。

<form action=”mail.php” method=”post” novalidate=”novalidate”> ~ </form>

form要素は、HTML5ではaccept属性が廃止され、autocomplete属性・novalidate属性が追加されています。

属性

accept-charset属性
送信するデータの文字エンコーディングを指定(UTF-8・Shift_JIS・EUC-JPなど)
action属性
送信先URLを指定
autocomplete属性(初期値はon)
オートコンプリートのオン/オフを指定(on・off)
enctype属性(初期値はapplication/x-www-form-urlencoded)
送信するデータの形式を指定(application/x-www-form-urlencoded・multipart/form-data・text/plain)
method属性(初期値はget)
送信方法(HTTPメソッド)を指定(get・post)
name属性
フォームの名前を指定
novalidate属性
入力されたデータの妥当性を確認しない(novalidate)
target属性
フォーム送信するターゲット先を指定(_blank・_self・_parent・_top・任意のターゲット名)

G

項目なし

H

<head>
<head>

文書のヘッダ情報を表す際に使用します。
ヘッダ情報とは、その文書に関する情報のことです。
head要素を正確に定義するなら、「そのHTML文書に関するメタデータを集めたもの」ということになります。

メタデータとは、その文書に関する情報のことで、 例えば、 <title>(タイトル)・<base>(基準URL)・<link>(リンク情報)・<style>(スタイルシート)・<meta>(メタデータ) などが挙げられます。
これらのメタデータを表すタグは、すべて<head>~</head>の中に配置します。

<header>
<header>
<h1>Library観光ホテル</h1>
<nav>
<ul>
<li><a href=”plan.html”>宿泊プラン</a></li>
<li><a href=”price.html”>料金案内</a></li>
<li><a href=”reserve.html”>宿泊予約</a></li>
<li><a href=”access.html”>交通アクセス</a></li>
</ul>
</nav>
<h2>お知らせ</h2>
<p>期間限定のお得な宿泊プランをご用意しています。</p>
</header>

イントロダクションやナビゲーショングループであることを示す際に使用します。
文書のヘッダ情報を表す<head>タグとは異なりますので注意してください。

<header>の中には、通常は<h1>–<h6>や <hgroup>など、セクションの見出しが含まれることが想定されていますが、必ず必要というわけではありません。
他にも、セクションの目次や検索フォーム、あるいは、関連ロゴをまとめるために<header>タグを使用することができます。

<hr>
<p>吾輩は猫である。名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</p>
<hr>
<p>吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕えて煮て食うという話である。</p>
<p>しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。</p>

ブラウザ上での表示

吾輩は猫である。名前はまだ無い。

どこで生れたかとんと見当がつかぬ。
何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。


吾輩はここで始めて人間というものを見た。
しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。
この書生というのは時々我々を捕えて煮て食うという話である。

しかしその当時は何という考もなかったから別段恐しいとも思わなかった。
ただ彼の掌に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。

段落レベルのテーマの区切り、セクション内における話題の区切りを表す際に使用します。 例えば、物語におけるシーンの変わり目や、参考書のセクション内で別の話題に移る箇所などです。

セクション同士の区切りとなる </section>と<section> の間については、すでにそれ自体でテーマの区切りを表しているので、 <hr> を挿入する必要はありません。

<html>
<html lang=”ja”>

HTML文書であることを示す際に使用します。
<html>~</html>で定義されるhtml要素は、文書のルート(根っこ)となる要素で、HTML文書の内容が始まることを表します。
<html>~</html>の直下には、<head>と<body>がそれぞれ一つづつ必要となります。

html要素には、lang属性で言語を指定することができます。
例えば、日本語の場合はlang=”ja”、英語の場合にはlang=”en”を指定します。

<h1>-<h6>
<h1>みかん</h1>
<p>みかんは果物です。</p>

<section>
<h2>味</h2>
<p>魅力的な味わいです。</p>

<section>
<h3>甘さ</h3>
<p>とっても甘いです。</p>
</section>

</section>

<section>
<h2>色</h2>
<p>みかん色です。</p>
</section>

見出しを付ける際に使用します。
数値が小さいほど高いランクの見出しとなります。
<h1>が最も高位の大見出しで、<h6>が最も低位の小見出しです。
同じ数値のものが複数ある場合には同じランクとなります。

見出しを配置すると暗黙的に新しいセクションを開始したことになります。
セクショニング・コンテンツの要素( <article>・<aside>・<nav>・<section> )の中にある、最初のヘッディング・コンテンツの要素( <h1>・<h2>・<h3>・<h4>・<h5>・<h6> )は、そのセクションの見出しを表します。 そのあとに低いランクの見出しが続く場合には、暗黙的にそのセクションの一部となるサブセクションを開始したものとみなされます。 また、同じランクの見出しや高いランクの見出しが続く場合には、暗黙的に別の新しいセクションを開始したものとみなされます。

一つのセクションの中に複数の見出しを配置すれば、暗黙的にそれぞれがセクションとみなされますが、 明示的にセクションで区切ることが推奨されています。
また、セクション内にはどのランクの見出しでも配置することができますが、 h1要素だけを使用するかセクションの入れ子階層に合ったランクの見出しを配置することが強く推奨されています。

I

<i>
<p>吾輩は猫である。名前はまだ無い。<i>早くつけてくれよ…</i></p>

声や心の中で思ったことなど、他と区別したいテキストを表す際に使用します。

分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前、 その他一般的に印刷される際にイタリック体となるようなテキストです。
その箇所が重要であるという意味や強調する役割はありません。

<i>を使用する際には、より適切な要素がないか検討することが推奨されています。
例えば、強勢する箇所を示す場合には<em>、用語の使用であることを定義する場合には<dfn>のほうが<i>よりふさわしいでしょう。

HTML 4.01ではテキストを斜体(イタリック)にすると定義されていましたが、 HTML5では他と区別したいテキスト・印刷される際にイタリック体となるようなテキストを表すと変更されています。

<iframe>
<iframe sandbox=”allow-same-origin allow-forms allow-scripts” src=”http://maps.example.com/embedded.html”></iframe>

インラインフレームを作る際に使用します。
インラインフレームとは、文書内に別の文書などの閲覧コンテンツを入れ子に配置したもののことです。

src属性は文書内に別の文書をフレーム表示する際に使用します。
src属性の値にはフレーム表示する文書のURLを指定します。

HTML5では、frameborder属性・marginheight属性・marginwidth属性・scrolling属性・longdesc属性が廃止されています。
一方で新しくsrcdoc属性・sandbox属性・seamless属性が追加されています。

フレーム表示する内容をsrcdoc属性の値として指定

srcdoc属性は、フレーム表示する内容を属性値として指定する際に使用します。
指定する内容の中にダブルクォーテーション( ” )などの引用符が出てくる場合には"とエスケープします。
また、アンパサンド( & )が出てくる場合には、&amp;と二重エスケープする必要があります。

src属性とsrcdoc属性を同時に指定した場合には、srcdoc属性が優先されます。
srcdoc属性を使用すれば、インラインフレーム用の別文書を用意する必要が無くなりますが、 srcdoc属性がサポートされていないブラウザを考慮するなら、 別文書を用意してsrc属性も指定してやるとアクセシビリティーが高まるでしょう。

フレーム内コンテンツの表示にsandbox属性で制限を加える

sandbox属性は悪意あるコンテンツから被害を受けるのを避けるために、フレーム内コンテンツの表示に制限を加える際に使用します。
sandbox属性を指定すると、そのフレームのコンテンツは出処が別個のものと見なされてフォーム・スクリプト・他の閲覧コンテンツへのリンク・プラグインが無効となります。

sandbox属性の値として指定できるのは、allow-same-origin・allow-forms・allow-scriptsの3種類です。

allow-same-origin
フレーム内のコンテンツの出処が、親ページと同じものとされる。
allow-forms
フレーム内のコンテンツのフォームを有効にする。
allow-scripts
フレーム内のコンテンツのスクリプトを有効にする。ただし、ポップアップは無効。

以下の使用例ではsandbox属性に3つの値すべてを指定しています。
この場合フレーム内のコンテンツの出処は同じものと見なされ、フォームとスクリプトは有効になります。
ただし、ポップアップとプラグインは無効となります。

<iframe sandbox=”allow-same-origin allow-forms allow-scripts” src=”http://example.com/”></iframe>

seamless属性を指定すると、親ページの一部のように表示させられる

seamless属性はフレーム内のコンテンツを、あたかも親ページの一部のように表示させる際に使用します。
サポートされたブラウザでは、それがフレームかどうか一見しただけでは分からないような境界線の無い表示になると思われます。

逆に言えばseamless属性が無ければインラインフレームには境界線が表示されるということになるのかもしれません。(HTML5ではframeborder属性が廃止されているので)

<iframe>~</iframe>の内容は何も意味を持たない

HTML4.01では<iframe>~</iframe>の間には、 インラインフレームをサポートしていない環境向けの内容を記述することになっていました。
HTML5では<iframe>~</iframe>に内容を指定しても、何も意味を持たないことになっています。

ただし、インラインフレームをサポートしていない旧いブラウザでは<iframe>~</iframe>の内容がアクセシビリティーの向上に役立つでしょう。
こうした環境に配慮するなら、<iframe>~</iframe>の中に何らかの内容を含めても良いでしょう。

属性

src属性
フレーム表示する文書のURLを指定
srcdoc属性
フレーム表示する内容を属性値として指定
name属性
フレーム名を指定
seamless属性
フレーム内のコンテンツを親ページの一部のように表示
sandbox属性
フレーム内のコンテンツの表示に制限を加える(allow-same-origin・allow-forms・allow-scripts)
width属性
フレームの横幅を指定
height属性
フレームの高さを指定
<img>
<img src=”/images/candy.png” alt=”お菓子のイラスト” title=”いっぱいのお菓子”>

画像を表示する際に使用します。
必須属性のsrc属性で画像ファイルのURLを指定します。

一般的なブラウザで表示できる画像フォーマットとしては、PNG・GIF・JPEGがよく利用されています。
他にもウェブ用のベクター画像フォーマットであるSVGや、単一ページのPDF・アニメPNG・アニメGIFなどをsrc属性の値として指定できます。

alt属性には、画像が利用できない環境向けのテキストを指定します。
HTML5ではalt属性は必須ではありませんが、指定しておけばアクセシビリティーが高まるでしょう。

<img>にtitle属性を指定すると、その値が画像のキャプション情報となります。
また、<legend>を子に持つ<figure>~</figure>の中に、<img>を子として配置した場合には、 その最初の<legend>~</legend>の内容が画像のキャプション情報となります。
ここで言うキャプション情報とは、画像のタイトルや説明のための文字情報のことです。

<input>
<form action=”xxx.php” method=”post”><label>メール(type=”email”):<input type=”email” name=”email”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>URL(type=”url”):<input type=”url” name=”url”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>検索(type=”search”):<input type=”search” name=”search”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>電話(type=”telephone”):<input type=”tel” name=”tel”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>数値(type=”number”):<input type=”number” name=”number”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>日付(type=”date”):<input type=”date” name=”date”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>日時(type=”datetime”):<input type=”datetime” name=”datetime”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>ローカル日時(type=”datetime-local”):<input type=”datetime-local” name=”datetime-local”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>月(type=”month”):<input type=”month” name=”month”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>週(type=”week”):<input type=”week” name=”week”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>時間(type=”time”):<input type=”time” name=”time”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>レンジ(type=”range”):<input type=”range” name=”range”></label><input type=”submit” value=”送信”></form>
<form action=”xxx.php” method=”post”><label>色(type=”color”):<input type=”color” name=”color”></label><input type=”submit” value=”送信”></form>

フォーム(<form>~</form>)を構成する様々な入力部品を作成する際に使用します。

フォーム部品の種類を指定するtype属性

type属性はフォーム部品の種類を指定する際に使用します。
<input>要素はtype属性にどのような値を指定するかによって、 一行テキストボックス・チェックボックス・ラジオボタン・送信ボタン・リセットボタン等、 フォーム部品の種類を指定し分けることができます。
type属性の初期値はtype=”text”(一行テキストボックス)です。

type属性の値

type=”hidden”
画面上は表示されない隠しデータを指定する
type=”text”
一行テキストボックスを作成する(初期値)
type=”search”
検索テキストの入力欄を作成する
HTML5から追加
type=”tel”
電話番号の入力欄を作成する
HTML5から追加
type=”url”
URLの入力欄を作成する
HTML5から追加
type=”email”
メールアドレスの入力欄を作成する
HTML5から追加
type=”password”
パスワード入力欄を作成する
type=”datetime”
UTC(協定世界時)による日時の入力欄を作成する
HTML5から追加
type=”date”
日付の入力欄を作成する
HTML5から追加
type=”month”
月の入力欄を作成する
HTML5から追加
type=”week”
週の入力欄を作成する
HTML5から追加
type=”time”
時間の入力欄を作成する
HTML5から追加
type=”datetime-local”
UTC(協定世界時)によらないローカル日時の入力欄を作成する
HTML5から追加
type=”number”
数値の入力欄を作成する
HTML5から追加
type=”range”
レンジの入力欄を作成する
HTML5から追加
type=”color”
色の入力欄を作成する
HTML5から追加
type=”checkbox”
チェックボックスを作成する
type=”radio”
ラジオボタンを作成する
type=”file”
サーバーへファイルを送信する
type=”submit”
送信ボタンを作成する
type=”image”
画像ボタンを作成する
type=”reset”
リセットボタンを作成する
type=”button”
汎用ボタンを作成する

HTML5ではinput要素のtype属性に指定できる値の種類が増えています。
それぞれの値を指定した場合、例えば<input type=”email”>を指定すると、 この属性値をサポートしているFirefox4・Opera10・Google Chromeなどのブラウザでは、 送信ボタンを押したときに入力されている値がメールアドレスとして妥当かどうかチェックしてくれます。

以下はHTML5で<input>要素のtype属性に追加される値を並べたサンプルソースです。
これらの値を比較的よくサポートしているOperaでは<input type=”date”>などの日付型の値を指定するとカレンダー入力になったり、 <input type=”range”>でレンジ入力を指定すると、マウスで操作できるレンジバーが表示されるなど、 ユーザーの入力補助となるインターフェースが拡張されています。

type属性以外の属性

<input>にはtype属性以外にも多くの属性が用意されています。
これらの属性はtype属性にどの値が指定されているかによって指定できるかどうかが決まります。
例えば入力必須であることを示すrequired属性はtype=”text”やtype=”file”などの場合には指定することができますが、 type=”hidden”などの場合には指定することはできません。

form属性はどのフォームと関連付けるかを指定する際に使用します。
<input>は初期値では直近の親要素となる<form>と関連付けられますが、 <form>のid属性の値と<input>のform属性の値を一致させることで<input>要素を特定のフォームと関連付けることができます。
<input>要素を任意の場所に配置できるので、ウェブアプリケーションなどを制作する際には便利かもしれません。

HTML4.01ではinput要素には揃え位置を指定するalign属性が、非推奨とされながらも用意されていました。
HTML5ではinput要素のalign属性は廃止されています。
揃え位置の指定にはCSSを使用してください。

一方でHTML5では、input要素に新しく autocomplete属性・ autofocus属性・ form属性・ formaction属性・ formenctype属性・ formmethod属性・ formnovalidate属性・ formtarget属性・ height属性・ list属性・ max属性・ min属性・ multiple属性・ pattern属性・ placeholder属性・ required属性・ step属性・ width属性 が追加されています。

また、前述の通りtype属性に指定できる値の種類が増えています。

属性

accept属性
type=”file”の場合に、どのタイプのファイルがサーバ側で受け取ることができるかを指定
alt属性
type=”image”の場合に、画像の代替テキストを指定(type=”image”の場合には必須属性)
autocomplete属性
入力候補を提示して入力内容を自動補完する(on・off・default)(初期値はdefault)
HTML5から追加
autofocus属性
自動フォーカスを指定する(autofocus)
HTML5から追加
checked属性
ラジオボタンやチェックボックスをあらかじめチェック済みにする(checked)
disabled属性
操作を無効にする(disabled)

form属性
どのフォームと関連付けるかを<form>のid名で指定
HTML5から追加
formaction属性
送信先URLを指定
HTML5から追加
formenctype属性
送信するデータの形式を指定(application/x-www-form-urlencoded・multipart/form-data・text/plain)(初期値はapplication/x-www-form-urlencoded)
HTML5から追加
formmethod属性
送信方法(HTTPメソッド)を指定(get・post)(初期値はget)
HTML5から追加
formnovalidate属性
入力されたデータの妥当性を確認しない(formnovalidate)
HTML5から追加
formtarget属性
フォーム送信するターゲット先を指定(_blank・_self・_parent・_top・任意のターゲット名)
HTML5から追加
height属性
type=”image”の場合に、画像の高さを指定
HTML5から追加
list属性
ユーザーに入力候補として提案するデータリストの要素を、その要素のid属性の値で指定する
HTML5から追加
max属性
入力できる最大値を指定する
HTML5から追加
maxlength属性
入力可能な最大文字数を指定
min属性
入力できる最小値を指定する
HTML5から追加
multiple属性
複数の値を入力・選択できるようにする
HTML5から追加
name属性
フォーム部品に名前をつける
pattern属性
正規表現で入力値のパターンを指定する
HTML5から追加
placeholder属性
入力欄に初期表示する内容を指定する
HTML5から追加
readonly属性
ユーザーによるテキスト編集を不可にして読み取り専用にする(readonly)
required属性
入力必須にする
HTML5から追加
size属性
表示文字数を指定(1以上の正の整数)
src属性
type=”image”の場合に、画像ファイルのURLを指定する(type=”image”の場合には必須属性)
step属性
入力欄で刻むステップ値を指定する
HTML5から追加
type属性
フォーム部品の種類を指定する(初期値はtext)
value属性
値を指定
width属性
type=”image”の場合に、画像の幅を指定
HTML5から追加

<form action=”xxxxx.php” method=”post” enctype=”multipart/form-data”>
<p><label>名前:<input type=”text” name=”name” size=”30″ maxlength=”20″></label></p>
<p><label>パスワード:<input type=”password” name=”pass” size=”6″ maxlength=”4″></label></p>
<p>学年:
<label><input type=”radio” name=”gakunen” value=”1″>1年生</label>
<label><input type=”radio” name=”gakunen” value=”2″>2年生</label>
<label><input type=”radio” name=”gakunen” value=”3″>3年生</label>
<label><input type=”radio” name=”gakunen” value=”4″>4年生</label>
<label><input type=”radio” name=”gakunen” value=”5″>5年生</label>
<label><input type=”radio” name=”gakunen” value=”6″>6年生</label>
</p>
<p>好きな課目:
<label><input type=”checkbox” name=”kamoku” value=”kokugo”>国語</label>
<label><input type=”checkbox” name=”kamoku” value=”eigo”>英語</label>
<label><input type=”checkbox” name=”kamoku” value=”sansu”>算数</label>
<label><input type=”checkbox” name=”kamoku” value=”rika”>理科</label>
<label><input type=”checkbox” name=”kamoku” value=”syakai”>社会</label>
<label><input type=”checkbox” name=”kamoku” value=”taiiku”>体育</label>
</p>
<p><label>宿題ファイル:<input type=”file” name=”syukudai”></label></p>
<p>
<input type=”submit” value=”送信”>
<input type=”reset” value=”リセット”>
</p>
</form>


<input autocomplete>
<form action=”xxx.php” method=”post”>
<fieldset>
エリア:
<input type=”text” name=”yourarea” autocomplete=”on” list=”tokyo”>
<datalist id=”tokyo”>
<option value=”渋谷”>
<option value=”新宿”>
<option value=”池袋”>
</datalist><br>
<input type=”submit” value=”送信”>
</fieldset>
</form>

autocomplete属性を指定すると、ユーザーに対して入力候補を提示して内容を自動補完することができます。
例えば、検索キーワード候補の提示のようなインターフェースを実現できます。

入力候補として表示されるデータのリストを指定するには、 HTML5から追加される予定の<datalist>を使用します。
<datalist>はフォームの入力欄などで入力候補となるデータリストを定義します。
各データのリスト項目は<option>で定義します。
<datalist>をサポートしたブラウザでは<option>で指定された値がユーザーに対して入力候補として提案表示されます。

<input>のlist属性の値と<datalist>のid属性の値を同じにして、入力欄とデータリストを関連付けます。

属性

autocomplete
自動補完(オートコンプリート)を指定する
<input autofocus>
<form action=”xxx.php” method=”post”>
<fieldset>
キーワード:
< input type=”search” name=”q” autofocus><br>
<input type=”submit” value=”検索”>
</fieldset>
</form>

autofocus属性を指定すると、ウェブページが表示された際に指定した入力欄にカーソルが当たって自動的にフォーカスされます。

属性

autofocus
自動フォーカスを指定する
<input max>
<form action=”xxx.php” method=”post”>
<fieldset>
人数:
<input type=”number” name=”ninzu” min=”1″ max=”4″> ※1人以上4人以下<br>
<input type=”submit” value=”送信”>
</fieldset>
</form>

min属性とmax属性を指定すると、 数値型や日付型の入力欄で入力できる最小値と最大値を指定することができます。

属性

min
最小値を指定する
max
最大値を指定する
<input min>
<form action=”xxx.php” method=”post”>
<fieldset>
人数:
<input type=”number” name=”ninzu” min=”1″ max=”4″> ※1人以上4人以下<br>
<input type=”submit” value=”送信”>
</fieldset>
</form>

min属性とmax属性を指定すると、 数値型や日付型の入力欄で入力できる最小値と最大値を指定することができます。

属性

min
最小値を指定する
max
最大値を指定する
<input multiple>
<form action=”xxx.php” method=”post”>
<fieldset>
趣味:
<input type=”text” name=”hobby” list=”hobbys” multiple>
<datalist id=”hobbys”>
<option value=”映画”>
<option value=”音楽”>
<option value=”絵画”>
<option value=”読書”>
</datalist> ※複数選択可<br>
<input type=”submit” value=”送信”>
</fieldset>
</form>

ユーザーが複数の値を一度に入力、あるいは選択して送信することができます。
送信される値はカンマ区切りとなります。

属性

multiple
複数の値を入力・選択できるようにする
<input pattern>
<form action=”xxx.php” method=”post”>
<fieldset>
ユーザーID:
<input type=”text” name=”userid” pattern=”^[0-9A-Za-z]+$”> ※半角英数<br>
<input type=”submit” value=”ログイン”>
</fieldset>
</form>

正規表現を使って入力値のパターンを指定することができます。
正規表現が使えることで特定の文字列が含まれているかどうかや、 半角英数・全角文字・ひがらなのみなど入力制限を自由に設定できます。

属性

pattern
正規表現で入力値のパターンを指定する

以下のサンプルは、半角英数で入力されているかどうかのチェックです。

<input placeholder>
<form action=”xxx.php” method=”post”>
<fieldset>
キーワード:
<input type=”search” name=”q” placeholder=”キーワードを入力”><br>
<input type=”submit” value=”検索”>
</fieldset>
</form>

placeholder属性で指定した値が入力欄に初期値として表示されます。
例えばテキストフィールドに初期値として「検索するキーワードを入力してください」などのヒントを示してユーザーの操作を補助することができます。

属性

placeholder
初期表示する内容(プレースホルダー)を指定する
<input required>
<form action=”xxx.php” method=”post”>
<fieldset>
名前:
<input type=”text” name=”yourname” required> ※入力必須<br>
<input type=”submit” value=”送信”>
</fieldset>
</form>

その入力項目が入力必須であることをブラウザに知らせることができます。

属性

required
入力必須を指定する
<input step>
<form action=”xxx.php” method=”post”>
<fieldset>
注文量:
<input type=”number”name=”lot” step=”0.5″> ※単位0.5<br>
<input type=”submit” value=”送信”>
</fieldset>
</form>

数値型や日付型の入力欄で刻むステップ値を指定することができます。

属性

step
ステップ値を指定する
<input type=”button”>
<p>
<input type=”button” value=”前のページへ戻る” onclick=”history.back()”>
</p>

特に機能を持たない汎用ボタンを作成します。

ボタンに表示させる[前のページへ戻る]などのテキストは、value属性で指定します。
また、name属性は送信ボタンに名前を付ける属性ですが<form>でデータが送信される際、 name属性で指定した名前とvalue属性の値が一組になって送信されます。

汎用ボタンはJavaScriptなどと組み合わせて使用されることが多いようです。

type=”button”の場合に指定可能な属性

type=”button”
汎用ボタンを作成する
name属性
ボタンに名前をつける
value属性
ボタンの値(ボタンに表示されるテキスト)を指定する
<input type=”checkbox”>
<form action=”cgi-bin/abc.cgi” method=”post”>
<p>
<input type=”checkbox” name=”riyu” value=”1″ checked=”checked”>面白い
<input type=”checkbox” name=”riyu” value=”2″>役に立つ
<input type=”checkbox” name=”riyu” value=”3″>いまいち
</p>
<p>
<input type=”submit” value=”送信する”>
</p>
</form>

チェックボックスが作成されます。
チェックボックスとは、複数用意された選択肢の中から複数の項目を選択できるボタンのことです。

name属性は選択欄に名前を付ける属性ですが<form>でデータが送信される際、 name属性で指定した名前とvalue属性で指定した値が一組になって送信されます。

checked属性を指定すると、あらかじめその選択肢が選択された状態になります。
HTMLでは単にcheckedと記述することもできますが、 XHTMLの場合にはchecked=”checked”と略さずに記述しなければならないので、 できるだけchecked=”checked”と記述した方が良いでしょう。

尚、用意された選択肢の中からひとつを選択できるボタンを作成するにはtype=”radio”を指定します。

type=”checkbox”の場合に指定可能な属性

type=”checkbox”
チェックボックスを作成する
name属性
フォーム部品に名前をつける
value属性
送信される値を指定する
checked属性
初期値で選択された状態にする(checked)
required属性
選択必須にする
HTML5から追加
<input type=”color”>
<form action=”xxx.php” method=”post”>
<label>色(type=”color”):<input type=”color” name=”color”></label>
<input type=”submit” value=”送信”>
</form>

色の入力欄が作成されます。

name属性は入力欄に名前を付ける属性ですが<form>でデータが送信される際、 name属性で指定した名前と入力された値が一組になって送信されます。

type=”color”の場合、常に何らかの色が選択された状態となり、 ユーザーは空の値を指定することはできません。

type=”color”の場合に指定可能な属性

type=”color”
色の入力欄を作成する
HTML5から追加
name属性
フォーム部品に名前をつける
value属性
送信される値を指定する
autocomplete属性
入力候補を提示して入力内容を自動補完する(on・off・default)(初期値はdefault)
HTML5から追加
list属性
ユーザーに入力候補として提案するデータリストの要素を、その要素のid属性の値で指定する
HTML5から追加
<input type=”date”>
<form action=”xxx.php” method=”post”>
<label>日付(type=”date”):<input type=”date” name=”date”></label>
<input type=”submit” value=”送信”>
</form>

日付の入力欄が作成されます。

name属性は入力欄に名前を付ける属性ですが<form>でデータが送信される際、 name属性で指定した名前と入力された値が一組になって送信されます。

ユーザーは空文字を入力することができます。
入力必須にする場合にはrequired属性を併用してください。

type=”date”の場合、step属性の単位は日、初期値は1となります。

type=”date”の場合に指定可能な属性

type=”date”
日付の入力欄を作成する
HTML5から追加
name属性
フォーム部品に名前をつける
value属性
送信される値を指定する
autocomplete属性
入力候補を提示して入力内容を自動補完する(on・off・default)(初期値はdefault)
HTML5から追加
list属性
ユーザーに入力候補として提案するデータリストの要素を、その要素のid属性の値で指定する
HTML5から追加
max属性
入力できる最大値を指定する
HTML5から追加
min属性
入力できる最小値を指定する
HTML5から追加
readonly属性
ユーザーによるテキスト編集を不可にして読み取り専用にする(readonly)
required属性
入力必須にする
HTML5から追加
step属性
入力欄で刻むステップ値を指定する(type=”date”の場合、単位は日、初期値は1)
HTML5から追加
<input type=”datetime”>
<input type=”datetime-local”>
<input type=”email”>
<input type=”file”>
<input type=”hidden”>
<input type=”image”>
<input type=”month”>
<input type=”number”>
<input type=”password”>
<input type=”radio”>
<input type=”range”>
<input type=”reset”>
<input type=”search”>
<input type=”submit”>
<input type=”tel”>
<input type=”text”>
<input type=”time”>
<input type=”url”>
<input type=”week”>
<ins>
<aside>
<ins datetime=”2013-03-05 00:00Z”>
<p>私は動物が好きです。</p>
</ins>
<ins datetime=”2013-03-05 00:00Z”>
猫はかわいい。
</ins>
<ins datetime=”2014-03-01 00:00Z”>
犬もかわいい。
</ins>
</aside>

追加された部分であることを示す際に使用します。

cite属性には、変更について説明する文書がある場合にそのURLを指定します。
cite属性に指定するURLの文書が、例えば会議の議事録のような長い文書になっている場合には、 その文書内のどの部分が変更についての説明なのか分かるように、 id属性で識別子を付けることが推奨されています。

datetime属性は、変更日時を指定する際に使用します。 値はグローバル日時で指定します。

HTML4.01では、ins要素の中にはブロックレベル要素を含めてはいけないことになっていました。
HTML5ではブロックレベル要素という概念自体が廃止されており、<ins>~</ins>の中に<p>を配置することもできるようになっています。
ただし、HTML5ではins要素は、段落の境界にまたがるべきではないとされています。

J

項目なし

K

<kbd>
<p><kbd>Tab</kbd>という文字列を入力してください。</p>
<p><kbd><kbd>Tab</kbd></kbd>キーを1回押してください。</p>

ユーザーが入力する内容であることを示す際に使用します。
主にキーボード入力ですが、音声コマンドなどの他の方法による入力を表すために使用されることもあるでしょう。

HTML5ではsamp要素との入れ子関係や、kbd要素同士を入れ子にするかどうかで以下のように意味が定義されています。

<samp>~</samp>の中に<kbd>を配置した場合には、システムによって返された入力内容を表します。
<kbd>~</kbd>の中に<samp>を配置した場合には、呼び出しメニューなどのシステム出力からの入力内容を表します。
<kbd>~</kbd>の中にさらに<kbd>を配置した場合には、キーボードのキーなどの入力の一単位を表します。

例えば、ユーザーにShiftという文字列を入力してもらいたい場合と、 [Shift]キーを押してもらいたい場合と、 [S][h][i][f][t]という5つのキーを順に押してもらいたい場合は、 <kbd>タグの入れ子の仕方でマークアップし分けることができます。

<keygen>
<form action=”processkey.cgi” method=”post” enctype=”multipart/form-data”>
<p><keygen name=”key”></p>
<p><input type=submit value=”キーを送信する”></p>
</form>

key generatorの略でフォーム送信時にキーを発行して暗号化する際に使用します。

キーが発行される場合には、秘密キーと公開キーがペアで発行されます。
秘密キーはローカル環境に保存され、公開キーはサーバーに送信されます。
この仕組みにより、クライアント認証がより確実となり情報送信の安全性が高まるでしょう。

尚、keytype属性では暗号化の種類を指定することができますが、HTML5の仕様ではブラウザがサポートするべき暗号方式は決められていません。
ブラウザによってはどの暗号方式もサポートされていないこともありえます。

keytype属性で指定できる可能性のある値としてはrsaなどが挙げられます。
RSAとは公開鍵暗号方式の標準として普及している暗号アルゴリズムの名称です。
RSAでは巨大な数の素因数分解が困難なことを利用してデータを暗号化します。

keygen要素は、HTML5から新たに追加された要素です。

属性

autofocus属性
オートフォーカスする
challenge属性
送信されるキーと一緒にパッケージする値を指定する
disabled属性
キーを操作不能にする
form属性
<form>要素と関連付ける
keytype属性
暗号化の種類を指定する(rsaなど、指定できる値はブラウザによる)
name属性
キーに名前を付ける

L

<label>
<form action=”mail.php” method=”post”>
<p><label for=”namae”>名前:</label><input type=”text” name=”name” id=”namae” size=”40″></p>
<fieldset disabled=”disabled”>
<legend>性別</legend>
<p><label for=”dansei”>男性</label><input type=”radio” name=”sex” id=”dansei” value=”male”></p>
<p><label for=”jyosei”>女性</label><input type=”radio” name=”sex” id=”jyosei” value=”female”></p>
</fieldset>
<fieldset>
<legend>趣味</legend>
<p><label><input type=”checkbox” name=”hobby” value=”sports”>スポーツ</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”reading”>読書</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”music”>音楽</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”travel”>旅行</label></p>
</fieldset>
<p><input type=”submit” value=”送信”><input type=”reset” value=”リセット”></p>
</form>

<p><label form=”magazine”>よろしければ、メールマガジンにご登録ください。<br>
<input type=”text” name=”email” size=”40″></label></p>
<form id=”magazine” action=”magazine.php” method=”post”>
<p><input type=”submit” value=”メルマガ登録!”></p>
</form>

フォーム部品と項目名(ラベル)を関連付ける際に使用します。
また、フォーム部品以外にも、ユーザー・インタフェースの項目名(ラベル)を指定する際に使用することもできます。

フォーム部品とラベルを関連付けるには、<label>タグのfor属性の値とフォーム部品のid属性の値を一致させるか<label>~</label>の中にフォーム部品を配置するかのいずれかの方法で指定します。

<label>タグを使用してフォーム部品とラベルを関連付けることで、 一般的なブラウザではラベル部分をクリックすると、関連付けられているフォームの入力欄がフォーカスされたり、 ラジオボタンやチェックボックスが選択されるようになります。

label要素は、HTML5では新しくform属性が追加されています。

<label>のform属性の値と<form>のid属性の値を一致させることで、 離れた場所に配置した別セクションの<form>など、 直接の親要素以外の<form>とラベルを関連付けることができます。

属性

form属性
form要素とラベルを関連付ける
for属性
フォーム部品とラベルを関連付ける
<legend>
<form action=”mail.php” method=”post”>
<p><label>名前:<input type=”text” name=”name” size=”40″></label></p>
<fieldset disabled=”disabled”>
<legend>性別</legend>
<p><label><input type=”radio” name=”sex” value=”male”>男</label></p>
<p><label><input type=”radio” name=”sex” value=”female”>女</label></p>
</fieldset>
<fieldset>
<legend>趣味</legend>
<p><label><input type=”checkbox” name=”hobby” value=”sports”>スポーツ</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”reading”>読書</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”music”>音楽</label></p>
<p><label><input type=”checkbox” name=”hobby” value=”travel”>旅行</label></p>
</fieldset>
<p><input type=”submit” value=”送信”><input type=”reset” value=”リセット”></p>
</form>

フォームの入力項目グループにキャプション(タイトルや説明)を付ける際に使用します。

<legend>を使用する場合には、<fieldset>~</fieldset>の中の先頭に配置します。
<legend>を<fieldset>~</fieldset>の中の先頭に配置すると、 親要素となる<fieldset>で定義されたフォーム部品グループのキャプションを表します。

legend要素は、HTML4.01では揃え位置を指定するalign属性が非推奨とされながらも用意されていましたが、HTML5では廃止されています。
揃え位置を指定するにはCSSを使用してください。

<li>
<h1>人気の競走馬</h1>
<ol>
<li>ヒシアマゾン</li>
<li>メジロドーベル</li>
<li>ファレノプシス</li>
</ol>

<li>タグはlist itemの略で、リストの項目を記述する際に使用します。

li要素は、ol要素・ul要素・menu要素のいずれかの子要素として使用した場合には、その親要素のリスト項目となってお互いに関連しますが、 それ以外に配置された場合には他のli要素とは無関係となります。

li要素のvalue属性は親要素がol要素の場合にのみ有効となる属性ですが、value属性を使用するとリスト項目の順序を整数で指定することができます。
value属性には初期値はありません。

<link>
<link rel=”stylesheet” href=”style.css”>

リンクする外部リソースを指定する際に使用します。
外部リソースとは、例えば、HTMLファイル、CSSファイル、RSSファイルなど、現在の文書ファイルに関連している外部ファイルのことです。
<link>タグは、<head>~</head>の中に記述します。

<link>タグを指定する場合には、href属性とrel属性が必須です。
href属性とrel属性が指定されていない場合には、<link>タグの指定は無効となります。
href属性には、リンクする外部ファイルのURLを指定します。

rel属性にはリンクタイプを指定します。
具体的には、現在のファイルとリンク先の外部ファイルとの関係性を表すキーワードを指定します。

M

<main>
<main>

  <h1>...</h1>

  <article>
  <h2>...</h2>
  <p>... </p>
  <p>... </p>
  </article>

  <article>
  <h2>...</h2>
  <p>... </p>
  <p>... </p>
  </article>

</main>

ドキュメントやアプリケーションのbodyのメインコンテンツを表します。
メインコンテンツの領域は、ドキュメントの中心的なトピックやアプリケーションの中心的な機能性に直接的に関係したり、それらから発展させるようなコンテンツから構成されます。

main要素はセクショニング・コンテンツではありませんので、ドキュメントのアウトラインに影響を与えません。

ドキュメントのメイン・コンテンツの領域は、そのドキュメントに特有のものであり、サイト・ナビゲーション・リンク、コピーライト情報、サイト・ロゴ、バナー、検索フォームといったドキュメントのあちらこちらで見られるコンテンツを除きます(ドキュメントやアプリケーションの主たる機能が検索フォームである場合は、その限りではありません)。

コンテンツのキーボード・ナビゲーションをサポートしているユーザーエージェントは、main要素へナビゲートする機能を提供し、一度ナビゲートされたらフォーカス順で次の要素がそのmain要素の中にある最初のフォーカス可能要素となるようにすることが、強く推奨されます。
これは、キーボード・ユーザーがナビゲーション・リンクといったコンテンツのブロックをバイパスする簡単な機能を提供することになるでしょう。

ウェブ制作者はドキュメントに二つ以上のmain要素を入れてはいけません。
ウェブ制作者は、article, aside, footer, header, nav要素の子孫としてmain要素を入れてはいけません。

main要素は、ドキュメントやアプリケーションのサブ・セクションのメイン・コンテンツ領域を特定するために使うには適切ではありません。
もっとも簡単な解決策は、サブ・セクションのメイン・コンテンツを一切マークアップせず、はっきりさせずにそのままにしておくだけでよいのです。
ウェブ制作者は必要に応じてグルーピング・コンテンツやセクショニング・コンテンツ要素を使うことができるでしょう。

<map>
<img src=”images/area.gif” usemap=”#sample” alt=”サンプル” width=”384″ height=”128″>
<map name=”sample”>
<area href=”aaa.htm” shape=”rect” alt=”四角形” coords=”15,19,126,104″>
<area href=”bbb.htm” shape=”circle” alt=”円形” coords=”197,69,54″>
<area href=”ccc.htm” shape=”poly” alt=”多角形” coords=”306,12,261,109,378,92″>
</map>

イメージマップを作成する際に使用します。
イメージマップとは、画像や外部リソースの特定領域に、四角形・円形・多角形などの形状でリンクを設定したものです。
一般的には一枚の画像に複数のリンクを設定する場合などによく利用されています。

イメージマップを作成するには<map>~</map>の中に、子要素として<area>を配置します。
<area>のhref属性でリンク先URLを、shape属性でリンク領域の形状を、coords属性でリンク領域の座標を指定します。

<map>のname属性はイメージマップに名前を付けるための必須属性です。
<map>のname属性の値と、<img>や<object>のusemap属性の値を一致させることで、 イメージマップと画像や外部リソースを関連付けます。
<map>のname属性の値には、スペース文字を含めてはいけません。

HTML5では、map要素にid属性を指定する場合にはname属性と同じ値を指定しなくてはならないとされています。

属性

name属性
イメージマップの名前を指定
<mark>
<mark>目立たせたい</mark>場所を囲みます。

文書内の該当テキストをハイライトして目立たせる際に使用します。<strong>や<em>のようにその部分を強調することが目的ではなく、ユーザーが参照しやすいように目立たせることが目的です。

<mark>は、作者が重要と考えている箇所ではなく、ユーザーの操作に関連している箇所に使用します。例えば、検索結果画面で文書中の検索ワード部分をハイライト表示する場合などに適しています。

HTML5から新たに追加された要素です。

<menu>
<menu type=”toolbar”>
<li>
<menu label=”ファイル”>
<button type=”button” onclick=”fnew()”>新規作成</button>
<button type=”button” onclick=”fopen()”>開く</button>
<button type=”button” onclick=”fsave()”>上書き保存</button>
<button type=”button” onclick=”fsaveas()”>名前を付けて保存</button>
</menu>
</li>
<li>
<menu label=”編集”>
<button type=”button” onclick=”ecopy()”>コピー</button>
<button type=”button” onclick=”ecut()”>切り取り</button>
<button type=”button” onclick=”epaste()”>貼り付け</button>
</menu>
</li>
<li>
<menu label=”ヘルプ”>
<li><a href=”help.html”>ヘルプ</a></li>
<li><a href=”about.html”>このウェブサイトについて</a></li>
</menu>
</li>
</menu>

操作メニューを作成する際に使用します。
サブメニューをメインメニューで入れ子にして、階層メニューにすることもできます。

<menu>はHTML 4では非推奨でしたが、HTML5ではコマンドのリストを示すという役割があり<command>タグとの組み合わせによるユーザーメニューの作成など、使用範囲も広がるようです。

type属性は宣言するメニューの種類を指定します。
指定できるメニューの種類は、context(コンテキストメニュー)、toolbar(ツールバー)です。
また、type属性を省略した場合にはlist(リスト状態)となり<menu>要素がコマンドの単なるリストに過ぎないことを示します。

label属性はメニューにラベル(項目名)を付けます。
このラベルは、例えば入れ子にされた階層メニューを、ブラウザがユーザーインターフェースとして表示する場合などにサブメニューのラベルとして使用されます。

menu要素は、HTML5から新たに追加された要素です。

属性

type属性
メニューの種類を指定する(context、toolbar)
label属性
メニューにラベル(項目名)を付ける

以下のサンプルでは<li>タグを使用して操作メニューの項目を示していますが、より詳細にコマンドの種類などを指定する場合には<command>タグを使用します。

<menu type=”toolbar”>
<li>
<menu label=”ファイル”>
<button type=”button” onclick=”fnew()”>新規作成</button>
<button type=”button” onclick=”fopen()”>開く</button>
<button type=”button” onclick=”fsave()”>上書き保存</button>
<button type=”button” onclick=”fsaveas()”>名前を付けて保存</button>
</menu>
</li>
<li>
<menu label=”編集”>
<button type=”button” onclick=”ecopy()”>コピー</button>
<button type=”button” onclick=”ecut()”>切り取り</button>
<button type=”button” onclick=”epaste()”>貼り付け</button>
</menu>
</li>
<li>
<menu label=”ヘルプ”>
<li><a href=”help.html”>ヘルプ</a></li>
<li><a href=”about.html”>このウェブサイトについて</a></li>
</menu>
</li>
</menu>

<meta>

その文書に関する情報(メタデータ)を指定する際に使用します。
メタデータとは、”情報に関する情報”のことですが、HTMLの仕様では”その文書に関する様々な情報”を意味します。

HTML文書のメタデータは<head>~</head>の中に、 <title>(タイトル)・<base>(基準URL)・<link>(リンク情報)・<style>(スタイルシート)・<script>(スクリプト)などのタグで指定しますが、 これらのタグで表現できないその他の様々なメタデータは<meta>で表します。

<meta>タグは<head>~</head>の中に配置します。
meta要素を指定する際には、 name属性、http-equiv属性、charset属性のうち、少なくとも一つを指定する必要があります。
また、name属性、http-equiv属性を指定する際には、必ずcontent属性とセットで利用します。
セットで利用することでメタデータの定義(名前)とその内容が関連付けられます。

charset属性
<meta charset=”UTF-8″>

文書の文字エンコーディングを指定する際に使用します。

name=”keywords”
<meta name=”keywords” content=”キーワード1,キーワード2,キーワード3″>

そのHTML文書がどのような内容を示したものかキーワードで指定します。
複数のキーワードを指定する場合には、半角カンマ( , )区切りで指定します。

name=”description”
<meta name=”description” content=”サイトの説明文”>

その文書の説明を短文で指定します。
ここで指定する値はGoogleの検索結果に表示されるなど、多くの検索エンジンで利用されるので慎重に言葉を選んでください。

name=”robots” content=”noindex,nofollow”
<meta name=”robots” content=”noindex,nofollow”>

検索エンジンのクローラ(ロボット)に対して URLをインデックスしないように(noindex)、文書内のリンクをたどらないように(nofollow)知らせるための指定です。
この指定はすべての検索エンジンに対して有効ではなく、 この情報を参照する検索エンジンに対してのみ有効となる指定なので注意してください。
検索エンジン対策として一般的に利用されていますが、W3Cの仕様には記載されていません。

name=”author”
<meta name=”author” content=”管理者名”>

文書の作者の指定

<meter>
<p>
残りは
<meter value=”6″ max=”8″>全8個中6個</meter>
です。
割合では
<meter value=”75″ min=”0″ max=”100″>七割五分</meter>
となります。
グラフでもご確認いただけます。
<meter value=”0.75″><img alt=”75%” src=”images/graph75.png”></meter>
</p>

下限や上限などがあらかじめ分かっている規定範囲内の測定値を示す際に使用します。
例えばディスク使用量、検索結果の関連性、候補者の得票などです。
測定値は必須属性のvalue属性で指定します。

value属性以外にも下限・上限・低い・高い・最適とされる値を指定する属性が用意されています。
これらの属性は必須属性ではありませんが、下限と上限を指定しない場合には範囲が0~1と見なされます。
この場合value属性で指定する値を0~1の範囲内にする必要があります。

測定値は<meter>タグのvalue属性で指定しますが、<meter>タグをサポートしていないブラウザを使用しているユーザーにも分かるように、<meter>~</meter>の中にも測定状況をテキストで記述することが推奨されています。

尚、<meter>タグは進行状況を示すのに使用するべきではありません。
そのような目的には<progress>タグを使用してください。
また、最大値が分かっていない場合の体重や身長など範囲がはっきりしない値に<meter>タグを使用するのも誤りです。

meter要素は、HTML5から新たに追加された要素です。

属性

value属性
測定された実際の値(※必須属性)
min属性
下限の値
max属性
上限の値
low属性
「低い」とされる境界
high属性
「高い」とされる境界
optimum属性
「最適」とされる値

以下のサンプルでは、3つの<meter>タグが使用されています。
それぞれvalue属性で指定されている数値は異なりますが、いずれも全体の3/4であることを示しています。

N

<nav>
<nav>
<h1>メニュー</h1>
<ul>
<li><a href=”index.html”>トップページ</a></li>
<li><a href=”item.html”>商品一覧</a></li>
<li><a href=”shop.html”>店舗紹介</a></li>
</ul>
</nav>

ナビゲーションであることを示す際に使用します。
ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのことです。

他のページにリンクした箇所のすべてを<nav>~</nav>で囲む必要はなく、主要なナビゲーションとなるセクションのみを示すのに適しています。

<noscript>
<script>
today = new Date();
document.write(today);
</script>
<noscript>
<p>このページではJavaScriptを使用しています。</p>
</noscript>

スクリプトが動作しない環境用の表示内容を指定する際に使用します。

ユーザーによってはJavaScriptなどのスクリプトを無効にしていたり、スクリプトをサポートしていないユーザーエージェントを使用している場合があります。
こうしたスクリプトが無効な環境ではnoscript要素の内容が表示されます。
スクリプトが有効な環境ではnoscript要素の内容は何も表示されません。

尚、XML文書ではnoscript要素を使用することはできません。
noscript要素はXHTML構文の中で使用しても有効とはなりません。
HTML構文の中でのみ有効となります。

HTML4.01ではnoscript要素をhead要素内に配置することは仕様として認められていませんでしたが、HTML5ではhead要素内に配置してもよいことになっています。
また、HTML5ではnoscript要素がhead要素内にある場合にはnoscript要素の中にlink要素、style要素、meta要素を配置してもよいことになっています。

O

<object>
<p>マウスを乗せると反応するFlashです。</p>
<object data=”images/wave.swf” width=”400″ height=”300″>
<p>ご覧の環境では、object要素がサポートされていないようです。embed要素で表示します。</p>
<embed src=”images/wave.swf”>
</object>

文書に外部リソースを埋め込む際に使用します。
<embed>がプラグインを必要とするデータを埋め込むのに対して、 <object>には外部リソース全般を指定することができます。

<object>タグで指定された外部リソースは、データのタイプにより、 画像、入れ子の閲覧コンテンツ、プラグインで処理されるデータのいずれかとして扱われます。

data属性は文書に埋め込む外部リソースのURLを指定する際に使用します。
また、type属性は外部リソースのタイプを指定する際に使用します。
data属性とtype属性は、最低限どちらか一つを指定する必要があります。

<object>タグでプラグインデータを埋め込むと、そのデータの種類に応じてプラグインが呼び出されます。
この際、<object>~</object>の中に<param>を配置しておくと、 呼び出されるプラグインのパラメータを指定することができます。

また、<object>~</object>の中には<object>タグがサポートされていない環境用の内容を指定することができます。
例えば<object>~</object>の中に<embed>でも同じ内容を指定しておくと、動画などが再生される確率が高まるかもしれません。
ちなみにembed要素は空要素であり、終了タグがありません。
従って<embed>タグがサポートされていない環境用の内容を指定することはできません。

HTML5ではalign属性・ archive属性・ border属性・ classid属性・ codebase属性・ codetype属性・ declare属性・ hspace属性・ standby属性・ vspace属性が廃止されています。
一方で、新しくform属性が追加されています。

属性

data属性
外部リソースのURLを指定
type属性
外部リソースのMIMEタイプを指定
name属性
外部リソースの名前を指定
usemap属性
イメージマップを利用する場合に、利用するイメージマップ名を指定
form属性
フォーム要素と関連付ける場合に指定
width属性
外部リソースの幅を指定
height属性
外部リソースの高さを指定
<ol>
<ol style=”list-style-type: upper-roman”>
<li>いちご</li>
<li>人参</li>
<li>サンダル</li>
</ol>

ブラウザ上での表示

  1. いちご
  2. 人参
  3. サンダル

<ol>タグはordered listの略で、順序のあるリストを表示する際に使用します。
リスト項目は<li>タグで指定します。

<ol>タグで作成されるのは順序のあるリストなので、リスト項目の順序を変えると文書の意味が変わってしまうはずです。
順序のないリストを作成する際には<ul>タグを使用してください。

HTML5では、ol要素のtype属性は廃止されています。
リストマーカーのスタイルを指定する際には、CSSのlist-style-typeプロパティを使用してください。

<optgroup>
<form action=”xxxxxx.php” method=”post”>
<p>
ご希望の旅行コースを選択してください。(※現在、宿泊コースはすべて満室となっています。)
</p>
<p>
<label>旅行企画名:
<select name=”course”>
<option selected>▼旅行コースを選択してください</option>
<optgroup label=”ご宿泊” disabled>
<option value=”stay01″>【一泊二日】和食・温泉コース</option>
<option value=”stay02″>【一泊二日】洋食・温泉コース</option>
<option value=”stay03″>【一泊二日】食べ放題・温泉コース</option>
</optgroup>
<optgroup label=”お食事とご入浴”>
<option value=”lunch01″>【日帰り】和食・温泉コース</option>
<option value=”lunch02″>【日帰り】洋食・温泉コース</option>
<option value=”lunch03″>【日帰り】食べ放題・温泉コース</option>
</optgroup>
<optgroup label=”ご入浴のみ”>
<option value=”spa01″>【日帰り】温泉Aコース</option>
<option value=”spa02″>【日帰り】温泉Bコース</option>
<option value=”spa03″>【日帰り】名湯めぐりコース</option>
</optgroup>
</select>
</label>
</p>
<p>
<input type=submit value=”確認画面へ進む”>
</p>
</form>

<option>タグで作成する選択肢をグループ化する際に使用します。
<optgroup>~</optgroup>の中に<option>を配置することで、 選択肢をグループ化することができます。

label属性は選択肢グループにラベル(項目名)を付ける属性で、必ず指定する必要があります。
label属性は必須属性なので、<optgroup>で指定する選択肢グループは必ずグループ名を持つことになります。

disabled属性は<option>タグで作成する選択肢をグループごと無効にする場合に使用します。
選択肢を個別に無効にする場合には、<optgroup>ではなく<option>にdisabled属性を指定します。

optgroup要素はHTML4.01からHTML5へのバージョンアップで大きな変更はありません。

属性

disabled属性
操作を無効にする(disabled)
label属性(必須属性)
選択肢グループにラベル(項目名)を付ける
<option>
<p>
<label for=”language”>言語を選択してください:</label>
<select id=”language” name=”language”>
<option value=”en”>英語</option>
<option value=”de” disabled>ドイツ語</option>
<option value=”fr”>フランス語</option>
<option value=”ja” selected>日本語</option>
<option value=”zh”>中国語</option>
</select>
</p>
<p>
<label for=”q”>検索ワード:</label>
<input type=”search” id=”q” name=”q” autocomplete=”on” list=”keywords”>
<datalist id=”keywords”>
<option value=”ウィキペディア”>ウィキペディア</option>
<option value=”ウィルス対策”>
<option value=”ウィンドウズ”>
</datalist>
</p>

<select>タグで作成するセレクトボックスや、 <datalist>タグで作成する入力候補リストの選択肢を指定する際に使用します。

disabled属性は選択肢を無効にする際に使用します。
<option>の親となる<optgroup>にdisabled属性を指定すると、選択肢グループ全体を無効にすることができます。

label属性は選択肢にラベル(項目名)を付ける際に使用します。
label属性を省略した場合には<option>のテキスト内容がラベルとなります。

value属性は選択肢の値を指定する際に使用します。
value属性を省略した場合には<option>のテキスト内容が値となります。

selected属性は選択肢をあらかじめ選択済みにする際に使用します。

option要素はHTML5ではselect要素だけではなく、datalist要素の選択肢としても利用することができるようになっています。

属性

disabled属性
操作を無効にする(disabled)
label属性
選択肢にラベル(項目名)を付ける
selected属性
選択肢をあらかじめ選択済みにする(selected)
value属性
選択肢の値を指定
<output>
<form>
<fieldset>
お名前:<input type=”text” name=”yourname”><br>
満足度(5段階):
<input type=”range” name=”manzoku” min=”0″ max=”5″>
<output name=”result” onforminput=”value=manzoku.value”></output><br>
<input type=”submit” value=”送信”>
</fieldset>
</form>

計算結果を示す際に使用します。

以下のサンプルは、ユーザーの操作でレンジ入力された結果を<output>タグを使って表示しています。
Opera10などのブラウザで動作を確認できます。

output要素は、HTML5から新たに追加された要素です。

属性

for属性
計算結果の値とそれが何を表しているのかを、ID名で明確に関連付ける
form属性
どのform要素と関連しているのかを明確に示す
name属性
要素に名前を付ける

P

<p>
<section>
<footer>
<p>最終更新日: 2010-04-23</p>
<address>作者: info@htmq.com</address>
</footer>
</section>

<p>タグは、ひとつの段落(パラグラフ)であることを表す際に使用します。
<p>タグは、段落よりもふさわしい要素がある場合には使用するべきではありません。

<param>
<object width=”400″ height=”300″>
<param name=”movie” value=”./sample/cat.swf”>
<param name=”quality” value=”high”>
<param name=”bgcolor” value=”#ffffff”>
<!– object要素がサポートされていない環境向けにembed要素でも指定 –>
<embed src=”./sample/cat.swf” width=”400″ height=”300″ type=”application/x-shockwave-flash”>
</object>

<object>タグで プラグインデータを埋め込んだ際に呼び出されるプラグインのパラメータを指定する際に使用します。

<param>タグは<object>~</object>の中に子要素として配置します。
<param>だけで使用しても、何も意味を持ちません。

name属性でパラメータの名前をvalue属性でその値を指定します。
name属性とvalue属性はどちらも必須属性です。

param要素にはHTML4.01ではtype属性・valuetype属性が用意されていました。
HTML5ではこれらの属性は廃止されています。

属性

name属性
パラメータの名前を指定
value属性
パラメータの値を指定
<pre>
<pre>
<!DOCTYPE html>

<html lang=”ja”>
<head>
<title>サイトタイトル</title>
</head>

<body>
<header>
<h1>タイトル</h1>
<h2>サイト説明</h2>
<nav>
ナビゲーション
</nav>
</header>

<article>
<header>
<h1>アーティクルのタイトル</h1>
<h2>アーティクルの説明</h2>
</header>

<section>
<header>
<h1>セクションのタイトル</h1>
<h2>セクションの説明</h2>
</header>セクションの内容
</section>

<footer>
<small>&copy; 会社名</small>

<address>
メールなどの問い合わせ
</address>
</footer>
</article>
</body>
</html>
</pre>

ブラウザ上での表示

<!DOCTYPE html>

<html lang="ja">
<head>
    <title>サイトタイトル</title>
</head>

<body>
    <header>
        <h1>タイトル</h1>
        <h2>サイト説明</h2>
        <nav>
            ナビゲーション
        </nav>
    </header>

    <article>
        <header>
            <h1>アーティクルのタイトル</h1>
            <h2>アーティクルの説明</h2>
        </header>

        <section>
            <header>
                <h1>セクションのタイトル</h1>
                <h2>セクションの説明</h2>
            </header>セクションの内容
        </section>

        <footer>
            <small>&copy; 会社名</small>

            <address>
                メールなどの問い合わせ
            </address>
        </footer>
    </article>
</body>
</html>

半角スペースや改行をそのまま表示する際に使用します。
<pre>とはpreformatted textの略で、日本語では「フォーマット(整形)済みのテキスト」という意味になります。
つまり、見やすいように半角スペースや改行などで形が整えられたテキストのことです。

<pre>~</pre>で囲まれた範囲のソースは 半角スペース・改行などがそのまま表示されるため、 <pre>タグはHTMLソースやプログラムのソースコードをそのまま表示したりアスキーアートを表示する場合などに使用されます。

ただし<pre>~</pre>の中でもタグは解釈されるため、HTMLソースをそのまま表示したい場合には、< と > を、&lt; と &gt; に置き換える必要があります。 また、HTML構文の中では、<pre>の開始タグの直後の改行は取り除かれるので注意してください。

プログラムのソースコードを表す場合には、<pre>と<code>を組み合わせて使用するのが一般的です。

<progress>
<section>
<h2>動画のダウンロード</h2>
<p>進行状況:<progress max=”100″>現在、動画をダウンロード中です。</progress></p>
</section>

タスク完了までの進行状況を示す際に使用します。
タスクがどれだけ完了したかをvalue属性で、タスク全体でどれだけ作業が必要かをmax属性で指定します。

value属性とmax属性が存在する場合には、どちらも0以上の数値となります。
また、value属性の値はmax属性の値以下となります。
単位は任意で特に決められていません。

上記2つの属性を使えば、タスクの進行状況を指定することはできますが<progress>タグをサポートしていないブラウザを使用しているユーザーにも進行状況が分かるように<progress>~</progress>の中にも、テキストで進行状況を記述することが推奨されています。

尚、ディスク使用量の表示など何かを計測するのに<progress>タグを使用するのは不適切です。
このような場合には、<meter>タグを使用してください。

以下のサンプルはごく簡単なHTMLソースですが、JavaScriptなどと組み合わせてより高機能なプログレスバーを作成しても良いでしょう。

progress要素は、HTML5から新たに追加された要素です。

属性

value属性
タスクがどれだけ完了したかを指定する
max属性
タスク全体でどれだけ作業が必要かを指定する
form属性
どのform要素と関連しているのかを明確に示す

Q

<q>
<q>智に働けば角が立つ。情に棹させば流される。意地を通せば窮屈だ。</q>

他の情報源からの引用句・引用文であることを表す際に使用します。

cite属性には、引用元のアドレスが存在する場合にそのURLを指定します。

ダブルクォーテーション( ” )などの引用符は、ユーザーエージェントが自動的に挿入することになっているので、<q>~</q>の中やその前後には引用符を入れないようにしてください。
最近の一般的なブラウザでは、「 」や” ”などの引用符で囲まれて表示されます。

ただし、引用符を挿入させることを目的に、引用句・引用文ではない内容に<q>を使ってはいけません。
例として、皮肉を込めた表現の部分を引用符で囲んで表示させるために、<q>~</q>で囲むのは不適切な使い方です。

引用句・引用文は必ず<q>~</q>で囲まなくてはならないということはありません。 <q>タグを使用することなく引用符で囲んでも間違いではありません。

R

<rp>
<ruby><rb>仏蘭西</rb><rp>(</rp><rt>フランス</rt><rp>)</rp></ruby>

ルビを囲む記号を指定する

<rt>
<ruby><rb>独逸</rb><rp>(</rp><rt>ドイツ</rt><rp>)</rp></ruby>

ルビのテキストを指定する

<ruby>
<ruby><rb>亜米利加</rb><rp>(</rp><rt>アメリカ</rt><rp>)</rp></ruby>

<ruby>・<rt>・<rp>は ルビをふる際に使用します。

<rt>はRuby Textの略でルビのテキストを、 <rp>はRuby Parenthesesの略でルビのテキストを囲む括弧等の記号を、それぞれ指定します。
<rt>と<rp>は<ruby>~</ruby>の中で子要素として使用します。

<rp>~</rp>の内容は<ruby>タグに対応したブラウザでは無視されます。
<ruby>タグに対応していないブラウザでは、仏蘭西(フランス)のように表示されます。

<ruby>・<rt>・<rp>は、すでにInternet Explorer5以降で先行採用されていますが、HTML5では標準仕様となります。
ただし、Ruby Baseの略でルビをふる対象となる文字本体を示す<rb>は採用されない予定です。
HTML5では、<rb>タグは省略して<ruby>~</ruby>内に直接ルビベースを記述します。

S

<s>
<s>眠いですね…</s>

すでに正確ではなくなった、すでに関係なくなった内容を表す際に使用します。

<s>は、文書の編集を表す際に使用するのは適切ではないとされています。
削除されたテキスト箇所を表す場合には、<s>ではなく<del>を使用してください。

HTML5では「すでに正確ではなくなった・関係なくなった内容を表す要素」とされ、単なるスタイリング要素から意味のある要素に変更されています。

以下の使用例は商品に新しい特別価格が付けられたという内容です。
通常価格の部分を<s>~</s>で囲んでいますが、このマークアップは”通常価格がすでに関係無くなっている”という意味を表しています。

<p>缶コーヒーがお買い得!</p>
<p><s>通常価格: 1本100円</s></p>
<p><strong>特別価格:1本70円!!</strong></p>

ブラウザ上での表示

缶コーヒーがお買い得!

通常価格: 1本100円

特別価格:1本59円!!

<samp>
<samp>出力サンプルを表します</samp>

プログラムやコンピュータシステムによる出力結果のサンプルであることを示す際に使用します。

例えば、プログラムを実行した際の何らかの出力結果の例や、コンピュータが返す何らかのメッセージの例などです。

<script>
<script src=”sample.js”></script>

文書にJavaScriptなどのスクリプトや、データブロックを組み込む際に使用します。
<script>タグは、<head>~</head>の中に配置することが多いですが、 <body>~</body>の中に配置しても問題ありません。

type属性には、スクリプト言語やデータ形式を指定します。
利用するスクリプトがJavaScriptの場合にはtype=”text/javascript”となりますが、 type属性の初期値はtype=”text/javascript”なので、JavaScriptの場合にはtype属性の指定を省略することができます。
スクリプト言語のタイプがtype=”text/javascript”以外となる場合にはtype属性は必須です。

HTML文書でJavaScriptなどのスクリプトを利用する際には、 HTML文書の<script>~</script>の中にスクリプトを記述するか、src属性で外部スクリプトファイルのURIを指定します。

<section>
<section>
<h1>セクションの見出し</h1>
セクションの内容
</section>

ウェブページ内のその部分が、一つのセクションであることを示す際に使用します。

セクションとは、文書やアプリケーションの一部分となる意味や機能のひとまとまりのことです。
ウェブページ内のセクションとしては、例えば導入部分、新着情報、連絡先などが考えられます。

<section>タグは汎用セクションを表しますが、その定義が漠然としていて使いどころが分かりにくいものの一つです。
<article>、<aside>、<nav>もセクション要素ですが、それぞれ記事、補足情報、ナビゲーションというより具体的な意味を持っています。
それに対して<section>は一般的なセクションを表します。

<section>は一般的なセクションを定義するタグであるため、要素内容を記事として配信する意味合いが強い場合には、<article>を使用することが推奨されています。
また補足情報の場合には<aside>、ナビゲーションの場合には<nav>を使用します。
他にもヘッダに該当する場合には<header>、フッタの場合には<footer>などのタグを使用するほうがウェブページの文書構造がより明確になるでしょう。

セクションは意味的なひとまとまりなので、その部分の意味を表す見出しを付けることができるはずです。
見出しを付けることができない場合には、その部分を<section>~</section>で囲むのは適切ではないかもしれません。
もし<section>タグを使用するべきかどうか迷った際には、その部分に見出しを付けることができるかを考えてみるとセクションとしてふさわしいかどうか判断しやすくなるでしょう。

セクションの見出しは必須ではありませんが、付けるとすれば<section>~</section>の外ではなく中に入れます。

<select>
<p>
<label for=”language”>言語を選択してください:</label>
<select id=”language” name=”language”>
<option value=”en”>英語</option>
<option value=”de”>ドイツ語</option>
<option value=”fr”>フランス語</option>
<option value=”ja” selected>日本語</option>
<option value=”zh”>中国語</option>
</select>
</p>
<p>
<label for=”contact”>ご希望の連絡方法(複数選択可):</label>
<select id=”contact” name=”contact” multiple size=”5″>
<option value=”email” selected>電子メール</option>
<option value=”tel” selected>電話</option>
<option value=”fax” selected>ファックス</option>
<option value=”postal” selected>郵便</option>
<option value=”office”>ご来店時に係員より説明</option>
</select>
</p>

セレクトボックスを作成する際に使用します。
一般的なブラウザでは、ドロップダウン式のセレクトボックスやスクロール式のセレクトウィンドウとして表示されます。

<select>~</select>でセレクトボックス全体を定義して、 その中に<option>タグを配置して個々の選択肢リストを作成します。
<option>タグで作成した選択肢を<optgroup>~</optgroup>で囲むと、選択肢をグループ化することができます。

multiple属性は選択肢を複数選択できるようにする際に使用します。
multiple属性を指定しない場合には、選択肢を1つだけ選択できるようになります。

size属性はユーザーに向けて表示する選択肢の数を指定する際に使用します。
size属性の値として指定できるのは、1以上の正の整数です。
size属性の初期値は、multiple属性を指定している場合には4、multiple属性を指定していない場合には1となります。

尚、選択肢をあらかじめ選択状態にするには<option>タグにselected属性を指定します。

※メモ:<select>は必ずボックスとして表示されるわけではありません。
従って“セレクトボックス”という表現は正確ではありませんが、分かりやすさを優先しています。
正確に解説するなら「select要素は選択肢リストから選択するための操作機能を表す要素です。」となります。

select要素はHTML5ではautofocus属性・form属性が新たに追加されています。

属性

autofocus属性
自動フォーカスを指定する(autofocus)
disabled属性
操作を無効にする(disabled)
form属性
どのフォームと関連付けるかを<form>のid名で指定
multiple属性
選択肢を複数選択できるようにする(multiple)
name属性
セレクトボックスの名前を指定
size属性
表示する選択肢の数を指定(1以上の正の整数)
<small>
<footer>
<small>&copy; 2011 Clockwork</small>
</footer>

ブラウザ上での表示

© 2011 Clockwork

免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目を表す際に使用します。
その箇所が重要であるという意味や強調する役割、反対に重要性を弱める意味などはありません。

<small>はメインコンテンツではなく、あくまで注釈や細目などの短いテキストに使用する要素です。
<small>を複数の段落、複数のリスト、複数のセクションなどの長いテキストに対して使用するべきではありません。
例えば、利用規約がメインコンテンツとなるページで全体を<small>~</small>で囲むような使い方は適切ではありません。

HTML5では注釈や細目を表す要素となり、これまでとは意味が変更されています。

<source>
<video controls autoplay>
<source src=’video.mp4′ type=’video/mp4; codecs=”avc1.42E01E, mp4a.40.2″‘>
<source src=’video.ogv’ type=’video/ogg; codecs=”theora, vorbis”‘>
</video>

動画や音声などのメディアファイルのURLや種類を指定する際に、<video>~</video>などのメディア要素の中で子要素として使用します。
<source>はそれ自身では何も表しません。

メディアファイルのURLは、必須属性のsrc属性で指定します。
<source>を複数記述して、フォーマットの異なる複数のメディアファイルを指定しておくと、ブラウザに再生候補を提示することができます。
ブラウザは記述された順に再生可能なデータを利用するので、より多くの環境で視聴してもらえる可能性が高くなります。

type属性ではメディアファイルのMIMEタイプやコーデックを指定することができます。
type属性を指定することで、ブラウザがメディアファイルを取得する前に再生可能かどうかを知らせることができます。

media属性では、そのメディアファイルがどのメディア向けであるかを指定します。
指定できる値にはscreen、tv、print、auralなどがありますが、指定を省略した場合の初期値はallとなります。

動画の再生についての詳細は、<video>タグのページを参照してください。

source要素はHTML5から新たに追加された要素です。

属性

src属性
メディアファイルのURLを指定する(※必須属性)
type属性
メディアファイルのMIMEタイプやコーデックを指定する
media属性
どのメディア向けであるかを指定する
<span>
<p>
絵の具の
<span style=”background-color: #0099FF”>青色</span>と
<span style=”background-color: #FFFF00″>黄色</span>を混ぜると
<span style=”background-color: #33CC33″>緑色</span>になります。
</p>

ブラウザ上での表示

絵の具の
青色
黄色を混ぜると
緑色になります。

ひとつの範囲として定義する際に使用します。

<span>はそれ自身では何も意味を持っていませんが、style属性・class属性・lang属性・dir属性などの属性と一緒に使用する場合に便利な要素です。
これらの属性と組み合わせることで<span>~<span>で囲まれた範囲にスタイルシートやスクリプトを適用したり、その範囲の言語や表記方向を指定することができます。

lang属性は、言語を指定する際に使用します。
日本語の本文中に部分的に英語が混じる場合などに、読み上げブラウザなどへの影響を考慮して言語を指定します。
lang属性の値は、日本語ならja、英語ならenとなります。

dir属性は、テキストの表記方向を指定する際に指定します。
dir属性の値は、表記方向が左から右ならltr(left-to-right)、右から左ならrtl(right-to-left)となります。

lang属性
言語を指定(日本語ならja、英語ならen)
dir属性
文字表記の方向を指定(左から右ならltr、右から左ならrtl)
<strong>
<strong>警告!</strong>

ブラウザ上での表示

警告!

強い重要性を表す際に使用します。
テキストの一部の重要性を変更しても、文自体の意味は変更されません。

<sytle>
<!DOCTYPE html>
<html lang=”ja”>
<head>
<style>
p.text {color:black; background:yellowgreen;}
p.text em {font-style:normal; color:navy;}
</style>
</head>

スタイルシートを記述する際に使用します。
通常は<head>~</head>の中に配置しますが、 head要素内に記述することで文書単位でスタイルを指定することができます。

style要素のtype属性は、スタイリング言語(スタイルシートのMIMEタイプ)を指定します。
例えば、CSSの場合にはtype=”text/css”となります。
type属性は必須属性ではなく、指定しない場合にはtype=”text/css”がデフォルトで適用されます。

style要素のmedia属性は、どのメディアにどのスタイルを適用するかを指定します。
media属性でメディアの種類を指定することで、 例えばパソコンのスクリーンで表示される場合のスタイル、プリンタで印刷される場合のスタイル、読み上げブラウザで再生される場合のスタイルなどを指定し分けることができます。
W3Cの仕様で規定されているmedia属性の値は以下の通りです。

media属性

all
すべてのメディア(初期値)
screen
一般的なディスプレイ
print
通常のプリンタ
projection
プロジェクタ
tv
テレビ
handheld
ハンドヘルドデバイス
tty
固定文字サイズの端末
embossed
点字プリンタ
braille
点字の触角デバイス
speech
読み上げブラウザ

<style>~</style>の中にスタイルシートを記述する場合、 その内容を<!–と–>でコメントアウトしておくのが一般的です。
これは<style>タグに対応していない旧式のブラウザで、スタイルシートの記述がそのままテキストとして表示されてしまうのを防ぐためですが、現在<style>タグは主要なブラウザでサポートされているので、コメントアウトしなくても問題が起きることはほとんどないでしょう。

HTML5ではstyle要素にscoped属性が追加されています。
scoped属性を指定すると文書全体ではなく、 style要素の親要素、およびその子孫要素に対してのみスタイルが適用されます。

media属性
メディアを指定
type属性
スタイリング言語(スタイルシートのMIMEタイプ)を指定
scoped属性
scoped属性を指定したstyle要素の親要素、および、その子孫要素に対してのみスタイルを適用(HTML5から追加された属性)
<sub>
7番目の座標は(<var>x<sub>7</sub></var>, <var>y<sub>7</sub></var>)です。

ブラウザ上での表示

7番目の座標は(x7, y7)です。

subscriptの略で、下付き文字を表す際に使用します。

<sub>は、特定の意味を持つ表記方法のために使用する要素です。
単に文字が下付きになるという表示の見栄えを目的として<sub>を使用してはいけません。
この要素が無ければ意味が変わってしまう場合にのみ使用します。

数学的表現では、下付き文字や上付き文字がよく使用されます。
数学のマークアップにはMathMLを使用することが推奨されていますが、 精密な数学的マークアップをする必要が無ければ<sub>や<sup>を使うことができます。

変数に下付き文字を持たせる際には<var>~</var>の中に<sub>を配置します。
例えば、X1,X2,X3,…という具合に変数に番号を振って数字部分だけを下付きにしたい場合には<var>X<sub>1</sub></var>という具合にマークアップします。

<summary>
<section>
<h1>動画ファイルのダウンロード</h1>
<details>
<summary>『sample.mp4』をダウンロードしています。</summary>
<dl>
<dt>ファイル名:</dt><dd>sample.mp4</dd>
<dt>ファイル形式:</dt><dd>MPEG-4</dd>
<dt>ファイル容量:</dt><dd>6.55MB</dd>
<dt>画面サイズ:</dt><dd>320×240</dd>
<dt>再生時間:</dt><dd>24秒</dd>
<dt>転送速度:</dt><dd>452KB/秒</dd>
</dl>
</details>
</section>

<summary>の親要素となる<details>の要素内容の要約・キャプション・説明を表します。

summary要素は、HTML5から新たに追加された要素です。

<sup>
エネルギーを求める公式は<var>E</var>=<var>m</var><var>c</var><sup>2</sup>

ブラウザ上の表示

エネルギーを求める公式はE=mc2

superscriptの略で、上付き文字を表す際に使用します。

<sup>は、特定の意味を持つ表記方法のために使用する要素です。
単に文字が上付きになるという表示の見栄えを目的として<sup>を使用してはいけません。
この要素が無ければ意味が変わってしまう場合にのみ使用します。

数学的表現では下付き文字や上付き文字がよく使用されます。
数学のマークアップにはMathMLを使用することが推奨されていますが、 精密な数学的マークアップをする必要が無ければ、<sub>や<sup>を使うことができます。

T

<table>
<table>
<caption>
<strong>お寿司をどこで食べるか?その長所と短所</strong>
<details>
<summary>このテーブルの説明</summary>
<p>以下のテーブルでは、2番目のカラムに寿司店のタイプが入れられています。その左側にそのようなタイプのお店でお寿司を食べる場合の長所が、右側に短所が入れられています。</p>
</details>
</caption>
<thead>
<tr><th>長所</th><th>どこで食べるか</th><th>短所</th></tr>
</thead>
<tbody>
<tr><td>ネタにこだわり、技術が素晴らしい</td><th>銀座の高級店</th><td>値段が時価で不安、予約が必要</td></tr>
<tr><td>値段が良心的、気軽に手に取れる</td><th>回転寿司</th><td>ネタが解凍もの、休みの日は混む</td></tr>
</tbody>
</table>

テーブルを作成する際に使用します。

テーブルの基本的な構造は<table>~</table>の中に<tr>~</tr>で表の横一行を定義して、 さらにその中に<th>~</th>や<td>~</td>でセルを定義します。
テーブルは行(横行)とカラム(縦列)を持ちますが、空の行やカラムを持つことはできません。

テーブルの各セルには見出しを定義するヘッダセル(<th>~</th>)と、 データを定義するデータセル(<td>~</td>)があります。
ヘッダセル内のテキストは一般的なブラウザでは太字でセンタリングされて表示されます。

テーブルのキャプションは<caption>で指定します。
また、テーブルのヘッダ・フッタ・本体は、 <thead>・<tfoot>・<tbody>で定義します。
これらの要素は省略することもできますが、指定しておけばテーブル構造がより明確になるでしょう。

<table>のsummary属性は、表の目的や構造を分かりやすくするための説明・要約を指定する場合に使用します。
表の説明・要約を指定する際には、特に目の不自由な人にとってこれらのテキストが役立つかどうかを考慮する必要があります。
もし、役立たないのであれば、むしろsummary属性は入れないほうが良いでしょう。

また、表の説明・要約をする場合には、必ず<table>のsummary属性を使用しなければならないということはありません。
summary属性の代わりにテーブルの前や後に<p>タグで説明文の段落を添えても良いでしょうし、<caption>~</caption>の中にテーブルの内容が伝わるようなキャプション内容を指定しても良いでしょう。
大切なことは、構造が複雑になりがちなテーブルの内容を様々な環境のユーザーが理解しやすいように配慮することです。
最善の方法はテーブル構造についての説明を記述するのではなく、説明が不要な分かりやすい構造のテーブルを作成することです。

テーブルをレイアウト目的で使用してはいけません。
テーブルでレイアウトを制御すると、 ユーザー環境によっては情報の出力のされ方がでたらめになってしまう場合があるからです。
例えば一般的なブラウザでは見栄え良くまとまっていても、 読み上げソフトで再生すると読み上げ順がバラバラになってしまうかもしれません。
レイアウトが目的の場合にはCSSを使用してください。

table要素には、HTML4.01ではborder属性・cellpadding属性・cellspacing属性・frame属性・rules属性・width属性が用意されていました。
HTML5ではこれらの属性は廃止され、summary属性のみが残されています。

属性

summary属性
表の説明・要約を指定
<tbody>
<table>
<caption>寿司ネタ人気ランキング</caption>
<colgroup span=”1″ style=”width:30px; background-color:#FF9900;”>
<colgroup>
<col span=”2″ style=”width:100px; background-color:#FF3300;”>
<col span=”1″ style=”width:250px; background-color:#FFCC00;”>
</colgroup>
<thead>
<tr><th>順位</th><th>名前</th><th>人気度</th><th>備考</th></tr>
</thead>
<tbody>
<tr><th>1位</th><td>トロ</td><td>☆☆☆☆☆</td><td>やはり何といってもトロ!</td></tr>
<tr><th>2位</th><td>サーモン</td><td>☆☆☆☆</td><td>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th>3位</th><td>うに</td><td>☆☆☆</td><td>軍艦もので唯一ランクイン。</td></tr>
<tr><th>4位</th><td>えび</td><td>☆☆☆</td><td>プリプリした歯ごたえが魅力。</td></tr>
<tr><th>5位</th><td>イカ</td><td>☆☆</td><td>やはり外せない甘みのあるイカ。</td></tr>
</tbody>
<tfoot>
<tr><td></td><td>※投票対象の寿司ネタは管理者が選定</td><td>※投票ポイントを集計して星(☆)に換算</td><td>※投票者のコメントから抜粋</td></tr>
</tfoot>
</table>

テーブルのボディ部分を定義する際に使用します。
<tbody>はテーブルの本体となる行グループを表す要素で、データセルなどで構成されます。

テーブルは作成のしかたによって、行グループ単位でテーブルヘッダ・テーブルボディ・テーブルフッタに分類できる場合があります。
テーブルをヘッダ・ボディ・フッタに分けるには、それぞれの行グループを<thead>~</thead>・ <tbody>~</tbody>・ <tfoot>~</tfoot> で囲みます。
これらの要素は省略できますが、指定すればテーブル構造がより明確になるでしょう。

<thead>・ <tbody>・ <tfoot>は <table>~</table>の子要素として<caption>・ <colgroup>より後に配置します。
<thead>は<tbody>・<tfoot>よりも前に配置します。
<tbody>は<table>~</table>の子要素として複数配置することができますが、 <thead>と<tfoot>はそれぞれ1つだけ配置することができます。

thead要素・ tbody要素・ tfoot要素には、HTML4.01ではalign属性・char属性・charoff属性・valign属性が用意されていました。
HTML5ではこれらの属性は廃止され、要素固有の属性はありません。

またHTML4.01では、<tfoot>は<tbody>よりも前に配置することになっていましたが、 HTML5では<tbody>と<tfoot>の配置位置はどちらでも良いことになっています。
<tfoot>を<tbody>の前に配置しても、ブラウザ上ではフッタ部分はテーブルの最後に表示されます。

<td>
<table>
<tr><th>順位</th><th>名前</th><th>人気度</th><th>備考</th></tr>
<tr><th>1位</th><td>トロ</td><td>☆☆☆☆☆</td><td>やはり何といってもトロ!</td></tr>
<tr><th>2位</th><td>サーモン</td><td>☆☆☆☆</td><td>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th>3位</th><td>うに</td><td>☆☆☆</td><td>軍艦もので唯一ランクイン。</td></tr>
<tr><th>4位</th><td>えび</td><td>☆☆☆</td><td>プリプリした歯ごたえが魅力。</td></tr>
<tr><th>5位</th><td>イカ</td><td>☆☆</td><td>やはり外せない甘みのあるイカ。</td></tr>
<tr><td colspan=”4″>おすし情報局</td></tr>
</table>

テーブルのデータセル(table data cell)を作成する際に使用します。

テーブルの基本的な構造は<table6gt;~</table6gt;の中に <tr6gt;~</tr6gt;で表の横一行を定義して、 さらにその中に<th6gt;~</th6gt;や<td6gt;~</td6gt;でセルを定義します。

見出しセル(table header cell)を作成する場合には<th6gt;~</th6gt;を使用します。

td要素は、HTML5ではabbr属性・align属性・axis属性・char属性・charoff属性・height属性・nowrap属性・scope属性・valign属性・width属性 が廃止されています。

セルの幅・高さを指定するにはCSSのwidthプロパティやheightプロパティを、 セル内の揃え位置を指定するにはCSSのtext-alignプロパティやvertical-alignプロパティを、 セル内での改行を禁止するにはCSSのwhite-spaceプロパティをそれぞれ使用してください。

属性

colspan属性
セルが横方向にまたがる縦列の数を指定
rowspan属性
セルが縦方向にまたがる横行の数を指定
headers属性
セルがどの見出しセルと対応しているかをth要素のid属性の値で指定
<textarea>
<p>
<label for=”kanso”>ご意見・ご感想:</label><br>
<textarea id=”kanso” name=”kanso” cols=”40″ rows=”4″ maxlength=”20″ placeholder=”ご意見・ご感想をご記入ください”></textarea>
</p>

複数行のテキスト入力欄を作成する際に使用します。

cols属性は一行当たりの最大文字数の目安を指定する際に使用します。
cols属性の値として指定できるのは、1以上の正の整数です。
何も指定しない場合の初期値は20です。

rows属性は表示行数を指定する際に使用します。
rows属性の値として指定できるのは、1以上の正の整数です。
何も指定しない場合の初期値は2です。

例えば、cols=”20″ rows=”2″ を指定すると、一般的なブラウザでは1行当たり約20文字分が表示される程度の横幅、および2行分が表示される程度の高さでテキスト入力欄が表示されます。

readonly属性はユーザーによるテキスト編集を不可にして読み取り専用にする際に使用します。

textarea要素はHTML5ではautofocus属性・form属性・maxlength属性・placeholder属性・required属性・wrap属性が新たに追加されています。

required属性は入力必須を指定する場合に使用します。
required属性を指定すると、入力欄が空の状態でフォーム送信しようとすると値の入力が求められます。
同時にreadonly属性を指定している場合には、このバリデーションは無効となります。

maxlength属性は入力可能な最大文字数を指定する際に使用します。
例えばmaxlength=”20″を指定すると、maxlength属性がサポートされているブラウザ(Google Chromeなど)では、 ユーザーは最大20文字までしか入力できなくなります。

wrap属性は入力テキストの改行ルールを指定する際に使用します。
指定できる値はsoft、またはhardの二種類で、初期値はwrap=”soft”です。
wrap=”hard”を指定する場合には、同時にcols属性を指定する必要があります。

placeholder属性はユーザー入力に関するヒントを短めのテキストで指定する際に使用します。
例えば、入力欄に初期値として「ご意見・ご感想をご記入ください」などのヒントを示してユーザーの操作を補助することができます。
ヒントが長くなる場合にはtitle属性のほうがより適しているでしょう。
また、placeholder属性でその入力欄の項目名を表すべきではありません。
このような目的には<label>を使用してください。

尚、<textarea>~</textarea>の内容は初期入力値となります。
placeholder属性の指定はヒントテキストであり、一般的なブラウザでは入力欄をフォーカスすると消えます。
それに対して<textarea>~</textarea>の内容は初期入力値であり、 この値をユーザーが編集して利用することもできます。
<textarea>~</textarea>の初期入力値と、placeholder属性の値を同時に指定すると一般的なブラウザでは、初期入力値が優先されてplaceholder属性の指定は表示されなくなるようです。

属性

autofocus属性
自動フォーカスを指定する(autofocus)
cols属性(初期値は20)
一行当たりの最大文字数の目安を指定する
disabled属性
操作を無効にする(disabled)
form属性
どのフォームと関連付けるかを<form>のid名で指定
maxlength属性
入力可能な最大文字数を指定
name属性
入力フィールドの名前を指定
placeholder属性
ユーザー入力に関するヒントを短めのテキストで指定
readonly属性
ユーザーによるテキスト編集を不可にして読み取り専用にする(readonly)
required属性
入力必須を指定
rows属性(初期値は2)
表示行数を指定する
wrap属性
入力テキストの改行ルールを指定
<tfoot>
<table>
<caption>寿司ネタ人気ランキング</caption>
<colgroup span=”1″ style=”width:30px; background-color:#FF9900;”>
<colgroup>
<col span=”2″ style=”width:100px; background-color:#FF3300;”>
<col span=”1″ style=”width:250px; background-color:#FFCC00;”>
</colgroup>
<thead>
<tr><th>順位</th><th>名前</th><th>人気度</th><th>備考</th></tr>
</thead>
<tbody>
<tr><th>1位</th><td>トロ</td><td>☆☆☆☆☆</td><td>やはり何といってもトロ!</td></tr>
<tr><th>2位</th><td>サーモン</td><td>☆☆☆☆</td><td>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th>3位</th><td>うに</td><td>☆☆☆</td><td>軍艦もので唯一ランクイン。</td></tr>
<tr><th>4位</th><td>えび</td><td>☆☆☆</td><td>プリプリした歯ごたえが魅力。</td></tr>
<tr><th>5位</th><td>イカ</td><td>☆☆</td><td>やはり外せない甘みのあるイカ。</td></tr>
</tbody>
<tfoot>
<tr><td></td><td>※投票対象の寿司ネタは管理者が選定</td><td>※投票ポイントを集計して星(☆)に換算</td><td>※投票者のコメントから抜粋</td></tr>
</tfoot>
</table>

テーブルのフッタ部分を定義する際に使用します。
<tfoot>はテーブルのフッタとなる行グループを表す要素で、カラムの要約で構成されます。

テーブルは作成のしかたによって、行グループ単位でテーブルヘッダ・テーブルボディ・テーブルフッタに分類できる場合があります。
テーブルをヘッダ・ボディ・フッタに分けるには、それぞれの行グループを <thead>~</thead>・ <tbody>~</tbody>・ <tfoot>~</tfoot>で囲みます。
これらの要素は省略できますが、指定すればテーブル構造がより明確になるでしょう。

<thead>・ <tbody>・ <tfoot>は<table>~</table>の子要素として<caption>・ <colgroup>より後に配置します。
<thead>は<tbody>・<tfoot>よりも前に配置します。
<tbody>は<table>~</table>の子要素として複数配置することができますが<thead>と<tfoot>はそれぞれ1つだけ配置することができます。

thead要素・ tbody要素・ tfoot要素には、HTML4.01ではalign属性・char属性・charoff属性・valign属性が用意されていました。
HTML5ではこれらの属性は廃止され、要素固有の属性はありません。

また、HTML4.01では<tfoot>は<tbody>よりも前に配置することになっていましたが、 HTML5では<tbody>と<tfoot>の配置位置はどちらでも良いことになっています。
<tfoot>を<tbody>の前に配置しても、ブラウザ上ではフッタ部分はテーブルの最後に表示されます。

<th>
<table>
<tr><th>順位</th><th>名前</th><th>人気度</th><th>備考</th></tr>
<tr><th>1位</th><td>トロ</td><td>☆☆☆☆☆</td><td>やはり何といってもトロ!</td></tr>
<tr><th>2位</th><td>サーモン</td><td>☆☆☆☆</td><td>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th>3位</th><td>うに</td><td>☆☆☆</td><td>軍艦もので唯一ランクイン。</td></tr>
<tr><th>4位</th><td>えび</td><td>☆☆☆</td><td>プリプリした歯ごたえが魅力。</td></tr>
<tr><th>5位</th><td>イカ</td><td>☆☆</td><td>やはり外せない甘みのあるイカ。</td></tr>
<tr><td colspan=”4″>おすし情報局</td></tr>
</table>

<table>
<tr><th id=”t1″>順位</th><th id=”t2″>名前</th><th id=”t3″>人気度</th><th id=”t4″>備考</th></tr>
<tr><th headers=”t1″>1位</th><td headers=”t2″>トロ</td><td headers=”t3″>☆☆☆☆☆</td><td headers=”t4″>やはり何といってもトロ!</td></tr>
<tr><th headers=”t1″>2位</th><td headers=”t2″>サーモン</td><td headers=”t3″>☆☆☆☆</td><td headers=”t4″>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th headers=”t1″>3位</th><td headers=”t2″>うに</td><td headers=”t3″>☆☆☆</td><td headers=”t4″>軍艦もので唯一ランクイン。</td></tr>
<tr><th headers=”t1″>4位</th><td headers=”t2″>えび</td><td headers=”t3″>☆☆☆</td><td headers=”t4″>プリプリした歯ごたえが魅力。</td></tr>
<tr><th headers=”t1″>5位</th><td headers=”t2″>イカ</td><td headers=”t3″>☆☆</td><td headers=”t4″>やはり外せない甘みのあるイカ。</td></tr>
<tr><td colspan=”4″>おすし情報局</td></tr>
</table>

<table>
<tr><th scope=”col”>順位</th><th scope=”col”>名前</th><th scope=”col”>人気度</th><th scope=”col”>備考</th></tr>
<tr><th scope=”row”>1位</th><td>トロ</td><td>☆☆☆☆☆</td><td>やはり何といってもトロ!</td></tr>
<tr><th scope=”row”>2位</th><td>サーモン</td><td>☆☆☆☆</td><td>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th scope=”row”>3位</th><td>うに</td><td>☆☆☆</td><td>軍艦もので唯一ランクイン。</td></tr>
<tr><th scope=”row”>4位</th><td>えび</td><td>☆☆☆</td><td>プリプリした歯ごたえが魅力。</td></tr>
<tr><th scope=”row”>5位</th><td>イカ</td><td>☆☆</td><td>やはり外せない甘みのあるイカ。</td></tr>
<tr><td colspan=”4″>おすし情報局</td></tr>
</table>

テーブルの見出しセル(table header cell)を作成する際に使用します。

テーブルの基本的な構造は、<table>~</table>の中に <tr>~</tr>で表の横一行を定義して、 さらにその中に<th>~</th>や<td>~</td>でセルを定義します。

データセル(table data cell)を作成する場合には<td>~</td>を使用します。

th要素は、HTML5ではabbr属性・align属性・axis属性・char属性・charoff属性・height属性・nowrap属性・valign属性・width属性 が廃止されています。

セルの幅・高さを指定するにはCSSのwidthプロパティやheightプロパティを、 セル内の揃え位置を指定するにはCSSのtext-alignプロパティやvertical-alignプロパティを、 セル内での改行を禁止するにはCSSのwhite-spaceプロパティをそれぞれ使用してください。

属性

colspan属性
セルが横方向にまたがる縦列の数を指定
rowspan属性
セルが縦方向にまたがる横行の数を指定
headers属性
セルがどの見出しセルと対応しているかをth要素のid属性の値で指定
scope属性
見出しセルが行・列のどの範囲に対応しているかをキーワード(row・col・rowgroup・colgroup)で指定。 scope=”row”を指定すると、その見出しセルは同じ横行の後続のいくつかのセルに適用されることを表します。 scope=”col”を指定すると、その見出しセルは同じ縦列の後続のいくつかのセルに適用されることを表します。 scope=”rowgroup”を指定すると、その見出しセルは同じ横行の後続のすべてのセルに適用されることを表します。 scope=”colgroup”を指定すると、その見出しセルは同じ縦行の後続のすべてのセルに適用されることを表します。
<thead>
<table>
<caption>寿司ネタ人気ランキング</caption>
<colgroup span=”1″ style=”width:30px; background-color:#FF9900;”>
<colgroup>
<col span=”2″ style=”width:100px; background-color:#FF3300;”>
<col span=”1″ style=”width:250px; background-color:#FFCC00;”>
</colgroup>
<thead>
<tr><th>順位</th><th>名前</th><th>人気度</th><th>備考</th></tr>
</thead>
<tbody>
<tr><th>1位</th><td>トロ</td><td>☆☆☆☆☆</td><td>やはり何といってもトロ!</td></tr>
<tr><th>2位</th><td>サーモン</td><td>☆☆☆☆</td><td>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th>3位</th><td>うに</td><td>☆☆☆</td><td>軍艦もので唯一ランクイン。</td></tr>
<tr><th>4位</th><td>えび</td><td>☆☆☆</td><td>プリプリした歯ごたえが魅力。</td></tr>
<tr><th>5位</th><td>イカ</td><td>☆☆</td><td>やはり外せない甘みのあるイカ。</td></tr>
</tbody>
<tfoot>
<tr><td></td><td>※投票対象の寿司ネタは管理者が選定</td><td>※投票ポイントを集計して星(☆)に換算</td><td>※投票者のコメントから抜粋</td></tr>
</tfoot>
</table>

テーブルのヘッダ行を定義する際に使用します。
<thead>はテーブルのヘッダとなる行グループを表す要素で、カラムのラベル(名前)で構成されます。

テーブルは作成のしかたによって行グループ単位でテーブルヘッダ・テーブルボディ・テーブルフッタに分類できる場合があります。
テーブルをヘッダ・ボディ・フッタに分けるには、それぞれの行グループを <thead>~</thead>・ <tbody>~</tbody>・ <tfoot>~</tfoot>で囲みます。
これらの要素は省略できますが、指定すればテーブル構造がより明確になるでしょう。

<thead>・ <tbody>・ <tfoot>は <table>~</table>の子要素として、 <caption>・ <colgroup>より後に配置します。
<thead>は<tbody>・<tfoot>よりも前に配置します。
<tbody>は<table>~</table>の子要素として複数配置することができますが<thead>と<tfoot>はそれぞれ1つだけ配置することができます。

thead要素・ tbody要素・ tfoot要素には、HTML4.01ではalign属性・char属性・charoff属性・valign属性が用意されていました。
HTML5ではこれらの属性は廃止され、要素固有の属性はありません。

また、HTML4.01では<tfoot>は<tbody>よりも前に配置することになっていましたが、 HTML5では<tbody>と<tfoot>の配置位置はどちらでも良いことになっています。
<tfoot>を<tbody>の前に配置しても、ブラウザ上ではフッタ部分はテーブルの最後に表示されます。

<time>
<time>23:00</time>

日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用します。
日時を記述するのに、必ず<time>を使用しなくてはならないわけではなく、コンピュータやブラウザが理解できるように日時を示すことが目的です。

<time>タグは正確に特定できない日付や時刻に対して使用するべきではありません。
ビッグバンの1ミリ秒後、ジュラ紀の初期、紀元前約250年の冬、といった時を示すのに、<time>タグを使用するのは不適切です。

現在一般的に利用されている西暦はグレゴリオ暦ですが、グレゴリオ暦は1582年2月にローマ教皇グレゴリウス13世によって制定されたものです。
<time>タグは、グレゴリオ暦導入以前の日付には使用しないことが推奨されています。

また、日本では明治5年(1872年)にグレゴリオ暦が導入されていますが、国によって16世紀~20世紀初頭と導入時期が異なります。
グレゴリオ暦からの日付や時刻の変換には十分な注意が必要です。

datetime属性は、日付や時刻を指定します。
もしdatetime属性を省略する場合には<time>~</time>の中に日付や時刻を記述します。

pubdate属性を指定すると<time>で示した日時が親要素の<article>の公開日時であることを表します。
親要素の<article>が存在しない場合には文書全体の公開日時を表しますが、この場合には文書中の<time>は1つ以下でなければなりません。

datetime属性
<time datetime=”2014-2-20″>寒い冬の木曜日</time>

日付や時刻を指定する

<title>
<title>ここにタイトルをつける</title>

文書にタイトルをつける際に使用します。
<title>タグで文書のタイトルを指定する場合には、一つの文書に一つだけ、<head>~</head>の中に配置します。
一つの文書内で複数の<title>を指定することはできません。

<title>~</title>に指定する文書のタイトルは、 検索エンジンの検索結果画面やユーザーの利用するブラウザのブックマーク欄などに表示されるので、文書の内容を表すものを指定する必要があります。

また、title要素はSEO対策としても大変重要な意味を持ちます。
検索結果で上位表示させたいキーワードがある場合には、 <title>~</title>の中に自然な形でキーワードを配置しておくべきでしょう。

<tr>
<table>
<tr><th>順位</th><th>名前</th><th>人気度</th><th>備考</th></tr>
<tr><th>1位</th><td>トロ</td><td>☆☆☆☆☆</td><td>やはり何といってもトロ!</td></tr>
<tr><th>2位</th><td>サーモン</td><td>☆☆☆☆</td><td>ほど良い脂の乗りで女性に人気。</td></tr>
<tr><th>3位</th><td>うに</td><td>☆☆☆</td><td>軍艦もので唯一ランクイン。</td></tr>
<tr><th>4位</th><td>えび</td><td>☆☆☆</td><td>プリプリした歯ごたえが魅力。</td></tr>
<tr><th>5位</th><td>イカ</td><td>☆☆</td><td>やはり外せない甘みのあるイカ。</td></tr>
</table>

<tr>タグはtable rowの略で、テーブルの横一行を定義する際に使用します。

テーブルの基本的な構造は、<table>~</table>の中に<tr>~</tr>で表の横一行を定義して、 さらにその中に<th>~</th>や<td>~</td>でセルを定義します。

tr要素は、HTML5ではalign属性・char属性・charoff属性・valign属性が廃止されています。

U

<ul>
<ul style=”list-style-type: square”>
<li>いちご</li>
<li>イチジク</li>
<li>一味唐辛子</li>
</ul>

ブラウザ上での表示

  • いちご
  • イチジク
  • 一味唐辛子

<ul>タグはunordered listの略で、順序のないリストを表示する際に使用します。
リスト項目は<li>タグで指定します。

<ul>タグで作成されるのは順序のないリストなので、リスト項目の順序を変えても文書の意味は変わりません。
順序のあるリストを作成する際には<ol>タグを使用してください。

HTML5では、ul要素のtype属性は廃止されています。
リストマーカーのスタイルを指定する際には、CSSのlist-style-typeプロパティを使用してください。

V

<var>
鶴が<var>x</var>羽と亀が<var>y</var>匹います。

variableの略で、変数であることを示す際に使用します。
数式やプログラムの中の変数そのものや、文章中に変数名が出てくる場合などに使用できます。

<video>
<p>HTML5のvideoタグによる動画再生</p>
<video controls autoplay poster=”firstframe.jpg” width=”320″ height=”240″>
<source src=”sample.mp4″>
<source src=”sample.ogv”>
<source src=”sample.webm”>
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

動画を再生する際に使用します。
<video>タグを使用することで、ユーザーにFlashなどのプラグインをインストールしてもらうことなく、標準のHTMLからシンプルに動画を扱えるようになります。
感覚的には<img>タグで画像を扱うような感じです。

動画ファイルの指定には<video>タグのsrc属性か<video>~</video>の中で<source>タグを使用します。
<source>タグを使う方法では、フォーマットの異なる複数の動画データを指定してブラウザに動画の再生候補を提示することができます。
ブラウザは記述された順に再生可能なデータを利用するので、より多くの環境で動画を視聴してもらえる可能性が高くなります。

<video>~</video>の中には、 <video>タグがサポートされていない環境で表示させるメッセージを記述することができます。

<video>
<source src=”sample.mp4″>
<source src=”sample.ogv”>
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

<video>タグには、動画再生の詳細を指定する以下のような属性があります。

autoplay属性で動画を自動再生する

autoplay属性を指定すると、ウェブページを読み込んだ時点で、動画が自動再生されます。

<video src=”sample.ogv” autoplay></video>

preload属性で動画をあらかじめ読み込む

preload属性を指定するとウェブページを読み込んだ時点で動画を裏側で読み込みます。
初期値はpreload=”auto”で、一般的なブラウザではpreload属性を指定しなくても動画はあらかじめ読み込まれます。

preload=”metadata”を指定すると、動画全体ではなく、 動画のサイズ・最初のフレーム・トラックリスト・再生時間などの動画のメタデータのみを取得します。

もし、ユーザーが動画をあまり必要としていないことが想定される場合や、ウェブサーバに余分な負担を掛けたくない場合には、 preload=”none”を指定すると良いでしょう。

<video src=”sample.ogv” preload=”none”></video>

controls属性でインターフェースを表示する

controls属性を指定すると、再生・一時停止・再生位置の移動・ボリュームなど、 動画を利用しやすくするインターフェースをブラウザが自動で表示することになっています。

<video src=”sample.ogv” controls></video>

poster属性で動画のヒントとなる画像を表示する

<video>タグのposter属性は、ユーザー環境で利用できる動画が無い場合に表示させる画像ファイルを指定することができます。
poster属性で指定する画像は、ユーザーにその動画の内容がどのようなものかを知らせるヒントとなるものが適しています。
例えば動画の開始画面の画像などです。

<video src=”sample.ogv” poster=”firstframe.jpg”></video>

video要素は、HTML5から新たに追加された要素です。

属性

src属性
動画ファイルを指定する
poster属性
動画のヒントとなる画像を表示する
preload属性
動画をあらかじめ読み込む(auto、metadata、none)
autoplay属性
動画を自動再生する
loop属性
ループ再生を指定する
controls属性
インターフェースを表示する
width属性
幅を指定する
height属性
高さを指定する

現在<video>タグをサポートしているブラウザは、 Firefox、Google Chrome、Safari、Operaの新しいバージョンなどですが、 これらのブラウザ間ではサポートされている動画規格が統一されていません。
どの動画規格がHTML5にふさわしいかについての検討はされていますが、推奨される標準規格はまだ未定のままです。

今後、HTML5で標準採用される可能性のある動画規格としては、 Firefox・Google ChromeがサポートするOgg Theora、 Safari・Google ChromeがサポートするH.264、 Google Chrome・OperaがサポートするWebMなどが挙げられるでしょうが、 どの規格も技術特許への懸念やブラウザベンダー各社の自社サービスとの相性などの問題から、 合意を得ることはなかなか難しいようです。
場合によっては標準規格が決められないまま、各ブラウザベンダーに任せられることになるかもしれません。

以下のサンプルでは<source>タグで3種類の動画形式を指定しています。
mp4形式はGoogle Chrome・Safari向け、ogv形式はFirefox・Opera向け、webm形式はGoogle Chrome・Opera向けです。

<p>HTML5のvideoタグによる動画再生</p>
<video controls autoplay poster=”firstframe.jpg” width=”320″ height=”240″>
<source src=”sample.mp4″>
<source src=”sample.ogv”>
<source src=”sample.webm”>
<p>動画を再生するには、videoタグをサポートしたブラウザが必要です。</p>
</video>

W

<wbr>
<p>So then he pointed at the tiger and screamed
“there<wbr>is<wbr>no<wbr>way<wbr>you<wbr>are<wbr>ever<wbr>going<wbr>to<wbr>catch<wbr>me”!</p>

改行しても良い位置を示す際に使用します。

wbr要素の内容は、その前後のテキストの一部とは見なされません。
例えば「アグリゲイティバクター・アクチノミセテムコミタンス」という言葉が長いからといって、 「アグリゲイティバクター・<wbr>アクチノミセテムコミタンス」のように指定してしまうと、 改行の前後がそれぞれ別の言葉として解釈されてしまうかもしれません。

もともとはNetscape Navigator独自の要素で、 HTML4.01の仕様には取り入れられていませんが、すでに一部のブラウザでサポートされています。
HTML5では、標準仕様として採用される予定です。

X

項目なし

Y

項目なし

Z

項目なし

OTHER

<!DOCTYPE html>
<!DOCTYPE html>

文書がHTML5で作成されたものであることを宣言するために、 文書の先頭(<html>タグよりも上)に記述するDOCTYPE宣言(Document Type Definition、DTD、文書型宣言)です。

HTMLやXHTMLでは、バージョンごとに使用できる要素(タグ)や属性とそれらの配置ルールが定められていますが、 DOCTYPE宣言は、その文書がHTMLやXHTMLのどのバージョンで作成されているかを宣言するものです。

HTML5におけるDOCTYPE宣言はあまり意味を持たないとされていますが、 作成した文書がHTML5によるものであることを、ブラウザなどに明示的に伝えるために記述しておいたほうが良いでしょう。

DOCTYPE宣言が無いと、一般的なブラウザではレンダリングモードが互換モード(Quirks mode)となります。
互換モードのブラウザではCSSの解釈が標準と異なるため、制作者の意図しないレイアウトになってしまう場合があります。
ブラウザに標準モード(Standards mode)で解釈させる場合には、DOCTYPE宣言を記述する必要があります。
IE6も含めて、主要なブラウザでは文書の先頭に<!DOCTYPE html>と記述することで標準モードとなります。

ブラウザのレンダリングモードとは

ブラウザのレンダリングモードとは、ウェブページの表示方法を決めるブラウザの状態のことで、 DOCTYPE宣言の記述のしかたによって標準モードと互換モードが切り替わります。
標準モードは、CSSなどの仕様通りに正しく表示するモードで、 互換モードは、まだCSSが普及していなかった時代の過去のブラウザとの互換のために、 あえて標準仕様とは異なる解釈で表示するモードのことです。
互換モードでウェブページが表示される場合、 CSSの指定が正しく解釈されないため、文字サイズやレイアウトなどが制作者の意図と異なってしまう場合があります。

<!– –>
<!– ここの中にコメントを記入する –>

ブラウザ上の表示

(ブラウザには表示されません)

タグで囲まれた部分がコメントになります。
HTMLソース中にコメントを記述したり、一時的にコンテンツの一部を隠したり、タグを無効にする際に使用します。

コメントは1行でも複数行でも構いません。
始まりの<!–は続けて記述する必要がありますが、終わりの–と>の間には空白が入っても良いことになっています。
そのためコメントの途中に連続するハイフンは入れないほうが良いでしょう。

PAGE TOP