1.

HTMLの構造を示す要素｜html・head・bodyとheader・main・footer

▶
編集

本稿は HTML の構造を示す要素に関する記事です。文書全体の骨組みを定義する <html>・<head>・<body> から、メタ情報を扱う <meta>・<title>、構造化のための <header>・<main>・<footer>・<div> など、HTML 文書の大枠を組み立てる要素を扱います。

子ページから要素を選択してください。

本ページの子ページ

HTMLの基本骨格

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>ページタイトル</title>
  <meta name="description" content="このページの概要">
</head>
<body>
  <header>...ヘッダ...</header>
  <main>...本文...</main>
  <footer>...フッタ...</footer>
</body>
</html>

主な構造要素の役割

要素意味
<!DOCTYPE html>HTML5 として宣言 (互換モード回避)
<html>文書のルート。lang 属性で言語を指定
<head>メタ情報・CSS・スクリプト読込
<title>タブ・ブックマーク・検索結果に表示
<meta>charset / description / viewport / OGP 等
<link>外部 CSS、favicon、canonical など
<script>JavaScript 埋め込み・外部読込
<body>表示される本文
<header>ヘッダ (サイトロゴ・ナビ等)
<nav>ナビゲーション
<main>ページの主たるコンテンツ (1ページに1つ)
<article>独立した記事・投稿
<section>意味的な区切り
<aside>補助コンテンツ・サイドバー
<footer>フッタ・コピーライト等
<div>意味を持たないブロックの汎用箱
<span>意味を持たないインラインの汎用箱
<address>連絡先情報

セマンティック (意味的) な構造の重要性

  • アクセシビリティ — スクリーンリーダがランドマークとして読み上げる
  • SEO — 検索エンジンがページ構造を理解しやすい
  • 保守性 — 後から見ても「ここはヘッダ／メイン」が明瞭
  • 使い分け目安 — 意味があるなら article / section / nav / main、本当に意味の無い箱だけ div

headによく書く要素

<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="...">
<link rel="canonical" href="https://example.com/page">
<link rel="icon" href="/favicon.ico">
<link rel="stylesheet" href="/style.css">
<script src="/app.js" defer></script>

注意点

  • charset は head 先頭付近に置く (UTF-8 を推奨)
  • viewport 未指定だとスマホでズーム表示になる
  • main は 1 ページに 1 つ、入れ子の制限あり
  • <header> / <footer> はセクションごとに複数使ってよい
  • SEO の観点から title と description はページごとに固有のものを設定

関連

編集
Post Share
子ページ
  1. html要素
  2. head要素
  3. body要素
  4. title要素
  5. base要素
  6. meta要素
  7. div要素
  8. span要素
  9. header要素
  10. HTML5 footer 要素の使い方（フッター・コピーライト・連絡先）
  11. main要素
  12. address要素
同階層のページ
  1. 構造
  2. セクション
  3. テキスト・フォント
  4. リスト
  5. リンク・ボタン
  6. ルビ
  7. 画像
  8. オブジェクト
  9. 動画・音声
  10. フォーム要素
  11. その他の要素
2026-05-13 08:26:34 atom 344

人気ページ

最近更新/作成されたページ