本稿は 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 ソースとしてブラウザに送信されるため、機密情報を書かない
• コメント内で -- を連続させない (古いパーサで誤動作)
• 条件付きコメント (<!--[if IE]> ... <![endif]-->) は 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。サーバ／フロントで必ずエスケープ

関連

• 親カテゴリ: HTML
• 子ページ: 全体構造 / DOCTYPE宣言 / コメント
• 関連: HTML 構造要素