記事、セクションのボックスを作成したい

最終更新日

ページに記事が含まれる、ニュースサイトやブログサイトの作成をするとき、<article>と<section>はHTML5になって登場した比較的な新しいタグです。<article>は、「記事」を意味するタグです。タグの仕様上の定義としては「それだけで独立するコンテンツ」を意味します。基本的には、「その部分だけコピー&ペーストしても意味が通じる」場合には、<article>で囲みます。ニュースやブログの記事をはじめ、SNSのひとつの投稿なども、<article>で囲むとよいでしょう。<section>は、「ページ全体の一部分」や「記事の一部分(節)」などを意味するタグです。見出し(<h1>など)と、それに続く段落やコンテンツをまとめて囲み、グループ化するのに使われます。

<!DOCTYPE html>
<html lang="ja">
<head>
</head>
<body>
  
<section>
<h1>サーバーメンテナンス・障害情報 </h1>
<article>
<h2>メール送受信障害 </h2>
<p> 7月20日1時24分から2時10分まで、 T01サーバーにてメールの送受信がし づらい状態が発生しておりました。 ご利用の皆様には大変ご迷惑をおかけいたしました。</p>
</article>
<article>
<h2>サーバーメンテナンスのお知らせ</h2>
<p>10月22日14時00分から5時00分の間、セキュリティ対策のためサーバーメンテナ ンスを行います。対象のサーバーはT01です。 ご利用 中の皆様にはご迷惑をおかけしますが、ご理解のほどお願い申し上げます。 </p>
</article>
</section>
</body>
</html>

実行結果

実行結果