姓

名

メールアドレス

電話番号

個人情報保護方針に同意する

利用規約に同意する

HTML5タグの基本要素を紹介！タグの使い方や省略可能なタグとは？エンジニアがおさえておくべき入れ子のルールもチェック

2020.01.24

言語

HTML5タグの基本要素を紹介！タグの使い方や省略可能なタグとは？エンジニアがおさえておくべき入れ子のルールもチェック

はじめに

HTML5はW3C（World Wide Web Consortium）により2008年に発表されました。

従来のHTMLと比較し、現代のWebニーズに合致するよう大幅に改定されているのが違いです。

ここではHTML5の基本要素や使い方、省略可能なタグや入れ子ルールについて説明します。

おさらい：HTMLとHTML5の違い

まずは簡単に従来のHTMLとの違いを確認しましょう。

なお、ここでの「HTML」は厳密にはHTML5の前のHTML4.01のことを指します。

DOCTYPEの書き方

HTMLファイルでは冒頭にDOCTYPE宣言をして、どのバージョンのHTML仕様に沿って記述されているかを明確にする必要があります。

HTMLでは下記のような記述方法が一般的でした。

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

一方、HTML5では下記のようになります。

<!DOCTYPE html>

かなり簡素化されていますね。

入れ子ルール

どの要素にどの要素を入れ子にできるか、を表す入れ子ルールも異なります。

HTMLでは基本要素を「block要素」「inline要素」の2グループに分け、blockへinlineを入れ子にするのがOK、逆はNGというルールでした。

HTML5ではこのルールが少々複雑化し「カテゴリー」と「コンテンツモデル」に基づく考え方へと変化しています。詳しくは後述します。

要素の追加・削除

HTML5になり、HTMLから追加された要素もあれば削除となった要素もあります。

Webの進化に伴い必要となった機能と、逆に使用頻度が低く廃止にする機能があるためです。次項にて説明します。

HTML5の基本要素

HTML5で追加された要素・削除された要素に絞って基本要素を確認しましょう。

追加された要素

追加された主な要素は下記の通りです。検索エンジンの解釈支援用に、何の情報が入っているかを示す要素が増えています。

要素	用途
header	ヘッダー情報であることを示す。見出しやナビゲーション等が入る。
footer	フッター情報であることを示す。連絡先や関連文書へのリンク等が入る。
nav	ナビゲーションであることを示す。ページ内リンク等が入る。
menu	操作メニューを作成する。
article	記事であることを示す。
section	セクション（区切り）であることを示す。
time	日付や時刻情報を正確に示す。
datalist	フォームの入力欄で入力候補となるデータ列を格納する。
video	動画を再生する。
audio	音声を再生する。
progress	タスク完了までの進捗状況を表示する。

削除された要素

別の要素や方法で同じ機能が実現できる場合に削除するパターンが多いです。

要素	用途
u	テキストにアンダーラインを引く。
strike	テキストに打ち消し線を引く。
spacer	間隔を空ける。
font	フォントを指定する。
isindex	入力欄を作る。
listing	ソースコードのまま表示する。
xmp	ソースコードのまま表示する。

HTML5タグの使い方

新規に追加された要素のうち、いくつかの使用例を紹介します。

headerタグ

headerは、ヘッダ情報を表すheadタグと間違えやすいので注意しましょう。

<header>～</header>内には、見出しである<h1>や<h2>・<h3>・<h4>・<h5>・<h6>、ナビゲーション<nav>を含むことが想定されています。

<body>
<header>
<h1>ようこそ情報科学科へ</h1>
<nav>
<ul>
<li><a href=”syllabus.html”>シラバス</a></li>
<li><a href=”labo.html”>研究室紹介</a></li>
<li><a href=”works.html”>課題提出ページ</a></li>
</ul>
</nav>
<h2>お知らせ</h2>
<p>来週の線形代数は休講です。</p>
<p>夏季集中講義の受講申し込み受付を開始しました。</p>
</header>
<p>情報科学科に属する学生向けのページです。</p>
</body>

datalistタグ

<datalist>タグから開始し、入力候補のデータ列は<option>タグで指定します。

<option>タグ内のvalue属性に実際の文字列を入力してください。

フォームで使用する際は、<input>タグ内のlist属性の名前と<datalist>タグ内のid属性の名前を同じにして紐付けを行います。

<form>
<fieldset>
<input type=”search” name=”q” autocomplete=”on” list=”colors”>
<datalist id=”colors”>
<option value=”オフホワイト”>
<option value=”グレー”>
<option value=”ブラック”>
</datalist>
<input type=”submit” value=”決定”>
</fieldset>
</form>

progressタグ

押しボタンを押してダウンロードを開始し進捗状況をプログレスバーとして表示するためのコード例です。

ここでは見本のため実際のダウンロードは行わず、ボタンを押したらループによってバーを進めているだけなので注意してください。

<progress>タグ内のmax属性でプログレスバーの最高値、value属性で現在の進捗度を指定します。

値の更新はスクリプト言語側から行う想定です。<progress>タグ内のid要素に指定した名前をスクリプト言語側から取得しvalueを更新します。

進行状況 : <progress id=”pbar” max=”100″ value=”0″>Loading…</progress>
: <output id=”op”>0</output>％
<input type=”button” value=”ダウンロード開始” onClick=”location.reload(); return false;”>
<script>
var prog = document.getElementById(‘pbar’);
var ptxt = document.getElementById(‘op’);
var pup = setInterval(“upPrgrss()”,100);
function upPrgrss(){
if(prog.value<=prog.max){
prog.value++;
ptxt.value = prog.value;
}else{
clearInterval(pup);
}
}
</script>

videoタグ

<video>タグの中では様々な属性を指定することができ、例えば下記の例のようにautoplayを指定すると、アクセス時に自動で再生します。

再生する動画ファイルは<video>〜</video>の中で<source>タグを使用し指定するか、<video>タグ内のsrc属性で指定することも可能です。

<video autoplay>
<source src=”cooking.mp4″>
<p>オムレツの作り方</p>
</video>

省略可能なHTML5タグ

HTML5では、コード可読性の向上とブラウザや検索エンジンでの解釈高速化のためにタグの省略を認めています。

主な省略可能タグ

<html>タグ：最初がコメントでないこと
</html>タグ：直後がコメントでないこと
<head>タグ：最初がコメントでないこと・中身が空であること
</head>タグ：直後がコメント・スペースでないこと
<body>タグ：最初がコメントでないこと・中身が空であること
</body>タグ：直後がコメントでないこと
</li>タグ
</tr>・</td>・</th>の各タグ
</p>タグ

厳密な省略条件やその他の省略可能タグについてはW3CのHTML5-8.1.2.4 Optional tagsに記載されています。

タグ省略の記述例

タグを省略するとコードがとても読みやすくなります。下記2つを見比べてみてください。

非常にすっきりとしています。

タグを省略しない記述
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″>
<title>風邪予防のためにできること</title>
<link href=”style.css” rel=”stylesheet”>
</head>
<body>
<p>毎日きちんと実施しましょう</p>
<ul>
<li>手洗い</li>
<li>うがい</li>
<li>早寝早起き</li>
<li>マスク</li>
<li>栄養をとる</li>
<li>睡眠をとる</li>
</ul>
</body>
</html>

タグを省略する記述
<!DOCTYPE html>
<html lang=”ja”>
<meta charset=”utf-8″>
<title>風邪予防のためにできること</title>
<link href=”style.css” rel=”stylesheet”>
<p>毎日きちんと実施しましょう
<ul>
<li>手洗い
<li>うがい
<li>早寝早起き
<li>マスク
<li>栄養をとる
<li>睡眠をとる
</ul>

HTML5の入れ子ルール

ここからはエンジニアが押さえておくべき入れ子ルールについて確認しましょう。

冒頭にあった通り、HTML5の入れ子ルールは「カテゴリー」と「コンテンツモデル」という概念に基づき定められています。

要素をコンテンツ種別に基づきいくつかに分類したのが「カテゴリー」です。ある要素は決まったカテゴリーの要素しか入れ子にできません。

「どの要素がどのカテゴリーを入れ子にできるか？」の組み合わせを「コンテンツモデル」と呼びます。

カテゴリー

下記がカテゴリーの一覧です。注意点として、ある要素が所属するカテゴリーは一つだけとは限りません。

例えばリンク挿入の要素である「a」はフローコンテンツかつフレージングコンテンツかつインタラクティブコンテンツとなっています。

カテゴリー	説明	要素例
フローコンテンツ	テキストなどを子に持つ。ほぼ全ての要素が該当。	a/blockquote/table
フレージングコンテンツ	文書を構成するテキストを表す。	a/audio/button
メタデータコンテンツ	文書情報および他文書との関係を定義する。	link/script/style
インタラクティブコンテンツ	ユーザー操作に対応する。	a/input/menu
エンベディッドコンテンツ	他のリソースを文書に埋め込む。	audio/canvas/video
ヘディングコンテンツ	セクションの見出しとして機能する。	h1/h2/h3/h4/h5/h6
セクショニングコンテンツ	明示的にアウトラインを生成する。	article/nav/section