「あ！このタグつけ忘れた・・」
WEB制作の現場でよくあるシーンです。
HTMLは文書構成を伝える為の言語ですが、沢山のタグが用意されているので、現役のWEBデザイナーでも、指定し忘れがちなタグがいくつか存在します。
実際現場で、書いたコードをチェックし合うと、抜けがある場合がよくあります。なので、今回の記事では、現役WEB製作者でもよく指定を忘れてしまうHTMLタグを紹介します。
表示には問題ないものの、文書構成的に意識したい要素となりますので、ご覧ください。
今回の記事は、次のような方にお勧め！
・指定し忘れがちなHTMLタグを知りたい
・SEOの影響を知りたい
目次
指定し忘れがちなHTMLタグ紹介
では、どういったHTMLタグがあるでしょうか？いくつかご紹介します。サンプルコードもご用意しましたので、使用するシーンの感覚を掴んでいただければと思います。
<nav>
<ul>
<li>営業時間</li>
<li>お品書き</li>
<li>アクセス</li>
</ul>
</nav>重要なナビゲーションを囲む時に使用されるタグです。よく、ヘッダーメニューやサイドメニューを囲む場合が多いです。
<header></header>タグ
<header class="page-header">
<h1><img src="img/logo.jpg" alt="ロゴ"></h1>
<nav>
<ul>
<li>営業時間</li>
<li>お品書き</li>
<li>アクセス</li>
</ul>
</nav>
</header>ヘッダー部分を囲む際に使用されるタグです。上記のサンプルでは、ロゴとグローバルメニューをヘッダーで囲んでいます。headerにクラスをつけて、ロゴとメニューを横並びにするレイアウトは多い印象です。
<footer>
<ul>
<li><a href="#">Twitter</a></li>
<li><a href="#">Instagram</a></li>
</ul>
<p><small>©︎ コーダー備忘録</small></p>
</footer>フッター部分を囲む際に使用されるタグです。コピーライト（©）やSNSのリンクを掲載するケースが多いです。
<article></article>タグ
<article>
<h2>通信障害回復のお知らせ</h2>
<p>11月20日、午前8時から9時の間、通信ができない状況が続いておりましたが、現在は復旧しております。大変ご迷惑おかけいたしました。</p>
</article>記事を意味するタグとなります。HTMLでは、独立した記事のまとまりを表します。基本的に、その部分だけコピペをしても意味が通じる場合には、このタグで囲んであげましょう。
<aside></aside>タグ
<p>kazuは、今日もブログを書き続けるのでした。</p>
<aside>
<h3>kazuってこんな人</h3>
<p>コーダー備忘録というブログを書いている、現役のWEBデザイナーです。</p>
</aside>本文ではない、補足的な情報を囲むタグです。本筋から分けても問題がない内容を囲むイメージです。
<section></section>タグ
<section>
<article>
<h2>通信障害回復のお知らせ</h2>
<p>11月20日、午前8時から9時の間、通信ができない状況が続いておりましたが、現在は復旧しております。大変ご迷惑おかけいたしました。</p>
</article>
<article>
<h2>メンテナンスのお知らせ</h2>
<p>11月25日、22時〜23時の間、セキュリティ強化のためメンテナンスを実施させていただきます。ご迷惑おかけしますが、よろしくお願いいたします。</p>
</article>
</section>ページ全体の一部分や記事の一部分などを意味するタグとなります。見出し（h1など）と、それに続く段落やコンテンツ（pなど）をまとめて囲んで、グループ化する時に使われます。
<main></main>タグ
<main>
<section>
<article>
<h2>通信障害回復のお知らせ</h2>
<p>11月20日、午前8時から9時の間、通信ができない状況が続いておりましたが、現在は復旧しております。大変ご迷惑おかけいたしました。</p>
</article>
<article>
<h2>メンテナンスのお知らせ</h2>
<p>11月25日、22時〜23時の間、セキュリティ強化のためメンテナンスを実施させていただきます。ご迷惑おかけしますが、よろしくお願いいたします。</p>
</article>
</section>
</main>ページのメインコンテンツとなる部分を囲む時に使われるタグです。ページ内で、メインのコンテンツはどこなのかを考えて使用しましょう。
これらのタグは、使用してもしなくてもブラウザ上では変化がないので、指定をよく忘れがちです。
SEOに影響は？
Googleから正式な告知はないものの、正しく文書構成を伝える事で、クローラーに認識してもらいやすくなるとよく言われています。
※クローラーとは、検索エンジンが検索の順位を決めるための要素を、サイトを巡回して収集してくるロボットの事です。
SEOに少しでも効果があると言われている事は積極的に行いましょう。
まとめ
上記で紹介したタグは、意識していないと、よく指定するのを忘れがちです。現職の私もたまに指定を忘れてしまう時がありますが、使い方を覚えて、使うべき所でしっかり使えるようにしたいですね。
コメント