article要素の使い方は?HTML5の要素を使いこなそう【HTML編】

Pikisuperstar - jp.freepik.com によって作成された technology ベクトル

こんにちは、ユキです。
新卒で大企業のSIerに入社し、現在は大手の業務システムWebアプリケーションを開発しています。

ペン子
ペン子

article要素っていつ使うの?

ユキ
ユキ

独立した記事コンテンツを作る時に使うよ!

結論からいうと、article要素は独立した記事コンテンツを作成する時に使います。

今回はarticle要素についてと使い方について解説していきます。
コーヒーでも飲みながらゆっくり読んでみてください。


スポンサーリンク

1: HTML5について

html5

HTML5とは、HTMLバージョン5のことです。
過去HTMLは少しずつ改訂されていき、2014年にHTML5が発表されました。
みなさんが普段聞いてるHTMLはHTML5と同じ意味です。
ホームページを作るならHTML5といわれるほど、過去のHTML4と比べると格段に機能が多くなりました。
スマホ対応が簡単になったり、アニメーションが作れたりします。

つまりHTML5は、「今まで難しかった処理を簡単にしてくれた」ものというわけです。

2: article要素とは

article要素とは独立した各記事のコンテンツを作成するための要素です。

ブログの記事やユーザーのコメント投稿などを独立したコンテンツとしてマークアップすることができます。body要素だけだとメインの一記事しか書けないところを同じページに複数の記事を掲載できる機能があるということです。
これは非常に便利な機能で、Webサイトやブログでは頻繁に使われています。

似ている要素としてsection要素などもありますが、使用する用途が異なります。
section要素はコンテンツの区分をマークアップする要素で、記事本文とは別の関連コンテンツを作成するために使用されます。主におすすめ記事やランキング作成に使われます。
article要素は新聞の各記事で、section要素は新聞の端にある4コマ漫画であると認識してください。

3: article要素の使い方

<body> <main> <article> 記事コンテンツ </article> </main>
</body>

article要素はbody要素内で記述し、主にmain要素内で使われます。

article要素の中にsection要素を含めて使用することもできます。一つの記事の中にサブのコンテンツを含める方法です。ブログの記事などでよく使われます。
また、article要素を複数記述する使い方もあります。これはブログの一覧ページなどでよく見かけます。
カテゴリを分割してユーザーが目的の記事に行きやすいようにしてユーザビリティを高めています。

まとめ

今回はarticle要素についてと使い方について解説しました。

article要素は独立した記事コンテンツを作ることができる要素です。記事コンテンツを複数作成できるので目的に合わせて使えることができるようになりましょう。

これからもユキのIT教室では初心者・未経験者向けのIT情報を発信していくのでよろしくお願いします。

以上、ユキでした!