[初心者用]HTML5の新タグ6種を使ってウェブページ作成方法を伝授します。

2019年9月3日 2021年2月16日

xxsuguruxx

1 あらすじ
2 実際のウェブページ構成
3 header(ヘッダー)タグ
4 nav(ナブ)タグ
5 section(セクション)タグ
6 article(アーティクル)タグ
- 6.1 sectionタグとの違いは？
7 aside(アサイド)タグ
8 footer(フッター)タグ
9 まとめ

あらすじ

「ウェブページを作りたいけどどのようなタグを使えばいいのか分からない」

「どのタグを使えばウェブページの骨組みができるの？」

といった疑問にお答えすべく、今回はHTML5より導入された非常に便利なタグを6つ紹介し、初心者の方でも簡単なウェブページを作れるように解説していきたいと思います。

まずHTML5についてご存知でない方はこちらを先にお読みください。

合わせて読みたい

HTML5とは？初心者必見！できることや書き方について解説します！

2019.7.24

あらすじフロントエンジニアやwebデザイナーは知っていて当たり前といってもいい言語HTML5。 HTML5の5はバージョンを表しており、今現在の最新のバージョンが5となります。今回はそんなHTML5についてどのようなことができるのか、もしくはどのように書いていけばいいのかを解説していきたいと思い...

この記事を読んでいただければ、サイトの設計ができるようになりますので、是非最後まで読んでいただけたら幸いです。

実際のウェブページ構成

まずは、基本となるウェブページの構成をご覧ください。

この構成が必ずしも正解ではありませんが、基本的にはこのような構成でウェブページは設計することができます。

コードはこうなります。

<body>
  <header>
  </header>
  <nav>
  </nav>
  <section>
    <article>
    </article>
    <article>
    </article>
  </section>
  <aside>
  </aside>
  <footer>
</body>

それではそれぞれのタグを見ていきましょう。

header(ヘッダー)タグ

まずはheaderタグですが、その名の通りページの頭部分にくる要素です。

　headタグと似ていることから混同されがちですが、全く違うタグですのでご注意を。

headerタグとは基本的にサイトのロゴやサイト名、バナーといった要素を記載する場所です。

例

<header>
  <img src="logo.png" alt="logo">
</header>

nav(ナブ)タグ

navとはnavigationの略で、カテゴリーごとにページを分けて表示してくれるタグです。

memo

なお、このnavタグはheaderタグ内に記載しても問題ありません。

navタグはaタグやulタグと併用することが多く

<nav>
  <ul>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
    <li><a></a></li>
  <ul>
</nav>

といった記載の仕方になります。

aタグとはリンク先に飛ばしてくれるタグで、href属性にリンク先のURLを記載します。

例

<a href=”リンク先のURLをここに記載”></a>

ulやliタグについてはこちらの記事をご覧ください

HTMLのlist(リスト)タグ、ol、ul、liの使い分け方とは？

2019.8.8

あらすじ htmlには<ol>や<ul>といったリストを作成するためのタグがあります。 htmlについてはこちらをご覧くださいfa-arrow-circle-down 今回はこの<ol>や<ul>それぞれの役割や使い分け方、使う場面などを詳しく解説...

section(セクション)タグ

sectionタグは一つのセクションを表すタグです。

つまりは一つの章や節、項目といったものをひとまとめにするタグです。

このsectionタグの大きな特徴として、見出しを必ず入れることが勧められており、見出しがない場合はこのsectionタグを使う必要性がありません。

良い例

<section>
  <h1>タイトルをここにいれてください。</h1>
</section>

悪い例

<section>
  <p>タイトルがなく文章だけしか書かれていません。</p>
</section>

article(アーティクル)タグ

articleは日本語に訳すと「記事」となります。

その名の通り、記事のような役割をしてくれるタグです。

要は、新聞や雑誌でいうところの一面を、このarticleタグで囲っているようなイメージです。

例

<article>
  <h1>W杯で日本が優勝！</h1>
  <p>2022年カタールW杯で日本が優勝しました。いろはにほへと、いろはにほへと、いろはにほへと、いろはにほへと</p>
</article>

sectionタグとの違いは？

ここで一つの疑問が浮かぶはずです。

sectionタグとの違いは？

実はこの部分は割とぼんやりしており、articleかsectionのどちらかを必ず選ばなければいけないわけではないのです。

しかし、HTMLを開発した組織W3Cによると

The article element represents a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.

とのことで、日本語にすると、

article要素は、文書やページ、アプリケーション、サイトといったものの中の文章や構成が、その要素内だけで完結している際に使用します。これらは、雑誌や学術論文、エッセイ、レポート、ブログ、その他のSNSでも利用できます。

といった内容で書かれています。

要は、「コンテンツがその内容だけで完成されているのであればarticleタグを使うのが望ましく、それ以外ではsectionタグを使っても大丈夫」ということです。

aside(アサイド)タグ

asideとは日本語で「わきへ」や「余談」といった意味になります。

その名の通りページ内での位置は「わきへ」、内容としては「余談」ないしは「補足情報」としての役割を担うタグです。

asideタグは特にサイドバーとして使われることが多いタグとなります。

footer(フッター)タグ

footerタグとはheaderタグの反対語のようなもので、headerタグが頭部分の要素なのに対し、footerタグはページの底辺部分を担う要素です。

footer内には著作権情報を記載するのが一般的です。

例

<footer>
  <p>Copyright © 2019</p>
</footer>

まとめ

いかがだったでしょうか。

今回ご紹介した6種類のタグは非常に重要なタグです。

これらを知っておくだけで、サイトの構成を作ることができちゃうので、是非ともサイト設計に役立ててみてください。

注目

下記プログラミングスクールでは完全な未経験からプログラマーとして転職できるように指導してくれます。
まずは無料相談をしてみてはいかがでしょうか。

この記事を書いた人

xxsuguruxx

Web Designer目指し日々奮闘中。海外や英語、Webデザインに関する情報を提供してきます。