【HTML基礎】ブロック要素でのグループ分け

ブロック要素でのグループ分け

HTMLを学習しており、よく使うタグはなんとなく分かった。

その次に何を学習すればいいのか分からない。

<article>、<section>、<header>...などの使い方が分からない。

こういった方向けの記事です。

前回は1つひとつの細かい要素を囲むタグを紹介してきました。

しかし、これらのタグを上から並べるだけでは、なかなか綺麗なレイアウトが作れません。

そこで大事になってくるのが、まとまりごとのブロック分けなのです。

本記事のテーマ

HTMLのブロック要素を意識しながら、グループ分けしてコーディングをする

作業すること

テキストエディタにHTMLのコードを書いてみる
HTMLのコードをブラウザで開いてみる

読者さんへのメッセージ

本記事は全くプログラミング経験がない方で、これからWeb制作を始める、もしくはWeb制作を通してプログラミングの勉強を始めようとしている方に向けた記事です。

また、現役の理系大学生や文系出身でエンジニア、Webデザイナー、Webディレクターに就職予定の方にもお読みいただける内容です。

今回は、HTMLのブロック要素をグループ分けしてコーディングをするタグを紹介します。

ほとんどパソコンを触ったことがない方でもわかるように解説していきます。

では、さっそく見ていきましょう。

①ブロック要素でのグループ分け

グループ分け画像

Webサイトは様々な構成要素から作られています。

例えば、サイト上部に表示するヘッダー、プロフィール、本文、関連記事の一覧などです。

それらを1つのかたまりとしてタグで囲み、グループ分けをしていく必要があります。

例えば、

<h1>HTML講座④</h1>
<p>ブロック要素でのグループ分けはとても大切なことです</p>
<h2>CSSの書き方</h2>
<p>CSSはグループごとに当てていくことができます。</p>

上記のコードのように、見出し(<h>)と文章(<p>)が2つずつあったとします。

この中で、各見出しの「HTML講座④」と「CSSの書き方」は違うテーマを持っているので、別のグループとしてまとめた方がいい場合があります。

<article>
<h1>HTML講座④</h1>
<p>ブロック要素でのグループ分けはとても大切なことです</p>
</article>

<section>
<h2>CSSの書き方</h2>
<p>CSSはグループごとに当てていくことができます。</p>
</section>

そこで、グループ分けをするために<article>というタグと<section>というタグを使って囲みました。

グループ分けのブラウザ表示

グループ分けをしただけでは、ブラウザの表示に変化はないですが、後に学習するCSSを書いていくと、グループごとに背景色を変えたり、レイアウトを変更したりすることができます。

ここまで読むと、「別にわざわざグループ分けしなくてもいいのでは？」って思う方もいますよね。

でも実はこのグループ分けが重要で、グループ分けに使うタグにはそれぞれに意味があり、コンピューターに対して「Webページのこの部分はこのような役割だよ」と知らせる役割があるのです。

そのため、用途に合わせてどのタグで囲むのかを考える必要があります。

グループ分けしたところで、Webページの見た目はあまり変わらないことが多いので、つい軽視してしまいがちですが、いつかみなさんのエンジニアとしてのスキルが上級者になり、「検索エンジンの上位に表示されるサイト」や「内部構造がしっかりとしたサイト」の制作を求められたときは必須のスキルとなりますので、今のうちから意識して取り組みましょう。

②ヘッダー部分を作る【<header>タグ】

ヘッダー画像

<header>ダグ

ヘッダー部分に当たる要素を<header>タグで囲みます。

ヘッダーとは、サイト名、ロゴ画像、ナビゲーションメニューなどが含まれます。

<head>タグとは異なるタグですので注意しましょう。

サンプルコード1

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>グループ分け</title>
</head>
<body>
<header>
<h1>プログラミング学習サイト</h1>
<p>このサイトはプログラミングの学習方法をお届けします</p>
</header>
</body>
</html>

ブラウザで表示すると、、、

サンプルコード1のブラウザ表示

これで上記の2行はヘッダーとしての役割を持ちました。

②ナビゲーションメニューを作る【<nav>タグ】

<nav>タグ

ナビゲーションメニューに当たる要素を<nav>で囲みます。

ナビゲーションメニューはヘッダーの中に作られるとこが多く、コーディングも<header>タグの中に<nav>タグが含まれることが多いです。

サンプルコード2

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ナビゲーションメニューを作る</title>
</head>
<body>
<header>
<h1>プログラミング学習サイト</h1>
<p>このサイトはプログラミングの学習方法をお届けします</p>
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</nav>
</header>
</body>
</html>

ブラウザに表示すると、、、

これでヘッダーの中にナビゲーションメニューが作られました。

「全然ヘッダーぽくない」や「メニューって言ってもただの箇条書きじゃん」と思うか方もいるかと思いますが、HTMLは文章や文字列が何を表しているかをコンピューターに分からせることが役割です。

デザインは後からCSSで作っていくので、まずはこのような形で問題ありません。

③読み物、記事の部分を作る【<article>タグ】

記事の画像

<article>タグ

サイトの記事を表す要素は<artcle>タグで囲みます。

そこだけ見ても独立したページとして、単体で完結するような内容に使います。

ブログサイトや雑誌サイトの1つの記事部分をイメージすると分かりやすいと思います。

サンプルコード3

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>記事を表示</title>
</head>
<body>
<article>
<h1>HTML講座④</h1>
<p>ブロック要素でのグループ分けはとても大切なことです</p>
</article>
</body>
</html>

ブラウザに表示すると、、、

サンプルコード3のブラウザ表示

これで上記2行は記事の役割を持ちました。

④テーマを持ったグループを作る【<section>タグ】

テーマを持ったグループ

<section>タグ

テーマを持ったグループは<section>タグで囲みます。

<article>タグと似ていますが、違いは<section>タグの中だけを見ても完結しないことです。

<section>タグの中に1つのテーマがあるということが重要です。

関連記事の紹介や、おすすめ商品の表示などをイメージすると分かりやすいです。

サンプルコード4

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>関連記事を表示</title>
</head>
<body>
<section>
<h2>関連記事</h2>
<ul>
<li><a href="#">CSS講座①</a></li>
<li><a href="#">JavaScript講座①</a></li>
</ul>
</section>
</body>
</html>

ブラウザに表示すると、、、

サンプルコード4のブラウザ表示

これで関連記事は、テーマを持ったグループであるという役割を持ちました。

⑤メインコンテンツ部分を作る【<main>タグ】

メインコンテンツの画像

<main>タグ

そのページの中心となるコンテンツ全体は<main>タグで囲みます。

したがって<main>タグの中には様々なグループが入ることが多いです。

サンプルコード5

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>メインコンテンツの表示</title>
</head>
<body>
<main>
<article>
<h1>HTML講座④</h1>
<p>ブロック要素でのグループ分けはとても大切なことです</p>
</article>

<section>
<h2>関連記事</h2>
<ul>
<li><a href="#">CSS講座①</a></li>
<li><a href="#">JavaScript講座①</a></li>
</ul>
</section>
</main>
</body>
</html>

ブラウザに表示すると、、、

サンプルコード5のブラウザ表示

メインコンテンツとしての役割を持ちました。

⑥補足情報を表示【<aside>タグ】

補足情報の表示

<aside>タグ

本文ではない補足情報は<aside>タグで囲みます。

例えば、Webページの横の方に表示したいプロフィールなど、サイドバーとかをイメージすると分かりやすいです。

メインコンテンツとは関連性が低いものに使いましょう。

サンプルコード6

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>補足情報</title>
</head>
<body>
<aside>
<h3>このサイトの運営者</h3>
<p>HARUHIと申します！よろしくお願いします！</p>
</aside>
</body>
</html>

ブラウザに表示すると、、、

サンプルコード6のブラウザ表示

補足情報としての役割を持ちました。

⑦フッター部分を作る【<footer>タグ】

フッターのコピーライトの画像

<footer>タグ

フッター部分に当たる要素を<footer>タグで囲みます。

フッターとは、ページ下部にある部分を指し、コピーライトなどが記載されていることが多いです。

サンプルコード7

ブラウザに表示すると、、、

サンプルコード7のブラウザ表示

Copyrightがフッターとしての役割を持ちました。

⑧意味を持たないブロック要素を作る【<div>タグ】

意味を持たないグループ分け

<div>タグ

これまでは何かしらの意味を持ったブロック要素を紹介してきました。

しかし、中にはどの意味にも当てはまらなかったり、デザインのためだけにグループ分けしたい場合も出てきます。

そんな時に使うタグが<div>タグです。

<div>タグは特に意味を持たないタグで、とりあえずグループにまとめたいときなどに使えます。

サンプルコード8

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>意味を持たないブロック</title>
</head>
<body>
<div>
<h2>divタグの使い方</h2>
<p>divタグは特に意味を持たないタグです。</p>
</div>
<div>
<h3>デザインを作るためにdivタグを使う</h3>
<p>divタグで囲んだところ全体にCSSを反映させることができます。</p>
</div>
</body>
</html>

ブラウザで表示すると、、、

サンプルコード8のブラウザ表示

特に意味を持たないグループを2つ作れました。

意味を持たないってところが非常に便利なタグです。

したがって、グループ分けのタグの中ではよく使うことになります。

次はCSSの学習！

これまでHTMLの学習お疲れ様でした！

まだまだ紹介してないタグや、紹介したタグの中でも別の使い方が出来るものなど、突き詰めたらキリがないので、とりあえずHTMLはこれくらいにしておいて次に進みましょう。

次はデザインを作るCSSを勉強します。

HTMLとCSSは別のものですが、Web制作ではほぼセットみたいなものです。

HTMLとCSSの両方を使うことで、いよいよ本格的なWebサイトっぽくなってきます。

今の時点でHTMLに不安がある人も、完璧にしてから進もうと思わず、先に進んじゃいましょう！

というより、CSSの勉強をしないとHTMLを完全に理解することはできませんので、CSSの勉強をしながらHTMLの理解も深める！くらいのスタンスでいいと思います！笑

次回もたくさん手を動かしながら頑張りましょう！