html articles
article 要素は、開発者が他のコンテンツとは別のコンテンツを含める絶好の機会です。
定義と使用法
<article> タグは、独立した自己完結型のコンテンツを指定します。ソーシャルメディアの投稿、ユーザーのコメント、ニュース記事、さらにはブログの投稿でもかまいません。
独立した自己完結型のコンテンツを含む 3 つの記事。
<article> <a href="/html-section-tag"> <h2>HTML <section> Tag</h2> <div> <time> 2022年5月13日</time> <div>HTML</div> </div> </a> </article> <article> <a href="/html-lang"> <h2>HTML lang Attribute</h2> <div> <time> 2022年5月12日</time> <div>HTML</div> </div> </a> </article> <article> <a href="/html-audio-tag"> <h2>HTML Audio Tag</h2> <div> <time> 2022年5月11日</time> <div>HTML</div> </div> </a> </article>
article html
手記：
<article>要素は、ブラウザでは特別なものとしてレンダリングされません。
長いコンテンツを含む記事がある場合、article 要素内のセクションを使用してコンテンツを論理的に分割できることを知っておくことが重要です。
<!--article 始める--> <article> <h1>ハローワールド</h1> <section> <h2>からよろしく California</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste? </p> </section> <section> <h2>からよろしく London</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste? </p> </section> <section> <h2>からよろしく Austria</h2> <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Adipisci, iste? </p> </section> </article> <!--article 終わり-->
articles html
上記の例からわかるように、article 要素には多くのセクション要素を含めることができます。
ブラウザのサポート
表の数字は、要素を完全にサポートする最初のブラウザーのバージョンを指定します。
| 要素 | Chrome | Edge | Mozilla | Safari | Opera |
|---|---|---|---|---|---|
| <article> | 6.0 | 9.0 | 4.0 | 5.0 | 11.1 |
注 コンテンツが自己完結型の場合は
<article>、 タグを使用することをお勧めします。CSS を使用して ” 要素のスタイルを設定できます<article>。
デフォルトの CSS 設定
ほとんどのブラウザでは、<article> 次のデフォルト値で 要素が表示されます。
article { display: block; }