【エンジニア向け】HTML5で良く使うタグ5選

今回は、HTML5で新たに登場したタグの中で、使う機会が多いタグを紹介します。

是非、皆さんのWebサイトに取り入れてHTMLの保守性を上げていきましょう。

では早速見ていきましょう!

HTML5でよく使うタグ

  1. headerタグ
  2. navタグ
  3. mainタグ
  4. sectionタグ
  5. footerタグ

1. headerタグ

headerタグは、その名前の通りWeb画面のヘッダ部分に使用します。

例えば以下のようなWebサイトの画面があったとします。

headerタグは、header部分に利用しましょう。

Webサイトの上部はサイトのサービス名やロゴを表示するヘッダ部分となるため、HTMLでは、基本的にh1タグをheaderタグで囲む事になるケースが多いです。

<header>
  <h1>hiroエンジニアShop</h1>
</header>

2. navタグ

navタグは、navigation(ナビゲーション)の略です。

Webサイトでナビゲーションを表現したい場合はnavを使いましょう。

navタグは、ナビゲーション部分に使います。

私の場合、以下のように<nav>タグと<ul>タグを組み合わせて、CSSで調整する事が多いです。

<nav>
  <ul>
    <li>商品ランキング</li>
    <li>カテゴリーから探す</li>
    <li>このサイトについて</li>
    <li>お問い合わせ</li>
  </ul>
</nav>

3. mainタグ

mainタグは、文字通りWebサイトのメインコンテンツを表示する箇所になります。

ユーザーに見てもらいたい、サイトの中心となる場所に使いましょう。

mainは、各サイトの中心箇所に使うため、その中は各サイトによってバラバラです。

皆さんの自由に書いてください。

<main>
  各サイトごとに自由に記載
 後述するsectionをさらに入れ子構造にすることも多いです
</main>

4. sectionタグ

sectionタグは、Webサイト内で表現したい範囲ごとの区切りを示す時に使います。

例えば、3.mainタグの中にも3ほどコンテンツが分かれていました。

このようにsectionタグを使うことで、どのセクションでどのような情報を管理しているか分かりやすくなります。

また、HTMLにするときは、sectionごとの意味をidなどで管理すると分かりやすくなります。

<section id="product">
 <p>商品の概要セクション</p>
</section>

<section id="product_detail">
 <p>商品の詳細説明セクション</p>
 <p>説明: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</section>

<section id="order">
 <p>商品の注文セクション</p>
</section>

5. footerタグ

footerタグは、Webサイト内でフッターの箇所に利用します。

通常は、画面の一番下に表示するので、一番下で記載するタグになります。

Webサイトを作るときは、ユーザーの興味の薄い内容を列挙する事が多いです。

例えば、プライバシーポリシーや、利用規約など、Webサイトとして記載が必要だけど、ユーザーが積極的に見たいものではないものをリンクさせます。

<footer>
  <a href="xxx">プライバシーポリシー</a>
</footer>

HTMLをもっと勉強したい方は、以下の書籍がおすすめです。

よくわかるHTML5 CSS3の教科書 第3版 / 大藤幹

【送料無料】 よくわかるHTML5 CSS3の教科書 第3版 / 大藤幹 【本】

価格:3,080円
(2021/4/18 21:45時点)
感想(0件)

===============

以上、HTML5で良く使うタグ5選について紹介してみました。

この情報が皆さんの人生のお役に立てれば幸いです。

エンジニアとして日本のITリテラシーを高めていきたいと共感して頂いた人は、是非このブログの拡散とyoutubeの方も見ていただけると嬉しいです。

記事を最後まで見ていただきありがとうございました。

執筆者: hiroエンジニア

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です