HTML5タグの簡単な説明とRYBE流マークアップテンプレート

HTML5の追加されたarticleタグやsectionタグなども含めてタグの説明とテンプレートを作りました。
タグの解釈や使い方などがサイトの構成や人によってそれぞれ異なったり少し複雑な印象もありますが、より文書構造を明確にできるようになった分意識してマークアップしていくとユーザーにとっても読みやすいサイトが作れると思います。ただ単にSEO対策というだけではなく、コンテンツの構成を考えるためにも一度勉強してみると面白いかもしれません。
このテンプレートのマークアップは私の解釈になってますが、HTML5のタグの解釈は人それぞれですので自分の使いやすいように変更して使用してください。
*マークアップでおかしいところがあったらご指摘ください。
*一般的なコンテンツのページの書き方と、ブログなどのアーカイブ形式の書き方の両方とも記述してあるので使わないものは削除してください。

タグの説明

DOCTYPE HTML5のドキュメントタイプ宣言はとてもシンプルになっています。 <!DOCTYPE html>
lang 言語指定をhtmlタグで行います。(日本語は”ja”、英語が”enです。) <html lang="ja">
charset 文字コードの指定をします。HTML5からは”UTF-8″が推奨されています。 <meta charset="UTF-8">
viewport レスポンシブデザインに必要な表示領域を指定。(width:表示領域、initial-scale:倍率の初期値、user-scalable:ユーザのスケール操作の許可でyes/no) <meta name="viewport" content="width=&device-width,initial-scale=1.0,user-scalable=no" />
title Webページのタイトル(題名)を指定。SEOで重要な部分なので、キーワードを組み込んだものをつけると良い。(文字数は日本語で30文字程度が目安) <title>title</title>
html5.js Googleで配布されているJavaScriptを利用して、HTML5に対応指定ないIE8以前の対策です。 <!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
icon ブラウザのタブなどに表示されるアイコンの表示を指定します。(IE8以前のものに対応するにはrel=&qupt;shortcut icon"と指定します。) <link rel="icon" href="ファビコンへのパス/favicon.ico">
stylesheet スタイルシート(CSS)へのリンクを指定。 <link href="CSSファイルへのパス/CSSファイル名.css" rel="stylesheet" type="text/css">
script JavaScript(jQuery)へのリンクを指定。 <script src="JavaScriptファイルへのパス/JavaScriptファイル名.js"></script>
OGP(Open Graph Protcol) SNSシェアの基本的な設定(ページのタイトル/ページの種類/ページのURL/サムネイル画像のURL/サイト名/ページのディスクリプション)を指定できます。 <meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
Facebook用OGP Facebook for developersのから取得できます。 <meta property="fb:app_id" content="fb:app_id(15文字の半角数字)" />
Twitter用設定 シェアされた時に表示されるカード種類の指定。(summary:デフォルト、summarylargeimage:Summaryの画像を大きく表示、App Card:スマホアプリで直接ダウンロードして詳細を表示、Player Card:ビデオ/オーディオ/メディアを提供)Twitterのユーザー名を指定。 <meta name="twitter:card" content="Twitterカードの種類(summary/summarylargeimage)" />
<meta name="twitter:site" content="@ユーザー名" />
header ページまたはコンテンツのヘッダー情報をまとめるタグ。 <header>
<h1>タイトル</h1>
</header>
nav ナビゲーションを指定するタグ。ulタグと一緒にグローバルナビゲーションなどで使われることが多い。 <nav>
<ul>
<li><a href="リンクパス">リンク名</a></li>
</ul>
</nav>
main フローコンテンツが期待されるでの範囲を示すタグで、メイン要素を包含するドキュメントまたはセクションで固有の内容にするべきです。
(W3CのHTML仕様では、article/aside/footer/header/navを祖先要素に持つことは不可などHTML Living Standardと仕様が若干違うので気を付けましょう。)
<main>
メインコンテンツ
</main>
article ページ内で独立したメインとなるコンテンツ(記事)の範囲を示すタグ。一般的にメインコンテンツの初めから最後までその関連情報(属するカテゴリーや更新日など)も含めて囲みます。 <article>
<h1>メインコンテンツタイトル</h1>
<p>メインコンテンツ本文......</p>
</article>
section 見出しと内容をまとめるセクションのタグ。基本的には見出しが入るコンテンツのひとかたまりが範囲で入子構造にもできます。 <section>
<h2>セクションタイトル</h2>
<p>セクションコンテンツ本文......</p>
</section>
footer ページまたはコンテンツのフッターであることを示すタグで文書の締めの部分です。コピーライトなどそれほど重要ではない補足的な情報が含まれます。 <footer>
<span>Copyright ©...</span>
</footer>

ソースコード、テンプレート

一般的なコンテンツページ用テンプレート


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>title</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="icon" href="ファビコンへのパス/favicon.ico">
<link href="CSSファイルへのパス/CSSファイル名.css" rel="stylesheet" type="text/css">
<script src="JavaScriptファイルへのパス/JavaScriptファイル名.js"></script>
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="fb:app_id" content="fb:app_id(15文字の半角数字)" />
<meta name="twitter:card" content="Twitterカードの種類(summary/summarylargeimage)" />
<meta name="twitter:site" content="@ユーザー名" />
</head>
<body>
<header>
	<h1>タイトル</h1>
	<nav>
		<ul>
			<li><a href="リンクパス">リンク名</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<header>
			<h1>コンテンツタイトル</h1>
			<p>コンテンツ導入文章</p>
		</header>
		<p>テキスト.......</p>
		<section>
			<h2>サブタイトル</h2>
			<p>テキスト.......</p>
			<section>
				<h3>サブタイトル</h3>
				<p>テキスト.......</p>
			</section>
		</section>
		<section>
			<h2>サブタイトル</h2>
			<p>テキスト.......</p>
		</section>
	</article>
</main>
<footer>
	<span>Copyright ©......</span>
</footer>
</body>
</html>

ブログのアーカイブやインデックスページ用テンプレート


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title>title</title>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link rel="icon" href="ファビコンへのパス/favicon.ico">
<link href="CSSファイルへのパス/CSSファイル名.css" rel="stylesheet" type="text/css">
<script src="JavaScriptファイルへのパス/JavaScriptファイル名.js"></script>
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="ページの種類" />
<meta property="og:url" content="ページのURL" />
<meta property="og:image" content="サムネイル画像のURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:description" content="ページのディスクリプション" />
<meta property="fb:app_id" content="fb:app_id(15文字の半角数字)" />
<meta name="twitter:card" content="Twitterカードの種類(summary/summarylargeimage)" />
<meta name="twitter:site" content="@ユーザー名" />
</head>
<body>
<header>
	<h1>タイトル</h1>
	<nav>
		<ul>
			<li><a href="リンクパス">リンク名</a></li>
		</ul>
	</nav>
</header>
<main>
	<section>
		<h2>サブタイトル</h2>
		<p>テキスト.......</p>
	</section>
	<section>
		<h2>サブタイトル</h2>
		<p>テキスト.......</p>
	</section>
	<section>
		<h2>サブタイトル</h2>
		<p>テキスト.......</p>
	</section>
</main>
<footer>
	<span>Copyright ©......</span>
</footer>
</body>
</html>

Related Posts