HTML header main footerの使い方｜セマンティック構造

📌

結論

<header>・<main>・<footer> でページの構造を表現できます

Webページを意味のある構造にするのがセマンティックHTMLです。

📝 実際のコードはこちら

<header>ヘッダー</header>
<main>メインコンテンツ</main>
<footer>フッター</footer>

セマンティックHTMLとは

セマンティックは意味のあるという意味です。<div> で囲んでも見た目は変わりませんが、セマンティックタグを使うとここはヘッダーだよここがメインコンテンツだよとブラウザや検索エンジンに伝えられます。

・**SEO**: Googleがページ構造を正しく理解できる・**アクセシビリティ**: スクリーンリーダーが構造を把握できる・**可読性**: コードを読む人にとっても分かりやすい

・<div> の代わりにセマンティックタグを使おう・<header>、<main>、<footer> が基本の3つ・SEOとアクセシビリティが向上する

header、main、footerでページの基本構造を作ってみましょう。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

header, main, footer を使った基本構造を作ってください。mainの中身は自由です。

詰まったらヒント

headerが上、mainが中央、footerが下です。