なんとなくウェブページを作るとき、つい全部<div>で囲っちゃうことってない？わたしも最初はそうだったんだよね😆 headerとかmainとかfooterは使ってたけど、ナビゲーションとかその他の部分はぜーんぶ<div>で済ませてたの。
ところがある日、チュートリアル動画で「ここは<nav>使うんですよ～」って聞いて、あれ？そうなの？ってなったんだ💭
そもそもセマンティックタグって何？
簡単に言うと、「この部分はナビだから<nav>」とか「ここは記事のメインだから<main>」みたいに、役割がちゃんとわかるタグのことなんだよね✨
じゃあ今までの<div>全部変えたほうがいいの？
正直、そんなに慌てなくて大丈夫。
大きな理由は２つあるよ👇
- アクセシビリティの向上
画面読み上げソフトとかが意味を理解しやすくなるから、目の不自由な人にも優しくなるんだ😳 - SEOのちょっとした助けになる
検索エンジンがページの構造を理解しやすくなるから、ちょっとだけ有利かも✨
でも、全部を今すぐ書き換えるのはけっこう大変…💦
だからこれから新しく作るページやパーツから使い始めるのが自然かなって思う！
どうしても時間があるなら…
もし今のサイトをもっと良くしたいって気持ちがあるなら、少しずつ変えていくのもアリ。
たとえば
- ナビゲーションは<nav>に変える
- 記事のまとまりは<section>で囲む
- ボタン周りは<button>を使う
みたいに、できるところからちょこちょこ直していく感じ🌸
まとめると…
- 全部<div>でも動くけど、意味が伝わりにくい場合がある🥺
- 新しいページからセマンティックタグを意識して書くのがおすすめ！
- 時間あるなら、既存ページも少しずつ変えてみてね🔧
なんだか難しそうだけど、ちょっとずつ意識するだけでサイトの見え方や使いやすさが変わるんだなって思うよ💡
気楽に、でも大事なポイントは押さえつつ進めていけたらいいよね✨
<CuteVideoPlayer videoSrc=/videos/Smile/m2.mp4 videoSrcPC=/videos/Smile/p2.mp4 comment=ちょっとずつでいいんだよね🌸 colorTheme=sweet />
<SocialShareButtons title=「全部<div>で作っちゃったけど、今から<nav>とか使うべき？」迷える初心者のためのセマンティックタグ事情 slug=2025-09-16_21-00-00-000Z type="news" description=なんとなく全部<div>で済ませてたけど、実は<nav>や<section>みたいなセマンティックタグってやっぱり使ったほうがいいの？そんな素朴な疑問に答えます。 />
<PostComments comments_ja=やってみて。＠＠SEOじゃなくても、基本的なアクセシビリティのためにやるべきだよ。＠＠タグを変えるだけだから、戻る必要はないよ。意味づけは大事。＠＠うん、それが存在理由だよ。＠＠そうだけど、それだけじゃ足りないよ。divとspanは最後の手段にしよう。＠＠意味のある要素を使うべきだよ、簡単だし大事だよ。＠＠まずはちゃんと学んでから決めよう。影響あるdivの変更はそんなに難しくないよ。アクセシビリティも見直してみて。＠＠意味タグはアクセシビリティにめちゃくちゃ重要だよ。＠＠検索エンジンやスクリーンリーダーのためにも大事だけど、気にしなければ使わなくてもいいよ。（でも大抵は気にした方がいい）＠＠意味づけのない全部divサイトはアクセシビリティ地獄だよ。支援技術を使う人のこと理解しよう。＠＠時間があれば、意味のあるHTMLはSEOにもアクセシビリティにもいいよ、損はない。＠＠それがまさに存在理由だよ。＠＠スタイリングでグループ化するときだけdiv、それ以外は意味タグを使おう。＠＠アクセシビリティのために意味タグはホントに重要だよ。 avatars=Aidan＠＠Kimberly＠＠Christian＠＠Robert＠＠Brooklynn＠＠Leo＠＠Luis＠＠Christian＠＠Caleb＠＠Nolan＠＠Robert＠＠Robert＠＠Kingston＠＠Christian />
