目次
あらすじ
「ウェブページを作りたいけどどのようなタグを使えばいいのか分からない」 「どのタグを使えばウェブページの骨組みができるの？」
といった疑問にお答えすべく、今回はサイトを形作る上で必要なタグを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タグですが、その名の通りページの頭部分にくる要素です。
headerタグとは基本的にサイトのロゴやサイト名、バナーといった要素を記載する場所です。
例
<header>
<img src="logo.png" alt="logo">
</header>
navとはnavigationの略で、カテゴリーごとにページを分けて表示してくれるタグです。
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タグについてはこちらの記事をご覧くださいfa-arrow-circle-down
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タグを使うのが望ましく、それ以外ではsectionタグを使っても大丈夫」ということです。
aside(アサイド)タグ
asideとは日本語で「わきへ」や「余談」といった意味になります。
その名の通りページ内での位置は「わきへ」、内容としては「余談」ないしは「補足情報」としての役割を担うタグです。
asideタグは特にサイドバーとして使われることが多いタグとなります。
footerタグとはheaderタグの反対語のようなもので、headerタグが頭部分の要素なのに対し、footerタグはページの底辺部分を担う要素です。
footer内には著作権情報を記載するのが一般的です。
例
<footer>
<p>Copyright © 2019</p>
</footer>
まとめ
いかがだったでしょうか。
今回ご紹介した6種類のタグは非常に重要なタグです。
これらを知っておくだけで、サイトの構成を作ることができちゃうので、是非ともサイト設計に役立ててみてください。
