Menu
CoddyTech

Section と Article

CoddyのHTMLジャーニー「基礎」セクションの一部。レッスン 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>
challenge icon

チャレンジ

簡単

ウェブページを構成するために、<section>タグと<article>タグを使用するHTMLドキュメントを作成してください。以下のセクションを含めてください。

  1. ページのメインコンテンツを格納する<main>セクション。
  2. <main>の中に、「Upcoming Events」という見出し(<h2>)を持つ<section>を作成します。
  3. <section>の中に、2つの<article>要素を作成します。
  4. 各<article>には、見出し(<h3>)と、ダミーテキストを含む段落(<p>)を入れます。見出しには"Event 1"と"Event 2"を、段落には"Event 1 details..."と"Event 2 details..."を使用してください。

自分で試してみよう

<!DOCTYPE html>
<html>
    <body>
        <!-- ここにコードを書いてください -->
    </body>
</html>
quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

基礎のすべてのレッスン

自分で練習してみよう: Webプレイグラウンド