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

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

本ページの子ページ

• html要素 — 文書のルート要素
• head要素 — メタ情報を入れる領域
• body要素 — 実際に表示されるコンテンツの領域
• title要素 — タブ・検索結果に出るページタイトル
• base要素 — 相対 URL の基準
• meta要素 — 文字コード・description・viewport 等
• div要素 — 汎用ブロック
• span要素 — 汎用インライン
• header要素 — ヘッダ領域
• footer要素 — フッタ領域
• main要素 — メインコンテンツ
• address要素 — 連絡先情報

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 はページごとに固有のものを設定

関連

• 親カテゴリ: HTML 要素一覧
• 子ページ: html要素 / head要素 / body要素 / title要素 / base要素 / meta要素 / div要素 / span要素 / header要素 / footer要素 / main要素 / address要素