HTML(5)グループ分けについて

HTML

前回はお問合せフォームの作成について記事にしました。

今回はタグを利用してwebサイトのレイアウトを決めるグループ分けに使用するタグを紹介します。

 

・ページ上部に使用する<header>タグ

headerタグとはページの先頭を意味します。そのためページのタイトルやナビゲーションメニュー、ロゴ画像などをレイアウトする時に使います。そのため多くがbodyタグの後に使用します。

 

・ナビゲーションメニューに使用する<nav>タグ

ナビゲーションタグとは、このブログでいえばプロフィールや目次等の部分になります。サイト内の別の場所へナビゲーションする時に使用します。主に上記のheaderタグ内で使用することが多く、前々回で紹介した<ul><li>タグと一緒に使用することが基本となります。

 

・記事の内容等を記載する<article>タグ

articleは日本語で『記事』を意味します。ニュースサイトやブログサイト等で使用することが多く、主に<h>タグで記事のタイトルを記載し、<p>タグで記事の内容を書きます。

 

・テーマを持ったグループを作る<section>タグ

sectionとは日本語で『断片』という意味があり、記事の内容をグループ分けするタグになります。articleタグと似ていますが違いとしてはarticleタグはそれだけで完結する記事の内容ですがsectionタグは複数ある記事そのものに意味を持たせる時に使用します。

 

・ページのメインとなる<main>タグ

こちらは文字通りこのサイトのメインとなる部分を作成する時に使用します。メインとなるためこの中で様々なタグを使用してサイトを作成することになります。

 

・メインコンテンツでない部分に使う<aside>タグ

本文でない補足情報等に使用するタグになります。サイドバーなどに使用することが多いです。

 

・ページ下部に使用する<footer>タグ

こちらはwebページの一番下にくるコピーライトやSNSリンクなどを作成する時に使用します。

 

・意味を持たない部分で使用する<div>タグ

上記でなんらかの目的を持ったエリアネームがあるタグを使用しましたがdivタグはそのどれにも当てはまらないデザインのためや、後の記事で紹介するCSS(記事に装飾する機能)で効果をつけたい時などに使用するタグになります。意味を持たない部分で使用するとありますが一番使用するタグとなります。

 

以上がレイアウトを決めるグループ分けに使用するタグになります。次回はdivタグでも記載したCSSについて記事にしていきたいと思います!