Section と Article
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 28/60。
HTMLにおいて、<section>と<article>タグは、コンテンツを論理的なパーツに整理するために使用されます。
<section>タグは、章、ヘッダー、フッター、またはドキュメント内のその他のセクションなど、ドキュメント内のセクションを定義します。これは、関連するコンテンツをグループ化するための手法です。例えば、<section>を使用して、ページを導入、コンテンツ、連絡先情報に分割することができます。
<section>タグの使用方法は以下の通りです：
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section><article>タグは、独立した自己完結型のコンテンツを指定します。それ自体で意味が通じ、ウェブサイトの他の部分から切り離して独立して読むことができるものである必要があります。<article>要素を使用できる例としては、フォーラムの投稿、ブログのエントリ、ニュース記事、またはコメントなどがあります。
<article>タグの使用方法は次のとおりです：
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>
チャレンジ
簡単<section> タグと <article> タグを使用してウェブページを構造化する HTML ドキュメントを作成してください。以下のセクションを含めてください：
- ページのメインコンテンツを保持するための
<main>セクション。 <main>の中に、"Upcoming Events" と書かれた見出し (<h2>) を持つ<section>を作成します。- その
<section>の中に、2つの<article>要素を作成します。 - 各
<article>には、見出し (<h3>) とダミーテキストを含む段落 (<p>) を含める必要があります。見出しには "Event 1" と "Event 2" を、段落には "Event 1 details..." と "Event 2 details..." を使用してください。
チートシート
<section> タグは、関連するコンテンツをまとめるために、ドキュメント内のセクションを定義します：
<section>
<h2>Section Heading</h2>
<p>Section content goes here.</p>
</section><article> タグは、それ自体で意味をなす、独立した自己完結型のコンテンツを指定します：
<article>
<h2>Article Title</h2>
<p>Article content goes here.</p>
</article>自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを書いてください -->
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
