セマンティックタグ
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 27/60。
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>この構造は、コンテンツに対して明確で意味のあるレイアウトを提供します。
チャレンジ
簡単セマンティックHTMLを使用して映画レビューページを作成してください。以下の内容を含める必要があります：
1. <header> 内に以下を含める：
<h1>"Movie Reviews"<nav>内に次のリンクを含める："Home", "Reviews", “Top Picks”
2. <main> 内に以下を含める：
- レビュー用の
<article>。その中に以下を含める：<h2>映画の名前<p>短いレビュー文
3. <footer> 内に以下を含める：
<p>"Copyright 2023 Movie Reviews"
チートシート
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>自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを記述してください -->
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
