HTMLの基本文法｜全体構造・DOCTYPE宣言・コメントの書き方

▶

本稿は HTML の基本文法に関する記事です。HTML 文書全体の構造、DOCTYPE 宣言、コメントなど、HTML を書くうえで最初に押さえるべき基本ルールをまとめます。

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

本ページの子ページ

全体構造 — html / head / body の最小骨格
DOCTYPE宣言 — <!DOCTYPE html>
コメント —

HTML の最小骨格

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ページタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>本文</p>
</body>
</html>

HTML タグの基本ルール

タグは <タグ名>...</タグ名> で開始タグと終了タグで囲む
<img> / <br> / <meta> 等は終了タグなし (空要素)
属性は 属性名="値" の形式で、開始タグ内に書く
属性値はダブルクォート / シングルクォートのどちらでも可 (混在は避ける)
大文字小文字は区別されないが、小文字に統一するのが慣例
適切に入れ子にする (<p><strong>...</strong></p> は OK、<p><strong>...</p></strong> は NG)

DOCTYPE 宣言

HTML5 では先頭に <!DOCTYPE html> と書くだけです。これがあることで、ブラウザは互換モード (Quirks mode) ではなく標準モード (Standards mode) で表示します。書き忘れるとレイアウトがズレやすくなります。

バージョン	DOCTYPE
HTML5 (現行)	`<!DOCTYPE html>`
XHTML 1.0	長い宣言が必要 (現在は使わない)
HTML 4.01	長い宣言が必要 (現在は使わない)

head に書く主な要素

要素	役割
`<meta charset="UTF-8">`	文字コード指定 (UTF-8 推奨)
`<meta name="viewport" ...>`	レスポンシブ対応
`<meta name="description" ...>`	検索結果に出る説明文
`<title>...</title>`	タブ・検索結果のタイトル
`<link rel="stylesheet" href="...">`	外部 CSS 読込
`<link rel="canonical" href="...">`	正規 URL (SEO)
`<link rel="icon" href="...">`	favicon
`<script src="..." defer></script>`	外部 JavaScript

HTML コメント

<p>見える文章</p>

HTML ソースとしてブラウザに送信されるため、機密情報を書かない
コメント内で -- を連続させない (古いパーサで誤動作)
条件付きコメント () は IE 終了に伴い不要

HTML エンティティ

文字	エンティティ
<	`<`
>	`>`
&	`&`
"	`"`

セマンティック (意味的) なマークアップ

見出しは <h1>〜<h6> を順番に。1ページに h1 は基本1つ
段落は <p>、リストは <ul> / <ol>
ナビは <nav>、ヘッダは <header>、フッタは <footer>
意味のない箱は <div> / <span>。意味があるなら専用タグを優先
SEO とアクセシビリティの両面で恩恵がある

注意点

UTF-8 を使う際はBOM なしで保存するのが安全
レスポンシブ対応のために viewport meta は必須
属性値は必ずダブルクォートで囲む (空白を含む場合に必須)
外部 JavaScript は defer 属性を付けると、HTML 解析を止めずに読み込める
外部入力をそのまま埋め込むと XSS。サーバ／フロントで必ずエスケープ

ページ一覧

その他