LoginSignup
0
0

More than 1 year has passed since last update.

構造化用HTMLタグ

Last updated at Posted at 2022-03-26

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

headerタグ

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

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

navタグ

「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タグ

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

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

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

asideタグ

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

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

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

footerタグ

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

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

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0