articleタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。

この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。

目次

articleタグとは

articleタグの「article」は「記事・論説・論文」という意味があり、HTMLタグにおいては、Webサイト内のコンテンツで「独立したセクション」であることを示すタグです。自己完結しているセクションに使用します。

articleタグの必要性

articleタグはHTML5で追加されたセマンティック要素のうちの一つです。セマンティック要素とは、<form> <table>などのタグ自体に意味を持つ要素で、セマンティック要素を使ってHTML文書をマークアップすることで、文書構造が明確になります。すると検索エンジンやスクリーンリーダーなどのコンテンツを読み込むプログラムに対してより正確に視覚情報を伝えることができます。逆に<div>や<span>などはそれ自体に意味を持たない非セマンティック要素と言えます。

aritcleタグの使い方

articleタグは、内容がそれだけで完結したセクションであることを示すので、articleタグ内のコンテンツだけを抜きとって読んでも意味が成立する要素に使用します。例えば、

ブログサイトの記事やニュースサイトの記事、コメント欄などが当てはまります。

例:

  <article>
      <h1>大見出し</h1>
      <h2>小見出し2</h2>
      <p>テキスト1</p>
      <h2>小見出し2</h2>
      <p>テキスト2</p>
    </article>

HTMLにはarticleタグ以外にもセクションを示すタグが存在します。

よく使うものには「sectionタグ」、「asideタグ」、「navタグ」、「 headerタグ」、「footerタグ」などがあります。これらを用いて文書構造を組み立てると、以下のような例ができます。

例:

<body>
<header>
<nav>
</nav>
</header>
<main>
<article>
<section>
</section>
<section>
</section>
</article>
<aside>
</aside>
  </main>
<footer>
</footer>
</body>

  • headerタグ:文書やセクションのヘッダーを表す。文書の冒頭にある見出しやナビゲーションのリンクなどに使う
  • navタグ:ナビゲーションリンクを表す。グローバルナビゲーションなどに使う。
  • articleタグ: 文書の内容が自己完結したコンテンツを示す。ブログ記事全体など
  • sectionタグ: ページ内のまとまったセクションを表す。汎用性が高い。
  • asideタグ:補足情報などを表す。無くてもコンテンツの本筋の意味は通じる要素に使う。
  • footerタグ:直近のセクションに関する情報を示す。関連リンクや著作権情報など。

articleタグ使用上のポイント

articleタグは複数回使用可能

articleタグは同一ページ内で何度使っても構いません。

コンテンツ内に見出しを設置する

articleタグ内のコンテンツにはh1~h6の見出しを設置してください。見出しを設置しないとプログラムがHTMLのアウトラインとして認識せず、文書構造明確化の効果が薄いです。

sectionタグとの違い

sectionタグはその名の通り文章の節や章を表すタグでarticleタグと同様、セクション分けにまつわるタグですが、articleタグより汎用性が高いのが特徴です。sectionタグ内のコンテンツは独立・完結している必要はありません。articleタグの子要素としてsectionタグが使用されるケースが多いと思います。

装飾、デザイン目的では使わない

CSSやJavaScriptでのDOM操作を目的としてarticleタグを使用しないようにしましょう。

その場合はdivタグを使います。

まとめ

articleタグはそれ自体で完結したセクションに使うタグです。sectionタグなど似たようなタグが多いので混乱しないようにしましょう。

メールやホームページの
「困った!」を解決しませんか?

お取引企業20,000を超える実績を持つスピーバーでは、豊富な知識を持ったIT業務の専門家が 複雑な手続きや設定をサポートし、お客様の挑戦と成長を応援いたします。

スピーバーに相談する
よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

肩書:Webエンジニア兼Webライター
名前:さのくん
経歴:大学在学中にオペレーションズリサーチ分野を学ぶ過程でプログラミングを習得。
その後は不動産業界に従事しつつ、サイドビジネスとしてWebエンジニアを兼業。フロントエンド開発を得意とする。
Webライティング歴:1年超で執筆数は累計30記事を超える
使用言語:C言語, HTML/CSS/Sass, Javascript, Typescript, PHP, Shopify(Liquid HTML)

まずはお気軽に
お問い合わせください

スピーバーのサポートデスクでは、レンタルサーバーに関するご質問やご相談だけでなく、
お客様のオフィス内でのお困りごと全般のご相談を受付けています。

パソコンの操作、メールの設定、迷惑メールやスパムメールが多くて困るといった、
日常業務でのお困り事をお気軽にご相談ください。

お電話での
お問い合わせは
スピーバーお問い合わせ電話番号:0120-63-1138
0120-63-1138
9:00~18:00(祝祭日を除く月曜日~金曜日)
目次