HTML5への切り替え

以前は多くのホームページがHTML4.01で作成されていましたが現在ではHTML5.2までリリースされるようになりました。
ここでは旧ヴァージョンのHTML4.01から近年多くのホームページが採用している HTML5へ切り替えるやり方の解説をしていきます。例として動画を掲載していたページの編集の解説です。赤文字は変更箇所になります。

以前ホームページをHTML4.01で作成した方は比較的容易にHTML5に切り替える事が可能です。

■ ドキュタイプ宣言の簡略化

まずはHTMLソースの最初の1行のDOCTYPE宣言が簡略化されています。

旧ソース

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>4.01のHP</title>
</head>
<body>
ようこそわたしのホームページヘ
</body>
</html>

下向き矢印

新ソース

<!DOCTYPE html>
<html>
<head>
<title>5のHP</title>
</head>
<body>
ようこそわたしのホームページヘ
</body>
</html>

■ ヘッダタグでヘッダ部分であることを示す

旧HTMLの場合、ホームページの上部にある見出しやナビゲーションはテーブルタグや divタグのボックスでくくっていましたがHTML5ではヘッダタグを記述してヘッダ部分であることを示すことができます。

旧ソース

下向き矢印

新ソース

■ ビデオタグで動画ファイルを表示する

以前は以下のように<object>タグを用いて設置して動画を再生していましたが現在では<video>タグでシンプルに再生できます。

旧ソース

下向き矢印

新ソース

■ フッタタグでフッタ部分であることを示す

旧HTMLの場合、ホームページの下部にある問い合わせ先や著作表記は<divタグ>などでくくっていましたがHTML5では<footer>タグを記述してフッタ部分であることを示すことができます。

旧ソース

<div id="footer">
Copyright (C) 2000-2019 サイト名 All rights reserved.
<//div>

下向き矢印

新ソース

以上まとめると以下のようになります。一般的なWEBサイトでは下記のlang属性や文字コード指定の記述がされていますが省略することも可能です。

新ソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>5のHP</title>
</head>
<body>
<header>
<h1>見出し</h1>
</header>
ようこそわたしのホームページヘ
<video src="douga.mp4"></video>
<footer>
Copyright (C) 2000-2019 サイト名 All rights reserved.
</footer>
</body>
</html>

■ HTML5に切り替えるメリット

HTML5に切り替えると例として以下のようなメリットがありweb制作の幅が広がります。

HTMLソースを見た際、サイトのヘッダ部分、本文、フッタ部分の場所等が明確にわかる
スマートフォンの最新ブラウザでの閲覧に適している
CSS3を併用すると角丸のボックスを表示できるようになる
メタタグのスタイル言語指定やスクリプト言語指定の記述が不要に

■ 文字コードを指定して保存する

一通りHTML5でソースを記述できたら文字コードを指定して保存します。
メモ帳の「ファイル」→「名前を付けて保存」から図のようにindex.html とファイル名を入力してファイルの種類はすべてのファイル、文字コードは HTML5推奨のUTF-8を選択し保存ボタンを押します。

文字コード

以上で基本的な切り替え作業は完了です。

Follow @hp_master_2003