[見出しは必須なの?] htmlのブロックレベル要素「article要素」とは? 読み方も分かりやすく解説!

article要素について知りたい人

article要素について知りたいな!

この記事は上記のような疑問を解消するものとなっています。

この記事でお話すること
  • article要素とは?
  • article要素の使い方
  • section要素とarticle要素の違いは!?

article要素はニュースやブログ記事等Webサイト内で自己完結していて、独立したコンテンツとして成り立つものです。

そこでこの記事ではarticle要素について解説していきます。

気になる方は是非最後まで読んで頂ければと思います。

article要素の評価
頻出度
(3.0)
重要度
(3.0)
総合評価
(3.0)

1.article要素とは?

article要素は独立した1つの記事セクションをマークアップするためのものです。

読み方は「アーティクルヨウソ」です。

例えば、ブログなど記事一覧があるページにおいて、記事を1つずつ囲むなど1ページ中に複数使われることもあります。

また、article要素を適宜利用することでクローラーにWebページの構造を理解してもらうことができ、SEO的にもメリットがあります。




2.article要素の使い方

article要素は独立したページを作るようなときに使用します。

例えば、ブログの記事一覧の中に記事1つずつを囲む時、article要素が利用されます。

<!DOCTYPE> 
<html lang="ja"> 
<head> 
<meta charset="UTF-8"> 
<title>article要素とは?</title> 
<link rel="stylesheet" href="style.css"> 
</head> 
<body> 
<h1>ブログ記事一覧</h1> 
<article>
<h2>ブログ記事1</h2> 
<p>本文</p>
</article> 
<article>
<h2>ブログ記事2</h2> 
<p>本文</p>
</article> 
</body> 
</html>

見た目はdiv要素やsection要素を利用してマークアップした時と変わりません。

しかし、上記のように記述することでクローラーに対して正しくHTML文書の構造を伝えることができます。




3.section要素とarticle要素の違いは!?

実務で判断に困る場合、無理に使わなくてもマークアップできます。

しかし、どのような点が異なるのか知っておくことでhtmlの理解が深まります!

section要素とarticle要素どちらもブラウザ表示に違いはありません。

ではどのようなところが異なるのでしょうか!?

GoogleやYahooなどのクローラーにWebページの構造を知らせるためです。

つまりsection要素とarticle要素はユーザーのためではなく、クローラーのためと言えるでしょう。

section要素はそのかたまりだけで独立したページを作れるくらいの内容の時に使用します。

一方、article要素はひとかたまりの段落として使う時に使用します。

 

HTML5/CSS3モダンコーディング フロントエンドエンジニアが教える3つの本格レイアウト スタンダード・グリッド・シングルページレイアウトの作り方」はHTML5/CSS3を使ってモダンなサイトを制作するためのコーディングテクニックをハンズオン形式で学ぶ本です。

実践的な内容になっているので次のステップに進みたいという方は是非利用してみてはいかがでしょうか!?

 

HTMLやCSSを利用してWebサイト制作の副業に挑戦してみたいという方はいませんか!?

そんな方に「はじめての副業コース」をオススメします。

なんとHTMLやCSSを学べるだけでなく、案件紹介も行ってくれます!

Webサイト制作で稼ぎたいという方は是非「はじめての副業コース」を受講してみてはいかがでしょうか!?

コメントを残す

メールアドレスが公開されることはありません。