PR

現役でも忘れる!?指定し忘れがちなHTMLタグのご紹介

WEB制作技術系

「あ!このタグつけ忘れた・・」

WEB制作の現場でよくあるシーンです。

HTMLは文書構成を伝える為の言語ですが、沢山のタグが用意されているので、現役のWEBデザイナーでも、指定し忘れがちなタグがいくつか存在します。

実際現場で、書いたコードをチェックし合うと、抜けがある場合がよくあります。なので、今回の記事では、現役WEB製作者でもよく指定を忘れてしまうHTMLタグを紹介します。

表示には問題ないものの、文書構成的に意識したい要素となりますので、ご覧ください。

お助け猫
お助け猫

今回の記事は、次のような方にお勧め!

・指定し忘れがちなHTMLタグを知りたい

・SEOの影響を知りたい

指定し忘れがちなHTMLタグ紹介

では、どういったHTMLタグがあるでしょうか?いくつかご紹介します。サンプルコードもご用意しましたので、使用するシーンの感覚を掴んでいただければと思います。

<nav></nav>タグ

<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></footer>タグ

<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に少しでも効果があると言われている事は積極的に行いましょう。

まとめ

上記で紹介したタグは、意識していないと、よく指定するのを忘れがちです。現職の私もたまに指定を忘れてしまう時がありますが、使い方を覚えて、使うべき所でしっかり使えるようにしたいですね。

タイトルとURLをコピーしました