#セマンティックWebとは
『HTMLのタグ』でわかりやすくするというのが『セマンティックウェブ』になります。
###＊＊検索エンジン最適化＊＊
テキストや情報データに特別な意味であったり、役割をもたせることによってWebブラウザーやコンピューターに正しく認識してもらうことです。
セマンティックWebはユーザに直接的な影響を与えません。
セマンティックを意識する意味として、検索した際にきちんと上位に表示されるように必要なテキストを認識させることです。
###＊＊アクセシビリティ＊＊
例えば、視覚障害を持ったユーザは、ウェブサイトの文章を読み上げるスクリーンリーダーなどのツールを使っています。その際に見出しや段落など適切にタグ付けすると、スクリーンリーダーが解析しやすくなり、より分かりやすい形態でコンテンツを提供できるようになります。
その他にも、きちんと構造化されたHTMLは機械だけでなく人間が読んでも分かりやすいのでメンテナンスしやすいなどメリットがあります。
#テキスト関連
###＊＊h1, h2, h3, h4, h5, h6の見出し＊＊
ユーザーや検索エンジンにページの重要なテーマを伝えるために、HTMLでマークアップするタグのことです。
####タグの使い方
#####1.コンテンツの要所に見出し出しタグを使う
要所を重要なテキストとして際立たせて、ユーザーによりわかりやすいコンテンツを提供しながら、見出しタグを使うことが重要
#####2.見出しタグを順番に使う
最も重要な大見出しにh1タグ、小見出しをh2タグ、次の小見出しをh3タグというように、必要に応じてh1から順番にh6タグまでをマークアップしながら、正しい順序で見出しタグを使うことが重要
#####3.見出しタグに画像を使う場合に意識
重要な名前、コンテンツ、リンクを表示するときは、画像ではなくテキストを使用します。テキスト コンテンツの代わりに画像を使用する必要がある場合は、alt 属性を使用して簡単な説明テキストを組み込みます。重要なテキストをマークアップする見出しタグに画像を使うことは、ユーザーの利便性を考慮すると、基本的にお勧めできません。
#####4.見出しタグの入れ子
見出しタグは、HTML5の「フローコンテンツ」であり、HTML 4.01におけるブロック要素、見出しタグの中に、基本的に「span」「img」「strong」「em」などのインライン要素を以下のように含めながら、入れ子にすることができます。
#####５.h１タグの複数使用
h1タグは、h1～h6の中で一番重要な見出しタグです。簡潔な内容にし、ユーザー・クローラーが認識しやすい見出しタグにすることが大切です。見出しタグは文章構造上、必要あれば複数使っても問題ありませんが、h1はセクション毎にひとつという使い方をします。
#####５.見出しタグの改行について
改行する前に簡潔な内容に改善できなか検討したうえで、見出しタグでマークアップすることが重要
#####６.見出しタグのリンク指定についついて
ブロック要素である見出しタグの中にインライン要素となる「aタグ」を含めて、見出しタグの子要素としてリンク指定することができます。
#####７.見出しタグのデザイン
最も重要な大見出しとなるh1タグを最初にマークアップし、次に小見出しをh2、h3と順番にマークアップし、CSSで調整して視覚的にわかりやすくしながら見出しタグをデザインしましょう。
###＊＊HTML5でよく使うタグ＊＊
####セクショニング要素
・header要素・・・ページの上部のブロックに使う
・footer要素・・・ページの下部のブロックに使う
・main要素・・・ページの主要なブロックに使う。ページに1度しか使えない
・nav要素・・・主要なナビゲーションを定義する
・artile要素・・・ページに関連するブロックで独立しても成り立つブロックに使う
・aside要素・・・ページに関連がない。または補足情報のブロックに使う
・section要素・・・「章」のブロックに使う
・sectionタグ内には、見出し要素が必要
・IE9より前のバージョンに対応させる場合には、html5shiv.jsを使う
#####
section
「意味のある文章のまとまり」で区切るために使います。
検索エンジンは
HTML5では、同じ見出し要素に対して暗黙の階層構造を構築できます。
<section>
<h1>HTML5</h1>
<section>
<h1>セマンティックWeb</h1>
<p>本文</p>
</section>
</section>
#####article
「独立したコンテンツ」を区切る要素。
通常は、Webサイトにおける1ページの本文そのものをarticleで区切ります。articleタグとsectionタグは入れ子にすることができます。
<article>
<h1>今日の天気</h1>
<section>
<h2>関東地方</h2>
<p>本文・・・</p>
<h2>中部地方</h2>
<p>本文・・・</p>
</section>
<article>
<h2>台風の経路</h2>
<p>本文・・・</p>
</article>
</article>
#####nav
サイトの主要なナヴィゲーション部分を区切る要素です。
主にグローバルナビゲーションに使われます。nav要素は、サイトの主要なナヴィゲーションに使うものであり、すべてのリンク部分に使うものではありません。
<article>
<nav>
<ul>
<li><a href="http://aaaa">事業内容</li>
<li><a href="http://bbbb">支店情報</li>
<li><a href="http://cccc">企業理念</li>
<li><a href="http://dddd">会社概要</li>
</ul>
</nav>
</article>
#####aside
そのページの本来の意味から外れたコンテンツを区切ります。
サイト内のバナー広告なども で区切ると良い。
<article>
<h1>今日の天気</h1>
<section>
<h2>関東地方</h2>
<p>本文・・・</p>
<h2>中部地方</h2>
<p>本文・・・</p>
</section>
<aside>
<h1>ゴールデンウィークのレジャー情報</h1>
<p>本文・・・</p>
</aside>
</article>
section,article,aside,navの違いが分かりにくいので、分からなければとりあえずsectionという考え方でも良い。
#####header
サイトのヘッダーは、サイトの上部にあるロゴやグローバルナビゲーションを含んだ部分の事です。
<header>
<h1>株式会社 B-side</h1>
<nav>
<ul>
<li><a href="http://aaaa">事業内容</li>
<li><a href="http://bbbb">支店情報</li>
<li><a href="http://cccc">企業理念</li>
<li><a href="http://dddd">会社概要</li>
</ul>
</nav>
</header>
各セクションのヘッダーとしても使用できる。
#####footer
サイトのフッター部分を区切ります。
<footer>
<ul>
<li><a href="http://bbbb">お問い合わせ</li>
<li><a href="http://cccc">このサイトについて</li>
<li><a href="http://dddd">利用規約</li>
</ul>
<p>
<small>Copyright 2017 B-side Journal</small>
</p>
</footer>
####HTML5.2の仕様変更点
#####１.＜dialog＞要素の追加
この要素で括られた要素は、モーダルウィンドウのように表示されるようになります。
ダイアログボックスは、現在のWebでは広く見られるものですが、JavaScriptを使用したり、CSSだけで実装したりと、実装方法は様々で定まった方法はありません。
しかし、アクセシビリティの観点においてはダイアログの表示部分はセマンティックではないという問題点が残っていました。
新しく用意された＜dialog＞要素タグを使うことで、問題が解決されました。
divタグで括ってダイアログを作る以上に、よりセマンティックなHTMLファイルにもなり、ダイアログで表示したい部分を＜dialog＞タグで括ればよいので使い方もとてもシンプルに行えます。
#####2.＜main＞要素の複数設置
＜main＞要素は、ある特定のページのメインコンテンツを指し示すために使用するタグになります。
HTML5.2以前では、各ページにコンテンツとして、1回限りの利用が可能とされていましたが、HTML5.2では、＜main＞要素を複数設置することが可能になりました。
ただし、従来のルールと同じように、最初に表示できるメインコンテンツは1つだけで、他はhidden属性をつけて隠す必要があります。
#####3.＜legend＞要素のヘッダー表示
＜legend＞要素は、一連のフォーム群を括るためのタグである＜fieldset＞要素の中のキャプションを表す要素なります。
HTML5.2以前では、＜legend＞要素の間にはプレーンテキストしか指定できなかったのですが、HTML5.2以降、ヘッダー要素を入れ子で指定することができるようになりました。
#####4.＜style＞要素の自由配置
HTML5.2以前では、ページ内の要素のスタイリングを行うための＜style＞要素は、通常はHTML文書内の＜header＞内に設置するものでしたが、HTML5.2では、正式に＜body＞内のどこでも自由に設置できるようになりました。
ですが、勧告内の注意書きでは、インラインでスタイルを指定しても、＜style＞タグ以前に出てきた要素にもスタイルが適用されてしまい、再描画を誘発してしまうため、機能効率上ではまだ＜header＞内に書いたほうがいいと言及されています。
#####5.＜iframe＞要素のPayment Request API
W3Cは2017年9月にPayment Request APIを勧告しています。
インターネットでの決済が日常的になっていることから、様々な決済フォームに変わり、決済の流れを標準化するために策定されました。
HTML5.2では、Payment Request APIをインラインフレームで実装することが可能になりました。
それ以前では、こうした決済はインラインフレームでは行えませんでしたが、Stripeをはじめとした各種サードパーティ製の決済も、画面を別のページへ移らずに行えるようになるということになります。
Payment Request APIを利用するには、「allowpaymentrequest」属性を＜iframe＞要素に付け加えます。
これにより、別のページへ移ることなく決済が行えるようブラウザに許可を出すことができます。
####IE9より前のバージョンに対応させる - html5shiv
9より前のバージョン（IE6, 7, 8）では要素として認識しないためレイアウトがくずれます。html5shivは古いIEでも新要素を認識できるようにしたJavascriptファイルです。
「Download ZIP」をクリックします。
ダウンロードした zipファイル「html5shiv-master」を解凍し、dist/html5shiv.js ファイルを対応させたいサイトからにアップロードします。
次に html5shiv.js を読み込む以下のコードを head 内に挿入します。
<!-- スタイルシートより先に記述します -->
<!--[if lt IE 9]>
<script src="html5shiv.js"></script>
<![endif]-->
####HTML5の基本構造部分の中で間違いやすいポイント
#####タグとじ忘れる
#####sectionに見出しタグがない
#####入れ子構造のミス
HTMLタグには「ブロックレベル要素」と「インライン要素」が存在し、ブロックレベル要素の中でも"ブロックレベル要素を入れられる"ものと"ブロックレベル要素は入れられず、インライン要素のみ入れられる(それも特定のもののみ)"というものが存在します。リストタグのul,olタグもブロックレベル要素ですが、中にはliタグしか入れられません。
##最後に
セマンティックWebになっているかチェック
W3C Validator