HTMLテンプレートジェネレーター
HTML の雛形（基本構造）を生成します。doctype・html lang・meta charset・meta viewport・title を押さえた最新の書き方で、オプションを選ぶだけで OGP や構造化データまで追加できます。処理はブラウザ内で完結します。
プリセット
基本情報
head のオプション
body の骨組み
出力
<!-- doctype: 標準モードで描画させるための宣言。これが無いとブラウザが互換モードに切り替わる -->
<!DOCTYPE html>
<!-- html lang: ページの言語。スクリーンリーダーの読み上げ・翻訳・検索エンジンの言語判定に使われる -->
<html lang="ja">
<head>
<!-- meta charset: 文字コード。文字化け防止のため head の先頭（1024 バイト以内）に置く。UTF-8 以外は使わない -->
<meta charset="utf-8">
<!-- viewport: スマホで PC 幅に縮小表示されるのを防ぎ、画面幅に合わせて表示する（レスポンシブ対応の前提） -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- title: 検索結果のタイトル・ブラウザのタブ名・ブックマーク名になる。必須で、ページごとに固有にする -->
<title>ページタイトル</title>
<!-- description: 検索結果のスニペット（説明文）の候補になる。ページごとに固有の要約を書く -->
<meta name="description" content="ページの説明文をここに書きます。">
</head>
<!-- body: 画面に表示される内容。ここから下を自分のコンテンツに置き換える -->
<body>
<!-- h1: ページの主題。1 ページに 1 つが目安 -->
<h1>ページタイトル</h1>
<p>ここに本文を入力します。</p>
</body>
</html>
HTML5 と HTML Living Standard の違い
「HTML5」は 2014 年に W3C が勧告した仕様の名前です。現在は WHATWG が「HTML Living Standard」として継続的に更新しており、ブラウザもこちらに従って実装されています。<!DOCTYPE html> で始まる文書はどれも同じ仕様で解釈されるため、HTML5 向けの雛形は、そのまま Living Standard の雛形でもあります。違いとして意識したいのは「もう書かなくてよいもの」です。IE 用の条件付きコメント、X-UA-Compatible、type="text/javascript"、空要素の末尾の/（<meta ... />）は不要で、このツールの出力にも含めていません。
HTML に最低限必要なタグ
どんなページにも必要なのは、次の 5 つです。「html 基本構造」「html ひな形」と呼ばれるものは、ここに本文を足したものです。
<!DOCTYPE html>（doctype html）
ブラウザを標準モードで描画させる宣言です。無いと互換モード（quirks mode）になり、レイアウトが崩れることがあります。大文字・小文字は区別されません。
<html lang="ja">（html lang ja）
ページの言語を示します。スクリーンリーダーが正しい発音で読み上げ、ブラウザの自動翻訳の判定にも使われ、検索エンジンにも言語が伝わります。日本語のページはja です。
<meta charset="utf-8">
文字コードの宣言です。文字化けを防ぐため、<head> の先頭（ファイル先頭から 1024 バイト以内）に置きます。UTF-8 以外を選ぶ理由は通常ありません。
<meta name="viewport" content="width=device-width, initial-scale=1">（meta viewport）
スマートフォンで、画面幅に合わせて表示させる指定です。無いと PC 向けの幅（約 980px）で描画してから縮小されるため、文字が極端に小さくなります。レスポンシブ対応の前提となるタグです。
<title>
ブラウザのタブ、ブックマーク、検索結果のタイトルになります。<head> 内で charset 以外に必須とされる唯一の要素で、ページごとに固有の内容にします。
検索結果の説明文の候補になる meta description、重複 URL を整理する canonical、SNS での表示を決める OGP は必須ではありませんが、公開するページではほぼ必ず付けます。上のオプションで追加できます。
よくある質問
- HTML5 のテンプレートと「HTML の雛形」は同じですか。
- 同じものを指します。現在の HTML は HTML Living Standard として継続的に更新されており、<!DOCTYPE html> で始まる文書はすべて同じ仕様で解釈されます。「HTML5 用」と「最新版用」を書き分ける必要はありません。
- <!DOCTYPE html> は小文字で書いても動きますか。
- 動きます。DOCTYPE のキーワードは大文字・小文字を区別しません。ただし慣習として <!DOCTYPE html> と書くことが多く、このツールもその形で出力します。
- meta viewport を付けないとどうなりますか。
- スマートフォンが PC 向けの幅（約 980px）で描画してから縮小表示するため、文字が極端に小さくなります。レスポンシブ対応の CSS も意図どおりに効きません。
- X-UA-Compatible や IE 条件付きコメントは必要ですか。
- 不要です。Internet Explorer のサポートは終了しており、このツールの出力にも含めていません。古い雛形をコピーした場合は削除して構いません。
- 生成した HTML はそのまま公開できますか。
- 骨組みとして使うものです。title・description・URL・画像・測定 ID などを自分のサイトの値に置き換え、favicon などの画像ファイルは別途用意して配置してください。