グループ化とは
グループ化とは
グループ化とは、「ひとまとまりのコンテンツにタグをつけて、ひとつのグループとして扱うこと」を言います。扱っている内容によってさまざまなグループ化のためのタグが用意されているため、コードの構造が分かりやすくなります。ブラウザに表示した際の見た目の変化はないのですが、次回より解説していくCSSはグループごとに設定していくため、グループ化は計画的に行うようにしましょう。
グループ化の意味
実は、以前まではこのようなグループを、特に意味を持たない<div>タグで設定していました。しかし、HTML5以降では新しいタグが用意され、コンテンツの役割に応じて様々なグループ化のタグが設定できるようになりました。これらのタグを使用することで、コードが読みやすくなるだけでなく、SEO的にも検索エンジンに構造を分かりやすく伝えることができるようになります。今でも<div>タグは使用しますが、以下の点を意識して使用してください。
・意味づけができるコンテンツに関してはそれに相応しいタグで囲む。
・それ以外は<div>タグを使用する。
グループ化のための要素タグ
<header>～</header>
ページ上部にあるヘッダー部分を構成します。多くの場合ロゴやページタイトル、ナビゲーションメニュー（後述）が含まれます。<head>タグとは違うので注意しましょう。
<nav>～</nav>
ナビゲーションメニューを構成します。主に<header>タグの中に含まれ、各メニューへのリンクが貼られている部分となります。
<article>～</article>
articleとは「記事」という意味を持ち、その名の通り、読み物・記事の部分を構成する部分に使用します。ニュースサイトやブログサイトの記事部分をイメージしていただければ問題ありません。
<section>～</section>
「見出し＋記事」など、テーマを持ったグループを構成します。<article>タグと混同してしまう方もいますが、記事単体ではなく、「見出し」などを含めたまとまりを扱います。
<main>～</main>
ページのメインコンテンツを構成し、この中に様々なグループを定義していきます。一つのページで一度だけ使用することができます。
<aside>～</aside>
メインコンテンツとは関連性の低い補足情報を構成し、広告エリアやサイドバーに適用します。
<footer>～</footer>
Webページの下部にあるフッター部分を構成し、コピーライトやSNSへのリンクなどが該当します。
<div>～<div>
意味を持たないブロック要素を構成します。前述までの目的を持った要素のどの用途にも当てはまらないものや、デザインのためだけにグループ化をしたいときに使用します。
サンプルコード
実際のコードとブラウザでの表示を見比べてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>グループ化</title>
</head>
<body>
<header>
<h1>ヘッダー</h1>
<nav>
<ul>
<li><a href="#">ヘッダー＋ナビゲーション</a></li>
<li><a href="#">ヘッダー＋ナビゲーション２</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>メイン＋アーティクル（グループ化についての記事など）</h2>
<p>メイン＋アーティクル（これは記事です。<br>
これは記事です。これは記事です。<be>
これは記事です。これは記事です。これは記事です。<br>
これは記事です。これは記事です。これは記事です）</p>
</article>
<section>
<h2>メイン＋セクション（リンク先）</h2>
<ul>
<li><a href="#">メイン+セクション（リンク先1）</a></li>
<li><a href="#">メイン+セクション（リンク先2）</a></li>
</ul>
</section>
</main>
<aside>
<h2>アサイド（広告など）</h2>
<p>アサイド（広告のテキスト部分）</p>
</aside>
<footer>
<p>フッター（Copyright 2023 neugate）</p>
</footer>
</body>
</html>
今回でHTMLは終了します。今回紹介した以外にもたくさんの表現方法があります。ぜひ色々調べながら自分の思い通りのWebサイトを構築してください。
次回からはCSSについて解説していきます。
コメント