みかおば
📘 HTML初心者のみかおばです！
今回は、Webページの“骨組み”ともいえる構造タグたちを紹介します😊
意味のあるレイアウトづくりに欠かせない <header> や <footer> などのタグ、ぜひ覚えておきましょう！
🧱 構造タグってなに？
HTML5から追加されたタグで、意味のあるページの骨組みを作れるようになりました。見た目は変わらなくても“意味”が伝わりやすいのが特徴です。
HTML5から登場した“セクショニング・コンテンツ”タグたち。
ページの見出しやメイン部分、メニューやフッターなどの役割を明確にするためのタグです。
見た目には大きな変化はないけれど、SEOやスクリーンリーダーにも役立つ大事なタグなんです。
💡 HTML5ってなに？
HTMLには「バージョン」があり、いま私たちが使っているのは HTML5。
2014年に正式に決まったルールで、現在の標準です。
<header>や<footer>など、新しい構造タグが追加<audio>,<video>で音声や動画も扱える- 入力フォームも強化され、スマホ対応もしやすくなった
👉 かんたんに言うと、今のWebページはHTML5で作るのが当たり前！
昔のHTML4とは違うんだよ〜、と覚えておけばOKです。
🔖 主な構造タグと役割
| タグ名 | 役割 | よく使われる場所 |
|---|---|---|
<header> | ヘッダー（ページやセクションの先頭） | サイト名・メニューなど |
<main> | ページの主なコンテンツ部分 | 記事本文など |
<footer> | フッター（ページやセクションの終わり） | コピーライト・SNSリンクなど |
<nav> | ナビゲーション（リンク一覧） | グローバルメニューなど |
<section> | 意味のあるセクション分け | ニュース一覧・FAQなど |
<article> | 独立した記事・投稿 | ブログ記事・レビューなど |
<aside> | 補足情報やサイドバー | 関連リンク・広告など |
✏️ 使い方の例
<body>
<header>
<h1>みかおばのブログ</h1>
<nav>
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">記事一覧</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>HTMLの構造タグを学ぼう</h2>
<p>今日は構造タグを紹介します！</p>
</article>
</main>
<aside>
<p>関連記事：第14回 基本構造の復習</p>
</aside>
<footer>
<p>© 2025 みかおば</p>
</footer>
</body>
👇 表示結果：
みかおばのブログ ● ホーム ● 記事一覧 HTMLの構造タグを学ぼう 今日は構造タグを紹介します！ 関連記事：第14回 基本構造の復習 © 2025 みかおば
💡 ポイント
<ul> はデフォルトで黒丸（●）付きリストになります。
黒丸ちょっとデカいけど、HTMLだけならこれで正解！
✅ ポイントまとめ
<main>は 1ページに1つだけ使うのがルール<header>や<footer>は ページ内に複数OK- タグを使うだけで 意味が伝わるHTML になる！
- SEOや音声読み上げ（アクセシビリティ）にも効果あり
初心者でもHTML5の構造タグを使うだけで、意味のあるHTMLに一歩近づけます！
HTMLやデザインに興味がある方に、おすすめリンクです👇
📌 次回予告
【第18回】HTMLで記号を表示しよう（<, >, © など）
→ 普通に書くと表示できない記号を、文字実体参照で正しく出す方法を紹介します！
🔖 この回で出てきたタグ・属性
コメント