articleタグとは

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

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

目次

articleタグとは

生徒

今日は何について学ぶんですか?

先生

今日はHTMLの「articleタグ」について学ぶよ。このタグは、セマンティックタグと呼ばれてるHTMLタグで、headerタグやfooterタグなどもセマンティックタグに含まれるよ。

生徒

そうなんですね。でもarticleタグってどういう場面で使うんですか?

先生

articleタグは、例えば、ニュース記事やブログ投稿、製品のレビュー、コメント欄など、その内容が一つの独立した情報として成立している場合に使うんだよ。

生徒

なんだか、使い道が広そうですね。

セマンティックタグとは

先生

はじめに、セマンティックタグについて説明するよ。

お願いします。

セマンティックタグは、その要素が持つ意味を明示的に表現するHTMLの要素を指すんだ。

うーん、よくわからないです…

例えば、<header>はページのヘッダー部分、<footer>はフッター部分、<article>は記事の内容といった具体的な役割を持っているよ。

つまり、それぞれのタグがページのどの部分かを示しているんですね。

その通り。だから正確にページの構造を伝えることができるよ。

でもそれってどういうメリットがあるんですか?

それがアクセシビリティの向上やSEO対策にも寄与するよ。

生徒

え、なぜですか?

先生

セマンティック要素があれば、スクリーンリーダーを使用している人でも内容を理解しやすくなるからね。

先生

SEOにおいては、検索エンジンがコンテンツをより正確に理解できるようになるから、検索結果に適切な位置に表示されやすくなると言われているよ。

生徒

なるほど、それなら使わない手はないですね。

headerタグやfooterタグなどもセマンティック要素です。これらを組み合わせて使うことで、Webページ全体の構造が明確になります。明確な構造は、ユーザーがページを効率的に読み取る手助けをするだけでなく、SEOにも寄与します。

その他のセマンティック要素
  • headerタグ:文書やセクションのヘッダーを表す。文書の冒頭にある見出しやナビゲーションのリンクなどに使う
  • navタグ:ナビゲーションリンクを表す。グローバルナビゲーションなどに使う。
  • articleタグ: 文書の内容が自己完結したコンテンツを示す。ブログ記事全体など
  • sectionタグ: ページ内のまとまったセクションを表す。汎用性が高い。
  • asideタグ:補足情報などを表す。無くてもコンテンツの本筋の意味は通じる要素に使う。
  • footerタグ:直近のセクションに関する情報を示す。関連リンクや著作権情報など。
あわせて読みたい
セマンティックコーディングとは セマンティックコーディングとは セマンティック(セマンティクス)は「意味的な」などと訳される形容詞で、セマンティックコーディング(または、セマンティックHTML)...
あわせて読みたい
headerタグとは headerタグの基本 今日は何について学ぶんですか? 今日はHTMLのheaderタグについて学ぶよ。このタグはウェブサイトのヘッダー部分を表すために使用されるよ。 headerタ...
あわせて読みたい
navタグとは navタグとは navタグは、HTML5で導入されたセクショニング要素の1つで、"navigation"の略です。このタグは、ウェブページ上のナビゲーションリンクや、他のページへのリ...
あわせて読みたい
sectionタグとは sectionタグとは sectionタグはHTML5で新たに実装されたタグで、その名の通り、文書の章や節を示す役割を持ちます。文章の一つのまとまりを作るために使うので、例えば...
あわせて読みたい
asideタグとは asideタグとは asideタグのasideとは「余談」、「補足情報」を意味しており、HTMLにおいてはメインコンテンツに対する「補助的な内容」であることを示すタグです。補足...
あわせて読みたい
footerタグとは footerタグとは HTMLのfooterタグはセクションのフッターを示します。一般的にフッターとは「文書ページの下部に表示されるもの」という意味があり、footerタグも同じ役...

これらの要素を適切に使用することで、ウェブページの構造が明確になり、ユーザーエージェント(ブラウザやスクリーンリーダーなど)が内容を理解しやすくなります。

ただし、装飾やデザイン目的での使用は推奨されません。そのような目的の場合は、意味を持たない非セマンティックな<div>や<span>などのタグが適切です。

aritcleタグの使用例

実際にはどう使うんでしょうか?

例えば、以下のように使うことができるよ。

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

通常は他のセマンティック要素と組み合わせて使用することも多いよ。
sectionタグ、asideタグ、navタグ、headerタグ、footerタグなどと組み合わせて、以下のような文書構造を作ることもできるんだ。

<!-- HTMLの基本構造を定義 -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>サンプルウェブサイト</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <!-- ヘッダーエリア -->
  <header>
    <!-- ウェブサイトのタイトル -->
    <h1>ウェブサイトのタイトル</h1>
    <!-- ナビゲーションメニュー -->
    <nav>
      <ul>
        <li><a href="#home">ホーム</a></li>
        <li><a href="#about">私たちについて</a></li>
        <li><a href="#services">サービス</a></li>
        <li><a href="#contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <!-- メインコンテンツエリア -->
  <main>
    <!-- articleタグで独立したコンテンツを囲む -->
    <article>
      <!-- sectionタグでコンテンツ内のセクションを定義 -->
      <section>
        <h2>セクション1</h2>
        <p>内容1</p>
      </section>
      <section>
        <h2>セクション2</h2>
        <p>内容2</p>
      </section>
    </article>
    <!-- asideタグで補足情報や広告などを表示 -->
    <aside>
      <p>関連情報や広告など</p>
    </aside>
  </main>

  <!-- フッターエリア -->
  <footer>
    <!-- 著作権情報 -->
    <p>© 2023 サンプルウェブサイト. All Rights Reserved.</p>
    <!-- プライバシーポリシーと利用規約へのリンク -->
    <p><a href="#privacy-policy">プライバシーポリシー</a> | <a href="#terms-of-service">利用規約</a></p>
  </footer>

</body>
</html>
/* CSSの基本設定 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* ヘッダーのスタイリング */
header {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1em;
}

/* ナビゲーションメニューのスタイリング */
nav ul {
  list-style-type: none;
  padding: 0;
}
nav ul li {
  display: inline;
  margin-right: 20px;
}
nav ul li a {
  color: white;
  text-decoration: none;
}

/* メインコンテンツエリアのスタイリング */
main {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}

/* articleタグとsectionタグのスタイリング */
article {
  flex: 70%;
  padding: 20px;
  border: 1px solid #ccc;
}

/* asideタグのスタイリング */
aside {
  flex: 30%;
  padding: 20px;
  border: 1px solid #ccc;
}

/* フッターのスタイリング */
footer {
  background-color: #333;
  color: white;
  text-align: center;
  padding: 1em;
  position: relative;
  bottom: 0;
  width: 100%;
}

/* フッター内のリンクのスタイリング */
footer a {
  color: white;
  text-decoration: none;
  margin: 0 5px;
}

articleタグは独立したセクションを明確に示すための有用なツールです。その他のセマンティック要素との違いを理解し、それぞれ適切な場所で使うことが、ウェブページの効率的な構造化に繋がります。

articleタグ使用上のポイント

生徒

先生、articleタグはページ内で何度も使っても大丈夫なんですか?

先生

大丈夫だよ。
ブログの投稿一覧ページなどでは、各投稿がそれぞれarticleタグで囲まれていることがよくあるからね。

生徒

そうなんですね。
そういえばarticleタグとsectionタグって似ているような気がするんですが、どう違うんですか?

先生

良い質問だね。確かに、両方ともページの特定の部分を囲むための要素で似ているけど、使い分けが必要なんだ。

生徒

ぜひ教えてください。

先生

まず、sectionタグは文章の節や章を表すタグで、articleタグよりも汎用性が高い。

先生

一方、articleタグはその内容が自己完結している必要がある。だからよく、articleタグの中にsectionタグが使われることがあるよ。

生徒

微妙に違いますね。

先生

それとarticleタグ内のコンテンツには、h1~h6タグで見出しを設置するのがベストだよ。見出しを設置することで、より文書の構造が明確になります。

生徒

なるほど、それならarticleタグをdivタグのように使ってデザインや装飾をしたら便利ですね。

先生

いや、実はそれは避けるべきとされているよ。装飾やデザイン用には、意味を持たないdivタグなどを使用しよう。

生徒

了解しました!ありがとうございます。

ポイントまとめ
  • articleタグは複数回使用可能
  • articleタグ内のコンテンツに見出しを設置する
  • 似た意味を持つsectionタグは、文章の節や章を表すタグ
  • articleタグはその内容が自己完結している必要があるので、articleタグの中にsectionタグが使われることがある
  • 装飾、デザイン目的での使用は避ける
あわせて読みたい
divタグとは divタグとは HTMLのdivタグのdivは「division」の略で、要素をグループ化してデザインやレイアウトのために使用します。HTMLの他のタグは段落を表すpタグや見出しを表す...

まとめ

今日は本当に勉強になりました!

articleタグやセマンティック要素は、Webページを効率的に構造化するために非常に重要な要素だから、しっかりと理解しておこうね。

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

お取引企業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(祝祭日を除く月曜日~金曜日)
目次