コーディングで毎回悩ましいのがhtmlの書き方や<タグ>の順番ですね。ここはインライン要素にする? ブロック要素? 親要素? 子要素?・・・で<タグ>の種類は変わっていきます。
また「h1タグはどこに置こうか！？」と悩む場面も！h1タグはWebサイトの集客やSEOに効く重要なタグ要素ですからちゃんと理解しましょう。

基本的なタグと要素

h1は 1 ページに 1 つがベスト！？

<h1>要素は、もっとも最も上位の階層に使用する見出しで、ページの大見出しを表します。
従って、ページのタイトルと同等レベルの見出しに、この<h1>要素を使います。
「h1 は 1 ページに 1 つでなければならない」という方もいますが、今やその必要はないみたいです。とは言え、h2よりh1が多かったらおかしいですよね。
個人やチームで混乱しないように「 h1 は 1 ページに 1 つにしましょう」とルール付けをして決めるのが良いでしょう。
ちなみにヒロックラボでは「h1は1ページに1つ」にしています。

body > mainの次はarticleか? sectionか?

セクションとは、文書やアプリケーションの一部分となる、意味や機能のひとまとまりのことです。 ウェブページ内のセクションとしては、例えば、導入部分、新着情報、連絡先などが考えられます。

<section>タグは汎用セクションを表しますが、その定義が漠然としていて使いどころが分かりにくいものの一つです。 <article>、<aside>、<nav>もセクション要素ですが、それぞれ記事、補足情報、ナビゲーションという、より具体的な意味を持っています。 それに対して<section>は一般的なセクションを表します。

とはいえ、<section>の中に<article>を含めても構いませんし、逆でもOKです。仮に<article>と <section> を両方使うとなったら僕も body > main > article > sectionのようにマークアップすると思うし、これに関しては問題はないと思います。
あと、<div>を多用するよりかはランドマークやセクショニング要素を積極的に使おうとするコーディングは素晴らしいと思います。

画像付きで説明したいなら<figure>タグ

HTML5から使用可能となった<figure>タグ。「<figure>タグや<figcaption>タグのことはなんとなく知ってはいるけど使い方がよくわからずに手を出していない」という方も多いのではないでしょうか?「<figure>タグは使わなくてもいいんじゃない?」という方も多くいますが、実はSEO対策にもなる有能なタグです。

<figure>タグとは、メインコンテンツに関わりはあるものの、自己完結しているコンテンツを囲むタグです。たとえば、イラストなどの注釈の絵、図、写真、ソースコードなどを囲む際に利用されます。

<figure>タグが登場した理由は、HTMLやCSSの技術の進歩が関連しています。かつては、Googleなどの検索エンジンやブラウザは、<img>タグで画像を入れれば「これは画像だ。」と理解することができました。しかし今では、<img>タグを使用しないで簡単なイラストや図形などはCSSで作れるようになった結果、検索エンジンなどは、それが画像だと認識できなくなりました。
<img>タグ以外の要素も画像だと認識できるようにするために作られたのが、<figure>タグなのです。

ですのでニュースコンテンス等は、画像があるのなら、<ul><li>タグや<dl><dt>などリストタグもいいのですが、<figure>タグを使うのをお勧めします。

<p>タグと<figure>の用途の違い

画像などのコンテンツを<p>タグに入れるべきか<figure>タグに入れるべきかの違いはなんでしょう?
そのコンテンツが文脈の一部であるかどうかです。<p>タグの中に画像などを挿入する際は、文章の文脈としてそのコンテンツが不可欠である場合であることが多く、反対に、文章の文脈的にそのコンテンツがなくても、問題がないようなコンテンツは<figure>タグに入れるべきです。

Googleクローラーのためにも重要な<タグ>要素

HTML5から、HTML living standardが標準化されましたが、<タグ>の順番が間違いなくちゃんと並んでいる=文書構造が理解しやすくなる！、つまりGoogleの検索エンジンで様々なWebサイトの情報を収集するクローラーが、Webサイトのページを見つけやすくなる！というアルゴリズムは変わりません。
クローラーが収集した情報に基づいて検索結果の順序が決定されるので、HTMLの文書構造を分かりやすくすることは、ユーザビリティやアクセシビリティにとっても重要で、SEO対策の1つと言えますね。

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –

幅広い知見を活かし、最適解を選ぶWebサイト制作

東京都港区南青山/表参道に近い株式会社ヒロックラボでは、日々エンジニアスキル/デザインスキルを高めております。
最新のデザインとより良いコーディングスキルでお客様のホームページをより最適解に仕上げます。
また、Webサイトを制作する上でCMSツールを導入することも多くありますが、豊富な実績と経験から幅広い知見を得てきたヒロックラボは、お客様の解決すべき課題に適したツールを選定・提案することが可能です。

新規ホームページ制作や検索システムなどお気軽にお問い合わせください。