セマンティックタグ

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

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

• <header>：導入コンテンツ。通常はページの上部にあります。
• <nav>：ナビゲーションリンクを含みます。

• <main>: ページのメインコンテンツ。
• <article>: ブログ記事のような、独立した内容のまとまり。

• <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>

この構造により、コンテンツを明確で意味のあるレイアウトにできます。