Menu
Coddy logo textTech

Section と Article

CoddyのHTMLジャーニー「Fundamentals」セクションの一部。レッスン 28/60。

HTML では、<section> タグと <article> タグを使用して、コンテンツを論理的な部分に整理します。

<section>タグは、章、ヘッダー、フッター、その他のドキュメントのセクションなど、ドキュメント内のセクションを定義します。関連するコンテンツをまとめてグループ化する方法です。たとえば、<section>を使用して、ページをIntroduction、content、連絡先情報に分けることができます。

<section>タグの使い方は次のとおりです:

<section>
	<h2>Section Heading</h2>
	<p>Section content goes here.</p>
</section>

<article>タグは、独立した自己完結型のコンテンツを指定します。それ自体で意味が通じ、Webサイトの他の部分から独立して読むことができるようにする必要があります。<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腕試し

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

Fundamentalsのすべてのレッスン

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