初心者必見！HTML5とは？HTML4とどう違う？簡単にまとめてみた！
千葉のホームページ制作会社Webkidのフロントエンドエンジニア たくとです。
今回はホームページ制作で使用する「HTML5」について備忘録を残していこうと思います。
HTML5とは
2014年にW3Cより勧告された、HyperText Markup Languageの5回目の改定版のことです。
HTML4と比較して、新しいタグの追加やフォーム機能の充実、動画・音声データの扱いが簡単になったこと等がHTML5の特徴です。
新しいタグについて
では、HTML5で追加された使い勝手の良いタグを忘れないように下に記しておきます。
<article> — 自己完結したセクションを表す
<aside> — 補足的なセクションを表す
<audio> — プラグインを使わずに音声を再生する
<bdi> — 隔離されたテキストを表す
<canvas> — スクリプト使ってグラフィックスを描く
<datalist> — 入力候補のリストを作る
<embed> — プラグインデータを埋め込む
<figcaption> — 図版にキャプションを付ける
<figure> — 参照される図版を表す
<footer> — フッタを表す
<header> — ヘッダを表す
<keygen> — 暗号鍵を生成する （廃止予定）
<main> — 文書のメインコンテンツを表す
<mark> — テキストのハイライト表示
<meter> — 特定範囲内の数量や割合を示す
<nav> — ナビゲーションを表す
<output> — 計算結果の出力欄を作る
<progress> — 作業の進捗状況を示す
<rb> — ルビの対象テキストを表す
<rp> — ルビテキストを括弧で囲む
<rt> — ルビテキストを表す
<rtc> — ルビテキストのコンテナ
<ruby> — ルビ（ふりがな）を振る
<section> — 一般的なセクションを表す
<source> — メディアリソースの候補を指定する
<time> — 日付や時刻を表す
<track> — 動画・音声と同期するテキストトラック
<video> — プラグインを使わずに動画を再生する
<wbr> — 改行位置の候補を表す引用元：TAG index「HTML5で追加された要素一覧」
（https://www.tagindex.com/html5/basic/added.html）
（2019年11月23日）
HTML5とHTML4の比較
1. DOCTYPE宣言が簡単に
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" “http://www.w3.org/TR/html4/strict.dtd"><!DOCTYPE html>2. 文字コードの指定も簡単に
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta charset="utf-8">3. スタイルとスクリプトのtypeが不要
<link rel='stylesheet' type='text/css' href='style.css'>
<script type='text/javascript' src='script.js'></script><link rel='stylesheet' href='style.css'>
<script src='script.js'></script>4. 構造がシンプル
HTML5によって<header><footer><main><section><article><aside>など、タグそれぞれが役割をはっきりと持つようになった為、ソースコードの構造をシンプルにすることが可能です。今まで<div>でマークアップしていた部分をそれぞれ適切なタグに置き換えることで、メンテナンス性や可読性が高いソースコードを実現することが可能です。
HTML5.1について
HTML5.1とは2016年11月にHTML5をマイナーバージョンアップデートとしてW3Cによって勧告されたものになります。HTML5と大きな違いはありませんが、使用できるタグが追加されておりHTML5で定義しきれなかった部分の追加がされています。
今回は備忘録としてタグを残しましたが、次回は実際にホームページ制作の現場で使用しているソースコードを記録したいと思います。
特にHTML5を使用すると便利な部分を重点的に残していきたいと思います。
では、また次回の更新まで。