こんにちは、Mochiです。
ブロック要素って何？グループ化するにはどんな要素を使えばいいんだっけ？🤔そんな方に向けて、HTMLのブロック要素によるグループ化について使い方やそれぞれの持つ意味を解説します。
学んでいきましょう！
🧱ブロック要素とは？
ブロック要素とは、前後に改行が入るような一つのかたまりの要素です。例えば<p>タグは一つの段落としてのかたまりを表すため、ブロック要素です。
<p>1つのかたまりです</p>
<p>2つ目のかたまりです</p>
これと対照的な要素に文章の一部であるインライン要素があります。例えば<a>タグは一つのかたまりではなく、このように文章に入れられるためインライン要素です。
<p>a要素は<a>このように文章中に入る</a>のでインライン要素です</p>
このブロック要素で複数の要素をグループにすることができます。どのようにグループにするのか、なぜグループにするのか学んでいきましょう。
🫡ブロック要素でグループ化する
ブロック要素でグループ化することは、それぞれのグループに意味を与える役割があります。例えばひたすらに段落を表す<p>タグを並べても、どこまで話が続いているのか、どこで切り替わっているのか分かりにくいです。そこで意味を持つブロック要素を使ってグループ化してあげることで、より内容が伝わりやすくなり、後々のレイアウトや色を整える際にも役立ちます。
また、意味を与えることでGoogle Choromeなどの検索エンジンが内容を理解しやすくなり、より検索で上位に表示される可能性が上がります。そして、目の見えない方がスクリーンリーダーでWebサイトを読み上げる時にも役立ちます。
ただし、これから紹介する要素は意味を与えるものの、見た目は変化しません。注意してください。
<aside>
<p>Mochi Blogはあなたのスキルアップを手助けしています</p>
</aside>
<p>Mochi Blogはあなたのスキルアップを手助けしています</p>
このように大切な役割を持つグループ分けのためのブロック要素一覧はこちらです。
- <header>タグ
- <nav>タグ
- <article>タグ
- <footer>タグ
- <main>タグ
- <section>タグ
- <aside>タグ
- <div>タグ
以下ではそれぞれを解説します！
ヘッダー：<header>タグ
<header>タグはヘッダーの意味でグルーピングします。ヘッダーとはWebページの上部に配置しているような文章やリンク、情報です。head属性とは違うので注意してください。
シンプルに挟むことで、中の要素に意味を与えます。これは他のブロック要素でも同じです。
<header>
<p>ブログのタイトル</p>
<p>投稿日</p>
</header>head属性ってなんだっけ？🤔という方はこちらの記事を読むのがおすすめです。
https://mochi-blog.blog/blog/html-structure
ナビゲーション：<nav>タグ
<nab>タグはナビゲーションという意味で要素をグループ化します。navはnavigationの略です。ナビゲーションとは、ユーザにどんなページがあるのかを案内するメニューのようなものです。リンクなどを配置し、ユーザが選択したページに飛ぶことができる場合が多いです。
<nav>
<p>Home</p>
<p>About</p>
<p>Blog</p>
</nav>記事：<article>タグ
<article>タグは記事という意味で要素をグループ化します。イメージとしては読み物であるニュースのサイトやブログサイトなどの記事にこのタグを用います。
<article>
<h2>Mochi Blogの役割</h2>
<p>Mochi Blogはスキルアップのためのサイトです</p>
</article>フッター：<footer>タグ
<footer>タグはフッターという意味で要素をグループ化します。フッターとはページの下部にある情報です。例えば、コピーライトやSNSが配置されています。
<footer>
<p>Mochi Blog</p>
<a href="#">Github</a>
</footer>メインコンテンツ：<main>タグ
<main>タグはページのメインコンテンツという意味でグループ化します。<article>などと似ていて困惑してしまうかもしれませんが、<main>タグの方がより大きいグループであるイメージを持つと良いでしょう。そのため<main>タグの中にはさまざまな他のグループが入ることもあります。
<main>
<article>
<h2>Mochi Blogの役割</h2>
<p>Mochi Blogはスキルアップのためのサイトです</p>
</article>
<aside>
<p>このように複数のグループが入ることもあります。</p>
</aside>
</main>セクション：<section>タグ
<section>タグはテーマを持った小さなまとまりという意味でグループ化します。<section>内だけでは完結しないような、部分的な内容のまとまりを入れます。
<section>
<h2>Mochi Blogとプログラミング</h2>
<p>プログラミングはMochi Blogの一部です。</p>
</section>補足情報：<aside>タグ
<aside>は補足情報をという意味でグループ化します。本文とは関連性が低い場合などに用います。
<aside>
<p>ところで昨日食べた餃子は美味しかったです。</p>
</aside>意味を持たない：<div>タグ
<div>タグは意味を持たない状態でグループ化します。これまで紹介してきたタグのどれにも当てはまらないが、要素をグループ化したい場合に使います。
<div>
<p>とにかくまとめたい！</p>
</div>注意点として、むやみに<div>タグを使うのは避けましょう。例えば補足情報であるのに、<aside>タグではなく<div>タグを使ってしまうと「補足情報」という意味が抜けてしまいます。これによりGoogle Chromなどの検索エンジンがうまく情報を理解できなくなります。
🎉まとめ
グループ化できるブロック要素について紹介しました。そして、皆さんはこれらの要素の持つ意味と役割を学び、スキルアップしました！素晴らしいです👏
どれも見た目は変わらないのですが、要素のグループに意味をもたらすため重要な要素です。一度に全てを覚えるのは大変ですので、何度もこの記事などを見返して徐々に記憶に定着させていきましょう。
HTMLを覚えていき、後々はもっと稼げるようになりたいという方は次の記事を参考にしてみてください。
🫱 ゼロからプログラミングで稼げるようになるまでのロードマップ
また、HTMLだけでなく他にもプログラミング言語を学んでみたい方は次の記事を読んでみるのがおすすめです。
🫱 初心者におすすめのプログラミング勉強本10選｜最適本が見つかる！
