おすすめ記事
ウェブサイト
スポンサーリンク

あらすじ

「ウェブページを作りたいけどどのようなタグを使えばいいのか分からない」 「どのタグを使えばウェブページの骨組みができるの?」  

 

といった疑問にお答えすべく、今回はサイトを形作る上で必要なタグを6つ選んでご紹介していきたいと思います。

 

具体的に

  • <header>
  • <nav>
  • <section>
  • <article>
  • <aside>
  • <footer>

の6つのタグに絞り、解説していきます。

 

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

 

スポンサーリンク

実際のウェブページ構成

 

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

 

ウェブページ構成

 

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

 

コードはこうなります。

<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タグについてはこちらの記事をご覧ください

 

section(セクション)タグ

 

セクション

 

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

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

 

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

 

良い例

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

 

悪い例

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

 

article(アーティクル)タグ

 

article 記事

 

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

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

 

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

 

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

 

sectionタグとの違いは?

 

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

 

sectionタグとの違いは?

 

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

 

しかし、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

 

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

 

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

 

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

 

まとめ

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

 

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

 

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

 

スポンサーリンク

Twitterでフォローしよう!

おすすめの記事