この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「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タグ：直近のセクションに関する情報を示す。関連リンクや著作権情報など。
これらの要素を適切に使用することで、ウェブページの構造が明確になり、ユーザーエージェント（ブラウザやスクリーンリーダーなど）が内容を理解しやすくなります。
ただし、装飾やデザイン目的での使用は推奨されません。そのような目的の場合は、意味を持たない非セマンティックな<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タグが使われることがある
- 装飾、デザイン目的での使用は避ける
まとめ
今日は本当に勉強になりました！
articleタグやセマンティック要素は、Webページを効率的に構造化するために非常に重要な要素だから、しっかりと理解しておこうね。
