セマンティックHTMLをわかりやすく考える
セマンティックHTMLを理解する
セマンティックとは？
セマンティックとは、一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。とは、一般的には「意味」や「意味論」に関することを指す語である。IT用語としては、コンピュータに文書や情報の持つ意味を正確に解釈させ、文書の関連付けや情報収集などの処理を自動的に行わせる技術について用られる語である。
セマンティック・ウェブ ウェブページの意味を扱うことを可能とする標準やツール群の開発によってワールド・ワイド・ウェブ[1]の利便性を向上させるプロジェクト。セマンティック・ウェブの目的はウェブページの閲覧という行為に、データの交換の側面に加えて意味の疎通を付け加えることにある。
つまり、HTMLの構造に意味を持たせるということになります。
なぜ必要？
セマンティックHTMLの概要は、なんとなく掴めたでしょうか。 でも、なぜその必要性がいまいちピンときませんよね？
この箇所については他サイトで詳しく解説している記事が多くありますが、、、
ポイントは一つ
グーグルのクローラーにwebページを正しく理解してもらう
これです。
もちろんコンテンツの内容自体も、質が高いものの方が評価されやすいですが、いくら内容が良くてもGoogleが正しく評価しないと意味がないですよね。 そういった意味でもweb制作、あるいはweb開発においてもセマンティックの考えは重要であるといえます。
セマンティックで重要なタグのうちよく使うもの
ここからはセマンティックコーディングでよく使う具体的なタグを紹介します。
< header >（ヘッダー）タグ
まずはhtmlに必要なheaderタグです。headerタグ内にはtitleをはじめmetaディスクリプションやスタイルシートの読み込みなど、ページの基本的なことを書いておきます。
< footer >（フッター）タグ
HTMLの下部につけることが多いです。footerタグには、フッターのナビゲーションやコピーライトなど、ユーザーに対するサイト情報を記載していることが多いです。
< section >（セクション）タグ
セクションというと定義がかなり曖昧ですが、意味的なひとまとまりに対してつけます。sectionタグの要素は見出しがつけれるまとまりだと捉えるとわかりやすいかもしれません。
< article >（アーティクル）タグ
articleはその名の通り記事の部分につけるタグです。独立して完結している要素という言われ方をよくしますが、ブログの1記事につき一つのarticleをつける感じです。
< aside >（アサイド）タグ
補足情報のセクションに使用します。書籍でいうところの、コラムみたいな位置づけでしょうか。
< h > タグ
見出しに使われます。適切に利用することで、SEO対策に効果の高いタグになります。基本的にh1→h2→h3といくにつれて、大見出し→小見出しになっていきます。
見出しタグは意味のある場所で使用してください。ページ上の見出しが多すぎると、ユーザーがコンテンツを読みにくくなり、1 つのトピックがどこで終了して次のトピックがどこから始まっているのか判断しにくくなります。
SEO スターター ガイドスターター ガイド – Search Console ヘルプ
Google先生もおっしゃっている通り、1トピックにつき、その概要を簡潔に説明するような意味のある見出しをつけることが大切なようです。
さいごに
HTMLは何かと軽視されがちですが、極めようとすればかなり奥が深いですし、SEOに直結する部分でもあります。セマンティックHTMLを使いこなして、さらにワンランク上のフロントエンド開発者を目指しましょう。
