構造

▶

本稿は 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によく書く要素

注意点

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

ページ一覧

その他

構造

本ページの子ページ

HTMLの基本骨格

主な構造要素の役割

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

headによく書く要素

注意点

関連

人気ページ

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