今さら聞けない。HTML5の「article要素」の使い方

【導入】

HTML5になってから「article」という要素が追加されました。ですが、HTML初心者の方などは、「article要素」ってなに？ということでしょう。または、知らないという方もいるかとおもいます。そこで今回は、HTML5に新しく追加された「article要素」の使い方について解説にしていきます。

【本文】

「見出し1」

「articleの意味」

そもそも、「article要素」の使い方を知る前に、「article」という単語の意味から覚えましょう。「article」の意味は

新聞や雑誌などの記事

という意味合いがあります。そのため、HTML5内で「article」 要素が意味する意味合いは、

ここからは独立した記事、またはコンテンツですよ。ということになります。それでは、具体的にどのように使っていくかを解説していきます。

「見出し2」

それでは、使い方を見ていきましょう。先ほどから言っているように「article」は、Webサイト内でコンテンツ（記事など）が独立しているものを示したい時に、使います。

例

<article>

<div class="blog">

<h1>記事タイトル</h1>

</div>

<div class="blog_content">

<h2>小見出し1</h2>

<p>内容1</p>

<p>内容2</p>

<p>内容3</p>

</article>

といったような形になります。

「最後」

「まとめ」

今回は、HTML5で新しく出てきた「article要素」の使い方について解説しました。重要なところは、

「article要素」は独立したコンテンツを囲むタグである。

というところです。正しい使い方を身につけて、正しいソースコードのサイトを作りましょう。