制作のご相談はこちら
必要なコードをまとめたシンプルなHTML5テンプレート

公開日 : 2017年12月25日

必要なコードをまとめたシンプルなHTML5テンプレート

WEBサイトを作成する際に基本的なHTML5のひな形があると時短になりますし便利ですよね。
一言にhtmlテンプレートといっても、作成した人の好みや更新時期によって様々なパターンがあります。
なのでどのタグを使っていいか迷う方もいらっしゃるかと思います。

今回はaekana的HTML5の基本的なテンプレートをメモします。

テンプレート完成形

<!DOCTYPE html>

<html lang="ja">

<head>

<!--文字コード-->
<meta charset="utf-8">

<!--IEでは最新バージョンのレンダリングモード(edge)を使用-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!--ページタイトル-->
<title></title>

<!--ページ説明文-->
<meta name="description" content="">

<!--スマホ対応-->
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--ファビコン-->
<link rel="shortcut icon" href="">

<!--外部CSS-->
<link rel="stylesheet" href="">

<!--テストページなどでインデックスとリンクの巡回をさせたくない時に使用 -->
<!--<meta name="robots" content="noindex, nofollow">-->

</head>
<body>

	<article>

	<header>
		<nav></nav>
	</header>

	<section></section>

	<footer></footer>	

	</article>

<!-- 外部javascript -->
<script type="text/javascript" src=""></script>
</body>
</html>

タグ解説

article

articleは単体で内容が完結する場合に使用します。
関連する内容であればarticleを内包することが可能です。

<article>
	<h2>タイトル1</h2>
	<p>タイトル1の内容</p>
	<article>
	タイトル1に関連する内容
	</article>
</article>

header

headerはイントロダクションのエリアで使用します。
複数使用できますので、各articleごとにheaderを配置することも可能です。

<article>
	<header>
		<h2>タイトル1</h2>
	</header>
	<p>タイトル1の内容</p>
</article>
<article>
	<header>
		<h2>タイトル2</h2>
	</header>
	<p>タイトル2の内容</p>
</article>

nav

navは主要のナビゲーションエリアで使用します。
いわゆるグローバルナビゲーションと呼ばれる箇所に使用するのに適しています。

<article>
	<header>
		<h1>タイトル1</h1>
		<nav>ページのナビゲーション</nav>
	</header>
	<p>タイトル1の内容</p>
</article>

section

sectionは章、節のような意味合いです。本でよくある1章、2章…という部分です。
見出しが無いような構成の場合は無理にsectionを使わずdivを使用したほうがよいかもしれません。

<article>
	<header>
		<h1>タイトル1</h1>
		<nav>ページのナビゲーション</nav>
	</header>
	<section>
		<h2>見出し1</h2>
		<p>見出し1の内容</p>
	</section>
</article>

footer

footerは直前の情報を示す際に使用します。
複数使用可能ですので、全体のフッタ、セクションのフッタと分けることが出来ます。

<article>
	<header>
		<h1>タイトル1</h1>
		<nav>ページのナビゲーション</nav>
	</header>
	<section>
		<h2>見出し1</h2>
		<p>見出し1の内容</p>
	</section>
	<footer>
		<p>コピーライト</p>
	</footer>
</article>

htmlはあくまで一例です。
WEBコンテンツは日進月歩で進んでいき、私も日々勉強中なので定期的にアップデートしていきます。
文章の内容を理解して適切なタグを使っていきましょう。