More than 1 year has passed since last update.

構造化用HTMLタグ

Last updated at 2022-03-26Posted at 2022-03-26

HTML5の構造化用のタグのメモです

headerタグは、サイトのヘッダー部分を構造化する際に使用します。具体的には、サイトのタイトルやナビゲーションなどを囲います。

<header>
<!-- サイトのタイトルやナビゲーションが入ります -->
</header>

「nav」とは「navigation（ナビゲーション）」の略で、サイトのメニュー部分を示す際に使用します。

navタグの中には、ul、liタグなどを用いてメニューを作ります。

<nav>
	<ul>
		<li><a href="#about">About</a></li>
		<li><a href="#feature">Feature</a></li>
		<li><a href="#contact">Contact</a></li>
	</ul>
</nav>

mainタグは、ページ内で1番伝えたい事・重要な部分を示す際に使用します。

mainタグの中には、articleタグやdivタグなどを用いてページの主となるコンテンツを構造化します。

<main>
<!-- 主要コンテンツが入ります -->
</main>

asideタグは、公式では余談要素と記されおり、ページの補足的な情報を示す際に使用します。

サイトのサイドバー部分を構造化する際に適切です。

<aside>
<!-- ページの補足的なコンテンツが入ります -->
</aside>

footerタグは、webサイトの末尾・最後の部分を示す際に使用します。

サイトに関する情報や、著作権に関する表記、連絡先などを構造化します。

<footer>
<!-- 著者の情報やコピーライトが入ります -->
</footer>