MENU
CLOSE
システムデザイン Edit : 2018.10.11 Update : 2024.11.07

HTML5で追加されたタグまとめ

一からサイトをつくる時、基本的にHTML5でコーディングを行っています。
HTML4までのdiv要素で名前を付ける記法ではなく、あらかじめ大まかな要素でくくるのがHTML5の特徴の1つだと思います。
そこで、html5で追加された要素、また廃止された要素を紹介して、理解を深めたいとおもいます。
 

HTML5で新規追加された要素

タグ 説明
<article> 内容が単体で完結するセクションであることを示す際に使用します。 例えば、フォーラムでの投稿、雑誌や新聞の記事、ブログのエントリ、コメントなど。
<aside> その部分がウェブページ内における余談・補足情報のセクションであることを示す際に使用する。
<audio> 音声を再生する際に使用。 再生する音声ファイルは、src属性で指定。
<bdi> 日本語や英語などは左から右に書きますが、アラビア語やヘブライ語などは右から左に書く。この文字を左右混在させたい場合に利用する。
<canvas> 2Dのグラフィックスを描く要素。<canvas>を使用することで、標準のHTMLとJavaScriptだけで、グラフやゲームグラフィックスなどの図形をすばやく表示できるようになる。
<datalist> フォームの入力欄などで入力候補となるデータリストを定義します。 各データのリスト項目は、<option>タグで定義する。
<embed> 外部アプリケーションやインタラクティブなコンテンツ、例えば、Flashなどのプラグインを必要とするデータをHTML文書に埋め込む際に使用する。
<figcaption> 図表のキャプションを示す際に使用。<figure>~</figure>の中に配置すると、図表にキャプションを付けることができる。
<figure> 図表であることを示す際に使用。 ここで言う図表とは、文書の本文(メインフロー)から参照されるようなイラスト・図・写真・ソースコードなどのことです。
<footer> 直近のセクションのフッタであることを示す。
<header> イントロダクションやナビゲーショングループであることを示す際に使用。
<keygen> key generatorの略で、フォーム送信時にキーを発行して暗号化する際に使用。
<mark> 文書内の該当テキストをハイライトして目立たせる際に使用する。<strong>や<em>のようにその部分を強調することが目的ではなく、ユーザーが参照しやすいように目立たせることが目的。
<meter> 下限や上限などがあらかじめ分かっている、規定範囲内の測定値を示す際に使用。 例えば、ディスク使用量、検索結果の関連性、候補者の得票など。測定値は、必須属性のvalue属性で指定。
<nav> ビゲーションであることを示す際に使用。 ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのこと。
<output> 計算結果を示す際に使用。
<progress> タスク完了までの進行状況を示す際に使用。
<ruby>
<rt><rp>
ルビをふる際に使用。
<section> ウェブページ内のその部分が、一つのセクションであることを示す際に使用。
<source> 動画や音声などのメディアファイルのURLや種類を指定する際に、<video>~</video>などのメディア要素の中で子要素として使用。
<summary> <summary>の親要素となる<details>の要素内容の要約・キャプション・説明を表します。
<time> 日付や時刻を表記する際に、グレゴリオ暦による日付や24時間表記の時刻で正確に示す際に使用。 日時を記述するのに、必ず<time>を使用しなくてはならないわけではなく、コンピュータやブラウザが理解できるように日時を示すことが目的です。
<track> メディア要素 (<audio> および <video>) の子として使用。この要素は自動的に処理される字幕など、時間指定されたテキストトラック (または時系列データ) を指定できる。
<video> 動画を再生する際に使用。<video>タグを使用することで、ユーザーにFlashなどのプラグインをインストールしてもらうことなく、標準のHTMLからシンプルに動画を扱えるようになる。
   

HTML5で廃止された要素

  <acronym> / <applet> / <basefont> / <bgsound> / <big> / <blink> / <center> / <dir> / <font> / <frame> / <frameset> / <isindex> / <marquee> / <nobr> / <noembed> / <noframes> / <rb> / <strike> / <tt>   HTML5ではarticleやsection、video等、視覚的な情報に関するタグが追加されたように思えます。
きちんと理解して的確に使用することで、整理されたウェブサイトをつくることができます😊  

Miki Kohinata

大学時代、将来独立することを決めエンジニアの道へ。就職したIT企業で藤本と運命的に出会いKOHIMOTO設立。目指すのは人の心に寄り添えるエンジニア。人生のテーマソングはWeekend by 5lack。