hajipion.com

UI/UX designer blog & creative portfolio

バーーーーーーーッと全部解説!HTML5で新しく追加されたタグ一覧

html5から新しく追加されたタグ

HTML5のタグ

HTML5のタグは、「新しく追加されたタグ」「廃止されたタグ」「定義が変わったタグ」「既存のタグ」の4種類に分けられますが、今回は「新しく追加されたタグ」の簡単な解説をしたいと思います。

HTML5における文書論理構造の捉え方・考え方が理解できるようになれば幸いです!

ちなみに、新しく追加されたタグ一覧はこちら↓

HTML5で、新しく追加されたタグ

ではひとつずつ見ていきましょう!

文書論理構造に関わるタグ

以下はそのサイトの構造やRSS配信のときに関わってくる重要なタグです。

その論理的な役割などを理解しながら覚えるとよいでしょう。

<header>

ヘッダーに使います。今まで

とやっていたのが、

こうなるわけですね。

ヘッダーになにを含めるのかは人によってまちまちです。

たとえばメインビジュアルメインビジュアルをヘッダーに含めるかどうか、メインメニューをヘッダーに含めるかどうかなど、意見は様々ですが……自分が信じる方でよいでしょう(笑)

考えて、自分なりに意図が言えればそれでよしです。

<footer>

同じく、フッターですね。

copyrightや下部サイトマップなどに使用します。

「上部に戻る」ボタンをフッターにいれるかどうかは、迷いどころです(笑)

<nav>

メインメニューを司るタグです。

そのサイトがどんなページやエリアをもっているのかをプログラムに教える重要なタグなので、漏れがないように気をつけましょう!

特にサイドバーにメインメニューがある場合に忘れやすいですね。

サイドメニューであっても、<nav>は必ずつけましょう。

<article>

記事の内容、コンテンツ本文が存在するエリアにつけるタグです。

RSS配信の際、このタグの内容から情報がとってこられたりするので、大変重要な役割を担っています!

基本的にひとつのページに「ひとつだけ」あるべきですが、コメントエリアを<article>を入れ子にしてマークアップする場合もあるみたいですね。

<aside>

補足情報をあらわすタグです。

本文とは直接関係のない裏話や註釈などに使われることを想定しているそうですが、それだとあまり使わなそう……。

なので、個人的にはサイドバーによく使ってます。

サイドバーを「メインコンテンツに関する補足情報」とみなしているわけですね。

「この記事と関連する記事」のようなエリアにもいいかも!

<section>

ざっくりと「ひとまとまり」であることを示します。

HTML5の論理構造は「セクショニングコンテンツ」という考え方をベースに構築されているので、<section>で囲まれたエリアが本当にひとまとまりにしてよいものか、常に考える必要があります。

たとえば、HTML5では<section>で囲まれて階層化されていれば、なんと<h1>タグを複数使いまわすことも推奨されているのです!

(これについてはまたいつか書きます)

また、「ひとまとまり」とはいっても、「意味的なひとまとまり」なので、レイアウトのための「配置的なひとまとまり」をつくる場合には今まで通り<div>を使って下さい。

コンテンツ自身の分類に関わるタグ

<time>

その名の通り日時を示すタグです。

文章中にでる日付や日時にそのまま使ってもいいですし、とある記事の公開日時を示すために使ってもいい、意外と汎用性の高いタグですね( ̄▽ ̄)

<figure>

図表であることを示します。

イラスト・図・写真など、本文中から参照される図表の<img>タグを囲みます。

基本的に<figcaption>と共に使われていますね。

<figcaption>

<figure>タグで囲んだ図表にキャプションをつけるときに使います。

上記の例の通り<figure>タグの中にマークアップする感じですね。

<summary>

後述する<details>の要約を示します。

<details>

その名の通り、任意の情報の「詳細」を示します。

<summary>によってその詳細を要約した、いわゆる見出しを囲みます。

コンテンツ自身の分類に関わるタグ
<time>:
日時を示す
<figure>:
図表を示す
<details>:
詳細を示す

コンテンツを生み出す系のタグ

<canvas>

図形やアニメーションを描画できる画期的なタグです。

HTML5といったらこれ!


<video>

<img>タグを使うように動画を埋込みできます。

<video src="foobar">のように指定するか、後述の<source>タグを使ってファイルを指定する感じですね(´▽`)

<audio>

<video>タグと同じ要領で、音声ファイルを埋め込めます!

便利になりましたね( ̄▽ ̄)

<source>

<video><audio>のソースや種類を指定します。

<track>

キャプチャータイトルや字幕がつけられる便利なタグです。

<video>タグや<audio>タグの子要素として使われます。

<embed>

FLASHやMIDIファイルなどを埋込みするときに使います。

<menu>

<nav>タグとごっちゃになりそうですが、<nav>はサイトのナビゲーション、<menu>は「操作メニュー」を作成するタグです。

サイトよりもWebアプリなどで用いられそうですね。

 ↓



<command>

<menu>タグで操作メニューを作成する際、コマンドを指定するためのタグです。

数値・フォーム系のタグ

<datalist>

フォーム入力の入力候補を定義します。

まず、<input>要素のautocomplete属性の値をonにします。

次に<datalist>のid属性の値と、<input>タグのlist属性の値を一致させます。

<option>のvalue属性に値をいれて、入力候補の定義が完了です!

 ↓

実際、超便利です。

<keygen>

フォームを送信する際にキーを発行するタグです。

key generatorの略ですね。

公開鍵と秘密鍵のペアを生成するためのコントローラーを生成してくれます。

 ↓

<progress>

タスクの進行状況を表示するタグです。

HTML5ではサイトよりもアプリ用のデフォルトタグが増えた印象が強いですね。

<output>

<input type="range">などでユーザーが入力した結果を表示するためのタグです。

 ↓

+ 計算結果:0

まだブラウザ対応はそんなに追いついていないようです…。

<meter>

割合としての測定値を示します。

たとえばりんごを20個中8個食べたときは、

 ↓
20個中8個

となります。

補助系のタグ

<ruby>

ルビをふるためのタグです。見たことある人・使ったことある人もいると思いますが、HTML5でやっと標準仕様となりました。

使い方は、ルビのテキストを<rt>で囲み、<ruby>タグに対応していないブラウザのために<rp>でルビを囲む『()』などの記号を指定します。


()
(ほん)

<rt>

上記の<ruby>タグにおいてルビのテキストを囲むためのタグですね。

Ruby Textの略です。

<rp>

同じく、Ruby Parenthesesの略ですね。

<ruby>タグに対応していないブラウザでは上記の例は、

日(に)本(ほん)

のようになります。

<wbr>

単語の区切り(改行)を示すタグです。日本語ではあまり気にしないでも大丈夫です。

英字が続くときなど必要なときに使いましょう。

<mark>

文章をハイライトします。

 ↓

あなたが検索したのはHTML5というワードですね。

<bdi>

書字方向の相違から起こる問題を解決するタグです。

具体的に言うと、アラビア語などは右から左に読むので、ピリオドやコロンなどの記号が左側に配置されてしまい、それがリスト項目だったときにそこだけおかしな表示になってしまいます。

そんなときにその文字だけを<bdi>で囲めば、その部分だけを独立してくれるので、レイアウトが崩れなくてすむのです。

普段はあまり使わないタグかもしれませんね。

以上がHTML5から新しく追加されたタグになります。

次の記事は逆に、HTML5で廃止されたタグについて書くかも!

HTML5を学ぶのにオススメな本

HTML5はよりセマンティックにコードを書くためのセクショニングコンテンツという考え方が採用されています。

それを簡潔に、かつ明快に解説している本がこちら!

HTML5のコードを自信をもって書けるようになります。

非エンジニア・デザイナーの人でも分かりやすい本なので、HTMLの基礎を学びたい!という初心者の人もぜひ〜