articleタグとは・htmlのsectionとの違いも解説【初心者向け】
自身のwebページにて、別の記事について表示したい時はありませんか？
とはいえ、Webページの中に、記事を埋め込むにはどんなコードを使うのか迷ってしまいます。
今回はhtmlで使用するarticleタグを使用して記事を埋め込む方法を紹介するつもりです。
実際のソースコードを見ないとどのようにコーディングすれば良いか分からないと思います。
今回、WEBCAMP NAVIは、HTMLで使うarticleの使い方を徹底的に解説していきます！
- articleとは
- articleタグの使い方
- articleタグを複数使う場合
以上の項目に沿って説明します。
ここで分かるのは最近HTMLの勉強をしている人向けにarticle（アーティクル）の使い方や注意点です。
この記事を見ればarticleの使い方が必ず見つかりますので、ぜひ最後までお読みください。
＼プログラミングスクールを比較／
|
DMM WEBCAMP |
COACHTECH |
RUNTEQ |
|
|---|---|---|---|
|
|
|
|
| 目指せる姿 | WEBエンジニアへの転職 |
フリーランスエンジニア | WEBエンジニアへの転職 |
| 分割払い | ○ | ○ | ○ |
| 補助金 | ○ | × | ○ |
| 転職保証 | ○ | × | × |
| 受講期間 | 3ヶ月〜 | 3ヶ月〜 | 5ヶ月〜 |
| 特徴 |
【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり |
【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当 |
【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す |
| 料金 | 329,350円〜 ※給付金適用後 |
42万9,000円~ | 55万円 |
|
公式HP |
公式HP |
公式HP |
目次[show]
articleとは
articleは、内容がそれだけで完結している部分に対して使用できます。
このarticleタグはHTML5になってから明確にHTMLに追加され、article部分を独立した部分として記述して個別に配信や再利用を行う場合が多いです。
例えばブログなどwebサイトでは、article要素を使用して記事の一部分であることを示す場合もあります。
webサイト全体としてどのような意味合いを持たせたい部分かわかりやすくするために、articleを記述することで部分的なマークアップ（意味のある文章にする作業）をしたことでheaderはヘッダー要素であり、asideは補足状態であることを示すことです。
articleタグの使い方
articleタグはHTMLの文書の中に使いますが、まず「セクショニング要素」について説明していきます。セクショニング要素はsectionタグとは異なりますが、これは範囲を明確にするための要素を指しています。
articleとsectionの違い
articleとsectionは実際にブラウザで表示した場合には違いはありません。
しかし、この違いを意識したマークアップをすることでGoogleのクローラーに正しく検知されたり、修正や改訂など文章構造がはっきりしやすくなります。
- articleはselectionよりも独立性が高い構成の場合に使用できる
- sectionはarticleよりも独立しない場合に使い、テーマ性ごとに使用できる
articleはsectionとの違いはarticle部分だけを抜き出してテキストを読んだ場合に徳利した部分として意味がわかる状態です。
同じ階層に似たようなコンテンツとしての固まりがある場合にsectionを使用します。
では実際にarticleタグを使ってコーディングしてみます。
articleはsectionの中に使う場合やsectionの外側にするように記述しても問題ありません。
<article>
<h2>新着記事（ここにh2タグ）</h2>
<section>
<h3>1月のニュース（h3タグ）</h3>
<p>スポーツ </p>
<p>IT </p>
</section>
<section>
<h3>2月のニュース（h3タグ）</h3>
<p>芸能 </p>
<p>経済 </p>
</section>
</article>
aside要素
aside要素は、指定した範囲がページの中でメインコンテンツとは関連性が低い補足などを示す要素です。
ちなみに無関係な内容にasideを使用することは、あくまでも関連性が低いだけなので不適切です。使うべきか迷う時は「余談ですが…」や「ちなみに…」などに続けて書いても違和感がないか、で判断すると良いかもしれません。
使い方は以下の様に本文とは関連性の低い補足情報などを<aside></aside>で囲んで使用します。
<h2>article要素を覚えよう</h2>
<p>article要素とは、その範囲がセクションの中で、独立してそれだけで完結していることを示す要素です。</p>
<aside>
<h2>articleという英単語の意味</h2>
<p>「論説」や「記事」などを意味する。</p>
</aside>nav要素
nav要素は、その範囲がナビゲーションであることを示す要素です。
重要なのは「主要なナビゲーション」に対してのみ使用するという事ですが、主に各ページへのリンクに対して使用されることが多い要素です。
例えば、フッターの著作権や外部サイトへのリンクなどには使用しないように注意しましょう。
但し、ページ内に1回しか使えないという事ではありません。
実際のコーディングは以下の通りです。
<ul>
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a href="#">CONTACT</a></li>
</ul>
セクショニング要素とdiv要素の違い
ここまで紹介したセクショニング要素とdiv要素との違いを理解しておきましょう。
divは、特に意味を持たない汎用的な要素です。
要素をグループ化する役割として、他に適切なタグが無い場合に使用します。
セクショニング要素との使い分けができるように、理解しておきましょう。
articleタグを複数使う場合
articleタグを複数使いたい場合があるかと思います。
ではその場合、articleタグの使い方をサンプルを見ながら確認してみましょう。
文章の構造を明確に分けたい場合はarticleタグを複数利用して、お知らせ記事といった記事を複数用意するのが想像できます。
<h1>DMM WEBCAMP NAVIからのお知らせ</h1>
<article>
<h2>お知らせその1</h2>
<p>このサイトでHTMLについて学べます！</p>
</article>
<article>
<h2>お知らせその2</h2>
<p>卒業生から意見が聞けるよ！</p>
</article>
<article>
<h2>お知らせその3</h2>
<p>未経験でもエンジニア転職できるよ！</p>
</article>
まとめ
今回はHTMLのarticleタグを使う方法についてご紹介しました。
今回、紹介したarticle要素はHTML5が導入されてGoogleクローラにも認識されやすくなりSEO的にも効果が見込まれます。
WEB制作を担当してるならSEO対策としてwebサイトの評価上げるためにもarticleタグを正しく使っていくことが大切です。
