LoginSignup
2
0

More than 1 year has passed since last update.

articleの使い方を復習します

Posted at

article

article要素は、文書、ページ、アプリケーション、またはサイトの中で完全もしくは自己完結した構造を表す。これは原則として、たとえばシンジケーションなど、独立して配布可能なまたは再利用可能なものである。これは、フォーラムの投稿、雑誌や新聞の記事、ブログのエントリー、ユーザーの投稿コメント、対話的なウィジェットやガジェット、またはコンテンツの任意の独立した項目であるかもしれない。 article要素がネストされる場合、原則的に内側のarticle要素が外側の記事の内容に関連する記事を表す。たとえば、ユーザーの投稿コメントを受け付けるサイトのブログのエントリーは、ブログのエントリーのarticle要素内にネストされたarticle要素としてコメントを表すことができる。 article要素に関連付けられている著者の情報(address要素を参照のこと)は、ネストされたarticle要素には適用されない。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>記事タイトル(ページタイトルとして)</title>
</head>
<body>
    <header>
        <nav>ナビゲーション</nav>
    </header>
    <article>
        <h1>article用の記事タイトル</h1>
        <p>記事内容</p>
        <section>
            <h2>section用の見出し</h2>
            <p>見出し2の内容</p>
        </section>
    </article>
</body>
</html>
  • sectionよりも具体的である
  • 見出しが必要
  • ブログ投稿などがイメージしやす

articleの中にarticle

article要素がネストされる場合、原則的に内側のarticle要素が外側の記事の内容に関連する記事を表す。たとえば、ユーザーの投稿コメントを受け付けるサイトのブログのエントリーは、ブログのエントリーのarticle要素内にネストされたarticle要素としてコメントを表すことができる。

サンプルコード

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>記事タイトル(ページタイトルとして)</title>
</head>
<body>
    <header>
        <nav>ナビゲーション</nav>
    </header>
    <article>
        <h1>article用の記事タイトル</h1>
        <p>記事内容</p>
        <section>
            <h2>section用の見出し</h2>
            <p>見出し2の内容</p>
        </section>
        <article>
            <header>
                <h2>コメントのタイトル</h1>
                <p>3日前</p>
            </header>
            <p>ネストする場合、親articleに関連したもの</p>
        </article>
    </article>
</body>
</html>

article section div の使い分けフロー

スクリーンショット 2023-02-07 0.29.46.png

参考

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0