developmentHTML52018.03.03HTML5タグの簡単な説明とRYBE流マークアップテンプレートHTML5の追加されたarticleタグやsectionタグなども含めてタグの説明とテンプレートを作りました。タグの解釈や使い方などがサイトの構成や人によってそれぞれ異なったり少し複雑な印象もありますが、より文書構造を明確にできるようになった分意識してマークアップしていくとユーザーにとっても読みやすいサイトが作れると思います。SEO対策というだけではなく、コンテンツの構成を考えるためにも一度勉強してみると面白いかもしれません。このテンプレートのマークアップは私の解釈になってますが、HTML5のタグの解釈は人それぞれですので自分の使いやすいように変更して使用してください。*マークアップでおかしいところがあったらご指摘ください。*一般的なコンテンツのページの書き方と、ブログなどのアーカイブ形式の書き方の両方とも記述してあるので使わないものは削除してください。タグの説明DOCTYPEHTML5のドキュメントタイプ宣言はとてもシンプルになっています。html>lang言語指定をhtmlタグで行います。(日本語は”ja”、英語が”enです。lang="ja">charset文字コードの指定をします。HTML5からは”UTF-8′′が推奨されています。charset="UTF-8">viewportレスポンシブデザインに必要な表示領域を指定。/>titleWebページのタイトル(題名)を指定。SEOで重要な部分なので、キーワードを組み込んだものをつけると良い。<title>title</title>html5.jsGoogleで配布されているJavaScriptを利用して、HTML5に対応指定ないIE8以前の対策です。src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->iconブラウザのタブなどに表示されるアイコンの表示を指定します。icon"と指定します。href="ファビコンへのパス/favicon.ico">stylesheetスタイルシート(CSS)へのリンクを指定。type="text/css">scriptJavaScript(jQuery)へのリンクを指定。Protcol)SNSシェアの基本的な設定(ページのタイトル/ページの種類/ページのURL/サムネイル画像のURL/サイト名/ページのディスクリプション)を指定できます。developersのから取得できます。/>Twitter用設定シェアされた時に表示されるカード種類の指定。Card:ビデオ/オーディオ/メディアを提供)Twitterのユーザー名を指定。/>headerページまたはコンテンツのヘッダー情報をまとめるタグ。<header><h1>タイトル</h1></header>navナビゲーションを指定するタグ。ulタグと一緒にグローバルナビゲーションなどで使われることが多い。href="リンクパス">リンク名</a></li></ul></nav>mainフローコンテンツが期待されるでの範囲を示すタグで、メイン要素を包含するドキュメントまたはセクションで固有の内容にするべきです。Standardと仕様が若干違うので気を付けましょう。<main>メインコンテンツ</main>articleページ内で独立したメインとなるコンテンツ(記事)の範囲を示すタグ。一般的にメインコンテンツの初めから最後までその関連情報(属するカテゴリーや更新日など)も含めて囲みます。<article><h1>メインコンテンツタイトル</h1><p>メインコンテンツ本文......</p></article>section見出しと内容をまとめるセクションのタグ。基本的には見出しが入るコンテンツのひとかたまりが範囲で入子構造にもできます。<section><h2>セクションタイトル</h2><p>セクションコンテンツ本文......</p></section>footerページまたはコンテンツのフッターであることを示すタグで文書の締めの部分です。コピーライトなどそれほど重要ではない補足的な情報が含まれます。