ホームページマスターTOPページへ
初心者の為のホームページ作成支援サイト powerd by Google
HOME >HTML5への切り替え

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ではヘッダタグを記述して ヘッダ部分であることを示すことができます。

旧ソース

<div id="header">
<h1>見出し</h1>
<//div>

下向き矢印

新ソース

<header>
<h1>見出し</h1>
</header>

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

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

旧ソース

<object width="425" height="344">
<param name="movie" value="http://www.youtube.com/v/azufyz5V-D0&hl=de&fs=1">
<param name="allowFullScreen" value="true">
<embed src="http://www.youtube.com/v/azufyz5V-D0&hl=de&fs=1" type="application/x-shockwave-flash" width="425" height="344"></embed>
</object>

下向き矢印

新ソース

<video src="douga.mp4"></video>

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

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

旧ソース

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

下向き矢印

新ソース

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

以上まとめると以下のようになります。一般的な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制作の幅が広がります。
  1. HTMLソースを見た際、サイトのヘッダ部分、本文、フッタ部分の場所等が明確にわかる
  2. スマートフォンの最新ブラウザでの閲覧に適している
  3. CSS3を併用すると角丸のボックスを表示できるようになる
  4. メタタグのスタイル言語指定やスクリプト言語指定の記述が不要に

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

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

文字コード


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


HOME

Copyright (C) 2003-2015 ホームページマスター All rights reserved.