HTMLスキル - 第9章 Lesson5

sectionタグとarticleタグの違い

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

<section>タグと<article>タグの違いについて、初心者向けに解説しています。



この動画で学べること

・<section>タグの使い方
・<article>タグの使い方



<article>タグと<section>タグを使って情報をまとめよう

<section>タグと<article>タグはどちらも情報をまとめるためのタグですが、
<section>タグは、一般的なセクション、コンテンツをまとめるためのもので、見出しを付け加えることが必要な文章などをまとめるものです。
<article>タグは、自己完結した構成を示します。例えば、ブログやニュースなど、その記事だけでユーザーが満足できるものです。



今回は、メインコンテンツの部分<div id="main">の中に <article>タグを書いていきましょう。
<h1>で記事のタイトルをつけたり、セクションを入れたりします。
<section>タグの中にはさらに見出しや文章が入ります。
では実際に書いてみましょう。



<article>
<h1>記事タイトル</h1>
<section>
<h2>見出し</h2>
<p>文章</p>
</section>
<section>
<h2>見出し</h2>
<p>文章</p>
</section>
<section>
<h2>見出し</h2>
<p>文章</p>
</section>
</article>



ここまでできたら 、保存してブラウザで見てみましょう。
<article>タグと<section>タグによって、情報がまとまったことがわかります。