【HTML5タグ一覧】追加された新要素・廃止されたタグをわかりやすく解説【サンプルコード付き】

contents

1.HTML5とは？
2.HTML5で新しく追加された要素
3.HTML5で廃止された要素

HTML5では、従来のHTML4から多くの新しい要素が追加され、文書構造をより明確に表現できるようになりました。一方で、役割を終えたタグは廃止され、CSSやJavaScriptによる実装が推奨されています。本記事では、HTML5で追加された主要な要素と廃止されたタグを一覧で紹介し、それぞれの役割や使い方、HTML4との違いもわかりやすく解説します。

1.HTML5とは？

HTML5（HyperText Markup Language 5）は、Webページの構造を記述するためのマークアップ言語「HTML」の第5世代の規格です。従来のHTML4よりも機能が大幅に強化され、動画や音声の再生、フォーム機能の充実、セマンティック（意味を持つ）要素の追加など、現代のWebサイト制作に欠かせない仕様となっています。

現在では、主要なWebブラウザはHTML5に対応しており、多くのWebサイトやWebアプリケーションがHTML5をベースに構築されています。

HTML5が登場した理由
HTML4では、ページのレイアウトや構造を表現するために`div`要素が多用されていました。しかし、`div`要素だけでは「ここが記事なのか」「ここがナビゲーションなのか」といった意味を検索エンジンやブラウザが理解しにくいという課題がありました。

そこでHTML5では、文書の意味を明確に表現できる新しい要素が追加されました。

例えば、

* `header`：ヘッダー
* `nav`：ナビゲーション
* `main`：メインコンテンツ
* `section`：章や節
* `article`：独立した記事
* `aside`：補足情報
* `footer`：フッター

などを使用することで、人にも検索エンジンにも理解しやすいHTMLを作成できるようになりました。

HTML5の主な特徴
HTML5には、従来のHTMLにはなかったさまざまな機能が追加されています。

* 文書構造を表すセマンティック要素の追加
* `<video>`や`<audio>`による動画・音声の再生
* `<canvas>`を利用したグラフィック描画
* フォーム入力機能の強化
* スマートフォンやタブレットなどのマルチデバイスへの対応
* JavaScriptとの連携機能の向上

これらの機能により、外部プラグインに依存しないWebサイトやWebアプリケーションの開発が可能になりました。

HTML4との違い
HTML4では、見た目を整えるためのタグや、意味を持たない`div`要素が多く利用されていました。

HTML5では、ページの役割を明確に表現するタグが追加され、より保守しやすく読みやすいHTMLを記述できます。

| HTML4 | HTML5 |
| ------------- | ----------------------- |
| divでレイアウトを作成 | header・main・footerなどを利用 |
| 動画はFlashなどが必要 | videoタグだけで再生可能 |
| 音声はプラグインが必要 | audioタグで再生可能 |
| 意味を持たないタグが多い | 意味を持つ要素を多数追加 |

HTML5はSEOに効果がある？
HTML5を使用するだけで検索順位が上がるわけではありません。しかし、適切なHTML5要素を使用すると、ページ構造が明確になり、検索エンジンがコンテンツを理解しやすくなるというメリットがあります。

また、アクセシビリティや保守性の向上にもつながるため、現在のWebサイト制作ではHTML5のセマンティック要素を正しく利用することが推奨されています。

2.HTML5で新しく追加された要素と廃止された要素

section要素
コンテンツやテーマによってグループ分けをしたセクション区切り

section要素は、要素の内容が明示的に文書のアウトラインに載る場合にのみ使用することが適切です。通常見出しを持っています。section要素は、一般的なコンテナ要素ではありません（CSSやJavaScriptで利用するための枠であれば、div要素を使用することを推奨しています）

div要素では明確にセクションを作ることができない（div要素はグループ化をする汎用的な枠の意味しかもてない）

article要素
<article>要素は、それだけで内容が完結しているセクションに使います。
例えば、ページのメインコンテンツの部分に。
ブログだったら1つの記事や、コメント1つ1つも、それで完結した内容なので<article>を使えます。1ページに何度使ってもいいのです。

aside要素
aside要素は、メインコンテンツとは関連性が薄く、切り離すことができるコンテンツを表します。例えばサイト以外の広告のリンクやブログパーツや外部リンク集などに使用します。ブログなどでよくある「この記事を読んだ人にはこちらをオススメ」などはその記事に対して関連性がある内容の紹介になりますが、この部分がなくても記事が成り立つものとしてはasideにするなども考えられます。

nav要素
nav要素は、ナビゲーションリンクを伴うセクションを表します。サイトやページの主要なナビゲーションに使用しなければなりません。すべてのリンクグループ（ナビゲーション）にnav要素を使ってはいけません。例えば、nav要素はサイトにとって主要なナビゲーションであるグローバルナビゲーション等に使います。ページフッター内に設置されている補足的なナビゲーション等にはnav要素を使わずにfooter要素で対応しますが、この辺はサイト全体の中でのナビゲーションの内容にもよると思いますので一概には言えないかとも思います。

header要素
header要素はページや各セクションのヘッダーを表す場合に使用します。今までは<div id="header"> </div>などを使用していたと思いますが、それが<header> </header>という形に置き換えることができます。

main要素

footer要素
footer要素はページや各セクションのフッターを表す場合に使用します。今までページの最下部のエリアを<div id="footer"> </div>などを使用していたと思いますが、それが<footer> </footer>という形に置き換えることができます。

<audio> プラグインを使わずに音声を再生する
<bdi> 隔離されたテキストを表す
<canvas> スクリプト使ってグラフィックスを描く
<command> コマンドを表す
<datalist> 入力候補のリストを作る
<details> リクエストに応じて詳細情報を提供する
<embed> プラグインデータを埋め込む
<figcaption> 図版にキャプションを付ける
<figure> 参照される図版を表す
<hgroup> 見出しをグループ化する（廃止予定）
<keygen> 暗号鍵を生成する
<mark> テキストのハイライト表示
<meter> 特定範囲内の数量や割合を示す
<output> 計算結果の出力欄を作る
<progress> 作業の進捗状況を示す
<rp> ルビテキストを括弧で囲む
<rt> ルビテキストを表す
<ruby> ルビ（ふりがな）を振る
<source> 形式の異なる複数の再生候補を指定する
<summary> 詳細情報のキャプションや要約を表す
<time> 日付や時刻を表す
<track> 動画・音声と同期するテキストトラック
<video> プラグインを使わずに動画を再生する
<wbr> 改行位置の候補を表す

3. HTML5で廃止された要素

basefont このタグ以降のテキストの基準サイズ・基準色・基準フォントの指定

big フォントの大きさを一回り大きくする。ただし、文字を一回り小さくするsmall要素は他の意味合いがあるため残ります

center テキストや画像などのコンテンツをセンタリングする。HTML4の規格では非推奨に定義されてからHTML4.01 St rict, XHTML1.0 Strict, XHTML1.1では廃止、HTML5においてもcenter要素は廃止

strike テキストに打ち消し線（取り消し線）同じ表示効果をもつ要素に、s要素がありHTML5ではs要素には別の意味が与えられ、strike要素は廃止

tt tt要素（teletype text）はテキストをすべての文字幅を一定に揃えた等幅フォント（固定幅フォント）で表示　フォントサイズの初期値によっては半角文字の幅が全角文字の半分にならない場合がある。CSS の font-familyプロパティ（”font-family : monospace ;”）で代替となりHTML5ではtt要素は廃止

u テキストにアンダーラインを引く。HTML4.01 Strict 廃止 XHTML1.0 Strict 廃止 XHTML1.1 廃止でHTML5ではu要素はテキストをラベル付けすることを示すので、非推奨。

acronym 頭字語であることを明示。HTML5においては abbr要素がacronyms(頭字語)の役割も含み、acronym要素が廃止されたため、略語のマーク付けはabbr要素に統一されました。

そのためHTML4.01, XHTML1.0, XHTML1.1においても abbr要素とacronym要素を特別使い分ける必要はなく、略語のマーク付けはabbr要素に統一applet Javaアプレットを挿入。HTML4.01, XHTML1.0 の Transitional, Framesetではapplet要素及び全ての属性が非推奨。

HTML4.01 Strict, XHTML1.0 Stirct, XHTML1.1 ではapplet要素は廃止されました。また、HTML5においてもapplet要素は廃止　代替案として Javaアプレットを埋め込む場合、applet要素に代わってオブジェクト全般を配置できる obeject要素を使用。

ただし、object要素でJavaアプレットを埋め込んだ場合、Internet Explorer では動作しないことから非推奨・廃止された要素であっても、Javaアプレットでしか提供できない場合は後方互換を確保するにはapplet要素を使用せざる得ません。

dir dir要素（directory list）は複数の段からなるディレクトリ（一覧）を示すリスト要素。仕様では複数の段からなるディレクトリリストを作成するとなっていますが、どの UA も ul要素と同じ表示です。

dir要素は WWW の黎明期からある古い要素で、現在は古い HTML との互換のためだけに残されており、リストを作るには ul要素, ol要素を使うことが推奨されています。HTML5においても、廃止

<applet> Javaアプレットの埋め込み
<bgsound> BGMの再生
<blink> 文字の点滅
<font> フォントのサイズ・色・種類
<frame> フレーム内の設定
<frameset> ウィンドウの分割
<isindex> 1行のテキスト入力欄
<marquee> 文字のスクロール
<nobr> 改行させない
<noembed> embed要素の代替コンテンツ
<noframes> フレームの代替コンテンツ
<rb> ルビベース

HTML5ではタグを正しく使い分けることで、文書構造が明確になり、保守性や可読性の向上につながります。SEOはタグだけで決まるものではありませんが、適切なセマンティックマークアップは検索エンジンがコンテンツを理解しやすくする助けになります。

この記事を見た人は、下記の記事にも注目しています！