セマンティックタグ

HTMLのセマンティックタグはコンテンツの意味を定義するのに役立ち、開発者とブラウザーの両方にとってコードをより明確にします。<div>や<span>とは異なり、囲まれたコンテンツに文脈を与えます。

一般的なセマンティックタグ：

• <header>：通常は上部に配置される、導入的なコンテンツ。
• <nav>：ナビゲーションリンクを含む。

• <main>: ページのメインコンテンツ。
• <article>: blog post のような、自己完結した一つのコンテンツ。

• <section>：関連するコンテンツをグループ化します。多くの場合、見出しが含まれます。
• <footer>：著作権や連絡先などの情報を含む下部のセクションです。

<header>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">About</a></li>
			<li><a href="#">Contact</a></li>
		</ul>
	</nav>
</header>
<main>
	<article>
		<h2>Article Title</h2>
		<p>Article content goes here.</p>
	</article>
</main>
<footer>
	<p>Copyright 2023</p>
</footer>

この構造は、コンテンツに明確で意味のあるレイアウトを提供します。