もう迷わない!HTML5の基本的なテンプレートはこれだ!(2017年版)

今、Webサイトを制作するなら「HTML5」ですね。
あらかじめ、テンプレート化すると制作が楽になりますよ。
基本的なテンプレートを紹介します。

基本的なHTML5のソースコードは以下のとおりです。

HTML5コード

<!DOCTYPE html>
<html lang="jp">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<title></title>
	<!--[if lt IE 9]>
	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<link rel="shortcut icon" href="favicon.ico">
	<link rel="stylesheet" href="css/style.css">
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
</head>
<body>
	<header>
		<h1>サイト名</h1>
	</header>
	<nav>
		<div id="gnav">
			<ul>
				<li><a href="">メニュー</li>
			</ul>
		</div><!-- /gnav -->
	</nav>
	<div id="contents">
		<div id="main">
		</div><!-- /main -->
		<div id="sub">
		</div><!-- /sub -->
	</div><!-- /contents -->
	<footer>
		<div id="copyright">Copyright (C) 2017 XXX. All Rights Reserved.</div>
	</footer>
</body>
</html>

Document Type宣言

<!DOCTYPE html>

HTML5では、Document Type宣言はとてもシンプルです。

html要素

<html lang="jp">
</html>

html要素は必須です。この中にソースコードを書いていきます。 言語指定は必須ではありませんが推奨項目です。

head要素

<head>
</head>

head要素も必須です。

文字エンコーディング宣言(文字コード)

<meta charset="utf-8">

HTML5の場合、基本となる文字コードは「utf-8」です。
他の文字コード(Shift_JISなど)を使用することも可能です。
文字化けを防ぐためにも、一番最初(head開始タグの次)に設置するようにしましょう。

viewport設定

<meta name="viewport" content="width=device-width, initial-scale=1">

スマートフォンなどPC以外のデバイスも対応するなら必須です。
色々書き方はあるのですが、GoogleのWebサイトでも使用されるコードを推奨します。

keywords属性

<meta name="keywords" content="">

keywords属性はその名の通り、Webページのキーワードを記述するmetaタグですが、SEO対策として用いられる目的が多いです。ただし、それも現時点ではあまり効果がないとも言われています。おまじない程度に設置する程度ですね。

description属性

<meta name="description" content="">

description属性はWebページの説明文を記述するmetaタグです。こちらもSEO対策として用いられる目的が多いですが、Googleなどの検索結果ページも表示される部分ですので、非常に重要になってきます。

titleタグ

<title></title>

titleタグは必須です。ブラウザの上部にも表示されますし、SEOの意味合いも非常に重要ですので、わかりやすいタイトルを付けるように心がけましょう。

IEのHTML5対策

<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

IE8以前はHTML5に対応していないので、HTML5のコードを記述すると正常にWebページが読み込まれない可能性があります。それを回避するためのJavaScriptを読み込みます。
ここではGoogleで配布されているJavaScriptを利用すると便利です。

ファビコン

<link rel="shortcut icon" href="favicon.ico">

ファビコンは、ブラウザのタブなどに表示されるアイコンです。設置しなくてもよいですが、あるほうが区別ができてユーザビリティー的には良いかと思います。 「link」要素は必ず「rel」と「heaf」が必須です。

CSSの読み込み

<link rel="stylesheet" href="css/style.css">

HTML4などでは「type」属性があったのですが、HTML5では不要になりました。
スタイルシートは外部ファイル化することをお勧めします。

JavaScriptの読み込み

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>

Webページをリズミカルな動きにするのを手助けしてくれるのがJavaScriptです。初心者には特に「jquery」というフレームワークを利用するのがお勧めです。 スタイルシート同様、JavaScriptも外部ファイル化することをお勧めします。
尚、JavaScriptのスクリプトによっては、headerタグ内ではなく、bodyタグ内に設置するほうが良い場合もありますので、適宜判断して設置してください。

linkタグとは違い、「type」属性は必須です。

bodyタグ

<body>
	<header>
		<h1>サイト名</h1>
	</header>
	<nav>
		<div id="gnav">
			<ul>
				<li><a href="">メニュー</li>
			</ul>
		</div><!-- /gnav -->
	</nav>
	<div id="contents">
		<div id="main">
		</div><!-- /main -->
		<div id="sub">
		</div><!-- /sub -->
	</div><!-- /contents -->
	<footer>
		<div id="copyright">Copyright (C) 2017 XXX. All Rights Reserved.</div>
	</footer>
</body>

bodyタグも必須です。
bodyタグ内のソースコードの記述は自由なのですが、ヘッダー部分には「header」タグを、メニュー部分には「nav」タグを、フッター部分には「footer」タグを利用することをお勧めします。

リファレンス

HTML5の書き方がわからなかったから仕様書を読むのが一番です。と言っても、原紙は英語ですので、日本語翻訳のリンクも併せて紹介します。

投稿日:2017年8月16日 | 編集

トラックバック歓迎です。以下URLにて登録をお願いいたします。

このエントリーのトラックバックURL:

↓↓↓トラックバックしてくださった方々↓↓↓
※トラックバックされても管理人がスパムと判断したものは公開されません。

top

ホームページ作成に役立つコーナー