Web制作の勉強を始めて4日目。
今回学んだのは、**「セマンティックタグ」**です。
正直、最初にこの言葉を聞いたときは、
「divと何が違うの？」
と思っていました。
見た目だけを見ると、どちらもHTMLの中で要素を囲むために使えます。
「見た目が同じなら、わざわざ違うタグを使う必要があるのかな？」
最初はそんなふうに考えていました。
でも、勉強を進めていくうちに、セマンティックタグはHTMLの構造を分かりやすく整理するために大切な役割を持っていることが分かりました。
今回は、実際に自己紹介ページを作りながら学んだことを、HTML初心者の目線でまとめていきます。
同じように、
「セマンティックタグって何？」
「divとの違いが分からない」
と悩んでいる方の参考になれば嬉しいです。
セマンティックタグとは？
まず、今回の一番のテーマであるセマンティックタグについて。
「semantic（セマンティック）」には、**「意味を持つ」**という意味があります。
つまりセマンティックタグとは、タグを見ただけで「ここは何のための部分なのか」が分かるHTMLタグのことです。
これまでの私は、何かを囲みたいと思ったら、とりあえず<div>を使っていました。
<div>はとても便利なタグですが、それ自体には「ここはヘッダー」「ここは本文」「ここはフッター」といった意味はありません。
いわば、何でも入れられる箱のようなものです。
一方でセマンティックタグには、それぞれ役割があります。
例えば、
<header>→ ヘッダー・導入部分<main>→ ページの主要な内容<section>→ 内容ごとのまとまり<footer>→ フッター・下部の情報
というように、タグを見るだけで「何を表している部分なのか」が分かります。
divとの違いは？
ここが、私が最初に一番疑問に思ったところです。
「セマンティックタグがあるなら、divは使わなくていいの？」
と思いますよね。
でも、そういうわけではありません。
<div>は意味を持たない汎用的なコンテナなので、適切な意味を持つタグがない場合などに使うことができます。
つまり、
意味を持たせられる部分にはセマンティックタグを使い、それ以外の部分ではdivを使う。
そんなふうに考えると、初心者の私にも少し分かりやすくなりました。
「見た目が同じなら、どのタグを使ってもいいんじゃない？」
最初は本気でそう思っていました。
でも、HTMLは見た目を作るだけではなく、「この部分は何なのか」という構造を伝えることも大切なんですね。
実際に使ったセマンティックタグ4つ
今回、自己紹介ページを作る中で実際に使ったセマンティックタグはこちらです。
<header><main><section><footer>
それぞれ、どんな役割があるのかを初心者なりにまとめてみます。
<header>はページの上部に使う
<header>は、ページやコンテンツの導入部分に使います。
今回作った自己紹介ページでは、名前やタイトルを入れる部分に使いました。
「ここがページの顔なんだな」と意識しながら書いてみると、<header>を使う意味が少しずつ分かってきました。
【ここに画像②：header部分が分かる自己紹介ページの画像】
<main>はページの主要な内容
<main>は、そのページにおける主要なコンテンツを囲むために使います。
今回の自己紹介ページでは、自分について紹介する本文の部分を<main>で囲みました。
ここで特に気を付けたのが、
<main>は1つのページにつき基本的に1つ
ということ。
「メインだから何個も作ればいい」というわけではないんですね。
初心者の私にとっては、ここも覚えておきたいポイントでした。
<section>は内容ごとのまとまり
<section>は、ページの中でテーマごとに内容を区切るときに使います。
今回の自己紹介ページでは、
- 趣味
- 好きなこと
- これからの目標
など、話題ごとにブロックを分けるために使いました。
最初は、
「どこからどこまでが1つのsectionなんだろう？」
とかなり迷いました。
でも、「同じテーマについてまとめたひとまとまり」と考えると、少し判断しやすくなりました。
【ここに画像③：sectionで区切った部分が分かるコード画像】
<footer>はページの下部に使う
<footer>は、ページやコンテンツの下部に使います。
今回の自己紹介ページでは、最後の締めの一言やコピーライトを入れる部分に使いました。
ブログやWebサイトを見ていると、ページの一番下にある「©〇〇」のような表記をよく見かけますよね。
自分でHTMLを書くようになって、
「こういうところにもちゃんと意味があるんだ」
と少しずつ分かるようになってきました。
【ここに画像④：footer部分の画像】
リンク先が決まっていないときはどうする？
自己紹介ページを作る中で、もう一つ地味につまずいたことがあります。
それが、リンク先がまだ決まっていないときの<a>タグです。
「とりあえずhref=""でいいのかな？」
と思っていたのですが、学習していく中で、仮のリンク先として#を使う書き方があることを知りました。
例えば、
<a href="#">リンク</a>
という形です。
#はページ内の位置を示す記号として使われるため、制作途中などで仮のリンクを置いておく場合に使われます。
ただし、実際に公開するWebサイトで意味のないリンクをそのまま残すのは避けたいので、あくまで制作途中の仮置きとして覚えておこうと思います。
「とりあえず形だけ作っておく」という場面でも、HTMLの書き方にはちゃんと意味があるんだな、と勉強になりました。
「©」にも意味がある？特殊記号について学んだ
そして今回、もう一つ「へぇ！」と思ったのが、HTMLで使われる**特殊記号（文字参照）**です。
例えば、コピーライトを表す「©」。
Webサイトのフッターでよく見かける、
© 2026 ○○
のような表記です。
HTMLでは、
©
と書くことで「©」を表示できます。
普段何気なく見ていた「©」にも、HTML上ではちゃんとした書き方があるんですね。
こういう小さな発見が、初心者の私には意外と面白かったです。
「この記号はどうやって表示しているんだろう？」
と疑問を持つことで、HTMLの知識が少しずつ増えていく気がします。
自己紹介ページを作ってみて、一番苦戦したこと
ここが今回、一番書きたかったところです。
正直、最初はどこを<section>で囲めばいいのか全然分かりませんでした。
「これが一つのセクション？」
「ここは分けたほうがいい？」
と、何度も手が止まりました。
さらに、<main>をどこに書けばいいのかでも迷いました。
<header>の中に入れてしまいそうになったり、
「<main>ってどこまで囲むんだっけ？」
と分からなくなったり。
そして、初心者の私が地味によくやってしまったのが……
</main>の閉じタグを書き忘れること。
これ、本当にやってしまいます。
開始タグを書いたことで、
「よし、ここまでできた！」
という満足感が出て、そのまま次の作業に進んでしまうんですよね。
気付いたら、
「……あれ？</main>どこ？」
となります。
さらに、<footer>の手前で</main>を閉じるのか、どこまでを<main>に含めるのか分からなくなり、コードを何度も見直しました。
開始タグを書いて満足
↓
そのまま次へ進む
↓
「あれ？閉じタグどこ？」
この流れ、何度やったことか……。
「タグはセット！」
と意識するだけでも、少しミスが減りそうです。
セマンティックタグを使うとコードが見やすくなった
それでも、実際にセマンティックタグを意識してコードを書き直してみると、ある変化に気付きました。
明らかにコードが見やすくなったんです。
これまでの私は、何でも<div>で囲んでいました。
そのため、コードを見返したときに、
「このdivは何のため？」
「こっちのdivは何を囲んでいるんだっけ？」
となることがありました。
でも、
<header>
...
</header>
<main>
<section>
...
</section>
</main>
<footer>
...
</footer>
のように意味のあるタグを使うと、
「ここがヘッダーで、ここがメイン、ここがセクションで、ここがフッターなんだな」
と、コードを見るだけでページの構造が分かります。
「HTMLって、ただ文字や画像を並べるだけじゃないんだ」
と実感できた瞬間でした。
【ここに画像⑥：セマンティックタグを使ったHTMLコード全体】
セマンティックタグを学んで分かったこと
今回勉強してみて、HTMLは見た目だけではなく、構造も大切なんだと改めて感じました。
CSSを使えば、<div>でも<section>でも見た目を似せることはできます。
でもHTMLでは、
「この部分は何なのか」
という意味を適切なタグで表現することが大切なんですね。
そして、その構造は自分だけではなく、ページを読む人や検索エンジンなどにとっても意味があります。
まだ完璧に理解できているわけではありません。
それでも、今回の勉強を通して、
「なんとなくdivで囲む」から一歩進めた
ような気がしています。
今日の学びをまとめると
今回学んだことを、初心者なりにまとめてみます。
- HTMLは見た目だけではなく、構造も大切
- セマンティックタグは、それぞれ意味や役割を持っている
<div>は意味を持たない汎用的なコンテナ<header>はページやコンテンツの導入部分に使う<main>はページの主要な内容に使う<section>はテーマごとのまとまりに使う<footer>はページやコンテンツの下部に使う- リンクの仮置きでは
href="#"が使われることがある ©を使うと「©」を表示できる- 開始タグと閉じタグはセットで意識する
- 最初は迷って当たり前。実際に書きながら覚えていく
まだまだ分からないことだらけですが、一つずつ「なぜこう書くのか」を理解していくことが大切なんだと感じています。
次回は「リストタグ」を勉強します
次回は、**「リストタグ」**について学んでいく予定です。
<ul>や<ol>、<li>など、これまで何気なく見たり使ったりしていたタグを、改めて基礎から勉強してみます。
Web制作の勉強を始めて、まだ4日。
分からないことも多いし、何度も手が止まります。
でも、子育てのすき間時間を使いながらでも、少しずつ前に進めています。
完璧を目指すより、まずは100日続けてみる。
そんな気持ちで、これからも一日ずつ積み重ねていきたいと思います。
それでは、また次回の記事でお会いしましょう。
コメント