- HTML
HTMLテンプレートの基本|コピペで使える雛形とheadの書き方を1行ずつ解説
HTMLテンプレート(雛形)とは、どのページにも共通して書く「DOCTYPE宣言・html・head・body」の骨組みをまとめたものです。 いま新しくページを作るなら、<!DOCTYPE html>、<html lang="ja">、<meta charset="UTF-8">、viewport の指定、<title> の5つがそろっていれば土台として十分に機能します。
この記事では、そのままコピペできる雛形を「最小構成」「一般的なサイト用」「OGPとファビコン込みのフル構成」の3段階で用意しました。3つとも HTML の検証ツール(Nu Html Checker)でメッセージが0件になること、Chromium 141 で標準モード・UTF-8 として読み込まれることを確かめています。さらに、head の各行を「必須・推奨・任意・書かなくてよくなった」に分けた一覧表と、viewport・charset・DOCTYPE を抜いたときに表示がどう変わるかの実測結果も載せました。
HTMLテンプレートの早見表
まずは「どの雛形を使うか」と「各行の要否」を一覧で確認できます。
どの雛形を選ぶか
| 雛形 | 行数の目安 | 向いている場面 | 含まれるもの |
|---|---|---|---|
| 最小構成 | 12行 | 学習、動作確認、サンプルページ | DOCTYPE、lang、charset、viewport、title |
| 一般的なサイト用 | 約35行 | 公開するWebサイトの各ページ | 最小構成+description、canonical、ファビコン、CSS、JavaScript、header・main・footer |
| フル構成 | 約55行 | SNSで共有されるページ、ホーム画面に追加されるサイト | 一般的なサイト用+OGP、X(旧Twitter)カード、各種アイコン、theme-color など |
各行の要否
| 記述 | 区分 | ひとことで言うと |
|---|---|---|
<!DOCTYPE html> |
必須 | ブラウザを標準モードで動かす合図 |
<html lang="ja"> |
必須(lang は推奨) | 文書全体の入れ物。lang でページの言語を伝える |
<head> |
必須 | ページの設定情報を入れる場所 |
<meta charset="UTF-8"> |
必須 | 文字コードの宣言。head の先頭に書く |
<meta name="viewport" ...> |
必須に近い推奨 | スマートフォンで画面幅に合わせて表示する |
<title> |
必須 | タブと検索結果に出るページ名 |
<meta name="description" ...> |
推奨 | 検索結果の説明文の候補 |
<link rel="canonical" ...> |
推奨 | ページの正式なURLを伝える |
<link rel="icon" ...> |
推奨 | タブに出るアイコン(ファビコン) |
<link rel="stylesheet" ...> |
必要に応じて | CSSファイルの読み込み |
<script src="..." defer> |
必要に応じて | JavaScriptファイルの読み込み |
OGP(og:title など) |
共有されるページで推奨 | SNSで共有されたときのカード表示 |
<meta name="theme-color" ...> |
任意 | ブラウザのUIの色の希望を伝える |
<meta http-equiv="X-UA-Compatible" ...> |
書かなくてよい | Internet Explorer 向けの指定 |
<meta name="keywords" ...> |
書かなくてよい | Google 検索では使われない |
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
(記載例)出典:株式会社RJC「HTMLテンプレートの基本|コピペで使える雛形とheadの書き方を1行ずつ解説」
最小構成の雛形をコピペで使う
学習や動作確認には、次の12行で足ります。 ファイル名を index.html、文字コードを UTF-8 にして保存し、ブラウザで開いてください。
<!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>
Chromium 141.0.7390.37(Playwright 1.56.0 経由)で開いて、ブラウザがどう解釈したかを取り出した結果です。
min {
compatMode: 'CSS1Compat',
charset: 'UTF-8',
lang: 'ja',
title: 'ページのタイトル'
}
CSS1Compat は標準モードで動いていることを表します。この5点(標準モード・UTF-8・lang・title・viewport)がそろっていれば、あとは body の中身を書き進めるだけです。
最小構成の5つの役割
| 行 | 役割 | 書かないとどうなるか |
|---|---|---|
<!DOCTYPE html> |
標準モードに切り替える | 互換モード(BackCompat)になり、CSSの解釈が一部変わる |
<html lang="ja"> |
ページの言語を伝える | 読み上げソフトの発音や、翻訳機能の判定の手がかりが減る |
<meta charset="UTF-8"> |
文字コードを宣言する | サーバーの設定しだいで文字化けする |
<meta name="viewport" ...> |
表示領域を端末の幅に合わせる | スマートフォンで幅980pxの画面を縮小した表示になる |
<title> |
ページ名を付ける | タブにURLが出る。検証ツールではエラーになる |
「書かないとどうなるか」は、後半の「抜くと表示がどう変わるか」で実測した値を載せています。
一般的なサイト用の雛形
公開するサイトの各ページには、検索結果に関わる description・canonical と、ファビコン、CSS、JavaScript の読み込みを加えた形が使いやすいです。 body 側も header・main・footer に分けておくと、後からレイアウトを組みやすくなります。
<!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="このページの内容を80〜120字ほどで説明します。検索結果の説明文の候補になります。">
<link rel="canonical" href="https://example.com/sample/">
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="stylesheet" href="/css/style.css">
<script src="/js/main.js" defer></script>
</head>
<body>
<header>
<p>サイト名</p>
<nav aria-label="メインメニュー">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about/">このサイトについて</a></li>
</ul>
</nav>
</header>
<main>
<h1>ページの見出し</h1>
<p>ここに本文を書きます。</p>
</main>
<footer>
<p><small>© 2026 サイト名</small></p>
</footer>
</body>
</html>
ページごとに書き換える場所
雛形をコピーしたあと、次の箇所をページごとに書き換えます。
| 場所 | 書き換える内容 | 目安 |
|---|---|---|
<title> |
ページ固有の名前+サイト名 | 30字前後。ページごとに別の内容にする |
| description の content | ページの要約 | 80〜120字ほど。ページごとに別の内容にする |
| canonical の href | そのページの正式なURL | https:// から始まる絶対URLで書く |
<h1> |
ページの主題 | 1ページに1つを基本にする |
| CSS・JavaScript のパス | 実際のファイルの場所 | 使わないなら行ごと削除する |
example.com のままにしておくと canonical が別サイトを指してしまうため、公開前に自分のURLへ置き換えてください。 canonical が不要なページ(URLが1つに決まっている小さなサイトなど)では、その行を削除しても動作に影響はありません。
OGPとファビコン込みのフル構成の雛形
SNSで共有されるページや、スマートフォンのホーム画面に追加される可能性があるサイトでは、OGP と各種アイコンを加えたフル構成が役立ちます。
<!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="このページの内容を80〜120字ほどで説明します。検索結果の説明文の候補になります。">
<link rel="canonical" href="https://example.com/sample/">
<!-- OGP(SNSで共有されたときのカード表示) -->
<meta property="og:type" content="article">
<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="このページの内容を80〜120字ほどで説明します。">
<meta property="og:url" content="https://example.com/sample/">
<meta property="og:image" content="https://example.com/img/ogp.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="ページの内容を表す画像の説明">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="ja_JP">
<meta name="twitter:card" content="summary_large_image">
<!-- ファビコン -->
<link rel="icon" href="/favicon.ico" sizes="32x32">
<link rel="icon" href="/icon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/manifest.webmanifest">
<!-- 表示まわり -->
<meta name="theme-color" content="#ffffff">
<meta name="color-scheme" content="light dark">
<meta name="format-detection" content="telephone=no">
<!-- CSS と JavaScript -->
<link rel="stylesheet" href="/css/style.css">
<script src="/js/main.js" defer></script>
</head>
<body>
<header>
<p>サイト名</p>
<nav aria-label="メインメニュー">
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about/">このサイトについて</a></li>
</ul>
</nav>
</header>
<main>
<h1>ページの見出し</h1>
<p>ここに本文を書きます。</p>
</main>
<footer>
<p><small>© 2026 サイト名</small></p>
</footer>
</body>
</html>
OGPの各行の意味
OGP(Open Graph protocol)は、ページが共有されたときに表示するタイトルや画像を伝える仕組みです。仕様サイト(ogp.me)を今回開いて確認したところ、必須とされているのは og:title・og:type・og:image・og:url の4つでした。
| プロパティ | 区分 | 書く内容 |
|---|---|---|
og:title |
必須 | 共有時に出すタイトル。サイト名は含めず、ページ名だけにすると読みやすい |
og:type |
必須 | トップページは website、記事ページは article |
og:image |
必須 | 画像の絶対URL |
og:url |
必須 | ページの正式なURL(canonical と同じ値) |
og:description |
推奨 | 1〜2文の説明 |
og:site_name |
推奨 | サイト全体の名前 |
og:locale |
任意 | 言語と地域。日本語は ja_JP(省略時は en_US 扱い) |
og:image:width / og:image:height |
任意 | 画像の幅と高さ(ピクセル) |
og:image:alt |
任意 | 画像の内容を言葉で説明する文 |
twitter:card は X(旧Twitter)でのカードの形を選ぶ指定で、summary_large_image は大きな画像つきのカードを表します。こちらは今回 X の公式ページを開いて確かめてはおらず、一般に知られた仕様として載せています。画像サイズの 1200×630 も、広く使われている目安です。
ファビコンの4行の意味
| 行 | 用意するファイル | 使われる場面 |
|---|---|---|
<link rel="icon" href="/favicon.ico" sizes="32x32"> |
32×32 の ICO 形式 | ブラウザのタブ(幅広い環境向け) |
<link rel="icon" href="/icon.svg" type="image/svg+xml"> |
SVG 形式 | SVG アイコンに対応したブラウザのタブ |
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> |
180×180 の PNG | iPhone・iPad のホーム画面に追加したとき |
<link rel="manifest" href="/manifest.webmanifest"> |
アプリ名やアイコンを書いた JSON | Android のホーム画面への追加など |
manifest から参照するアイコンは、192×192 と 512×512 の PNG を用意するのが一般的です。manifest.webmanifest の中身は次の形で書けます。
{
"name": "サイト名",
"short_name": "サイト名",
"icons": [
{ "src": "/icon-192.png", "type": "image/png", "sizes": "192x192" },
{ "src": "/icon-512.png", "type": "image/png", "sizes": "512x512" }
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "browser"
}
ファビコンのサイズの組み合わせと manifest の読み込みは、今回は実機での表示確認をしていません(未実行)。小さなサイトなら favicon.ico の1行だけから始めて、必要になったら足していく進め方で十分です。
headの書き方を1行ずつ解説
フル構成の各行について、区分と書き方のポイントをまとめます。区分は次の4つです。
- 必須:書かないと検証ツールでエラーになる、または表示に直接影響するもの
- 推奨:書いておくと検索結果や使い勝手がよくなるもの
- 任意:サイトの性質に合わせて選ぶもの
- 書かなくてよい:以前は使われていたが、いまは役割を終えたもの(次の章で扱います)
| 行 | 区分 | ポイント |
|---|---|---|
<!DOCTYPE html> |
必須 | 1行目に書く。大文字・小文字はどちらでも同じ |
<html lang="ja"> |
必須 | 英語のページなら lang="en"。HTML 仕様でも lang の指定がすすめられている |
<meta charset="UTF-8"> |
必須 | head の最初に置く。仕様上はファイル先頭から1024バイト以内に入れる |
<meta name="viewport" content="width=device-width, initial-scale=1"> |
推奨(スマートフォン対応では必須に近い) | width=device-width が本体。initial-scale=1 は広く併記されている |
<title> |
必須 | 1ページに1つ。ページ固有の内容にする |
<meta name="description"> |
推奨 | 検索結果の説明文(スニペット)の候補として使われる |
<link rel="canonical"> |
推奨 | 同じ内容に複数のURLでアクセスできるとき、正式なURLを伝える |
og: で始まる meta |
推奨(共有されるページ) | name ではなく property 属性で書く |
<meta name="twitter:card"> |
任意 | カードの形を選ぶ。こちらは name 属性 |
<link rel="icon"> |
推奨 | 置かない場合もブラウザは /favicon.ico を探しにいく |
<link rel="apple-touch-icon"> |
任意 | ホーム画面に追加されたときのアイコン |
<link rel="manifest"> |
任意 | ホーム画面への追加やアプリ風の表示に対応するとき |
<meta name="theme-color"> |
任意 | 対応ブラウザでアドレスバー付近の色に反映される |
<meta name="color-scheme"> |
任意 | ライト・ダーク両方の配色に対応していることを伝える |
<meta name="format-detection" content="telephone=no"> |
任意 | 数字の並びが電話番号として自動リンクされるのを止める |
<link rel="stylesheet"> |
必要に応じて | CSS は head に置くと、描画前にスタイルが決まる |
<script src="..." defer> |
必要に応じて | defer を付けると、HTML の読み込みを止めずに実行できる |
DOCTYPE・lang・viewport をもう少し詳しく
DOCTYPE は「このページは標準の HTML です」という宣言です。HTML4 や XHTML の時代は長い文字列を書いていましたが、いまは <!DOCTYPE html> の1種類だけ覚えれば済みます。
lang は html 要素に付ける言語の指定です。Google 検索のドキュメントを今回確認したところ、Google は lang 属性ではなくページの本文から言語を判定すると書かれていました。一方で、読み上げソフトが発音を切り替えたり、ブラウザの翻訳機能が言語を判定したりする手がかりになるため、HTML 仕様では指定がすすめられています。検索順位のためではなく、読む人の環境のために書く属性と考えると位置づけがはっきりします。
viewport は、スマートフォンでページをどの幅で描画するかの指定です。MDN の viewport のページを今回確認したところ、指定がないとモバイルブラウザは 980px などの広い仮想の画面でページを描いてから縮小する、と説明されていました。width=device-width を書くと、端末の幅そのままで描画されます。同じページでは initial-scale=1 は多くの場合なくても同じ結果になるとされていますが、広く使われている書き方なので雛形では併記しています。
script の置き場所と defer
<script> を head に置くと、通常はそこで HTML の解析が止まってスクリプトの取得と実行を待ちます。defer を付けると解析と並行して取得し、解析が終わってから順番どおりに実行します。
| 書き方 | HTML の解析 | 実行のタイミング | 向いている用途 |
|---|---|---|---|
<script src="a.js"></script>(head 内) |
止まる | 取得後すぐ | 描画前に必ず動かしたい短い処理 |
<script src="a.js" defer></script> |
止まらない | 解析完了後、書いた順 | ページの要素を操作する通常のスクリプト |
<script src="a.js" async></script> |
止まらない | 取得できしだい(順不同) | 計測タグなど、他と独立した処理 |
<script type="module" src="a.js"></script> |
止まらない | defer と同じ扱い | import・export を使うスクリプト |
迷ったら head に defer 付きで書く形が扱いやすく、body の末尾に置く書き方とほぼ同じ効果が得られます。
書かなくてよくなった記述と、その理由
以前の雛形でよく見かけた記述のうち、いまは省略できるものを整理します。どれも当時は意味のあった指定で、対象の環境が役割を終えたり、ブラウザ側が標準で対応したりしたことで不要になりました。
| 記述 | 当時の目的 | いま省略できる理由 | 代わりに書くもの |
|---|---|---|---|
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
Internet Explorer を最新の描画モードで動かす | Internet Explorer 専用の指定で、現行ブラウザは読み飛ばす | なし |
<meta name="keywords" content="..."> |
検索エンジンにキーワードを伝える | Google 検索では使われず、順位に影響しない | なし(本文と title を充実させる) |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
文字コードの宣言 | 短い書き方が使える | <meta charset="UTF-8"> |
<meta http-equiv="Content-Style-Type" content="text/css"> |
既定のスタイル言語の宣言 | 現在の HTML 仕様にない値 | なし |
<meta http-equiv="Content-Script-Type" content="text/javascript"> |
既定のスクリプト言語の宣言 | 現在の HTML 仕様にない値 | なし |
<script type="text/javascript"> |
スクリプトの種類の宣言 | JavaScript が既定 | <script> |
<link rel="stylesheet" type="text/css"> |
スタイルシートの種類の宣言 | CSS が既定 | <link rel="stylesheet"> |
<link rel="shortcut icon"> |
ファビコンの指定 | shortcut は歴史的な書き方 |
<link rel="icon"> |
<link rel="apple-touch-icon-precomposed"> |
以前の iOS で光沢効果を付けないための指定 | いまの iOS は効果を付けない | <link rel="apple-touch-icon"> |
| html5shiv と条件付きコメント | IE8 以前で header などの要素を使えるようにする | 対象ブラウザが役割を終えた | なし |
<html xmlns="http://www.w3.org/1999/xhtml"> |
XHTML としての宣言 | 通常の HTML では不要 | <html lang="ja"> |
viewport の user-scalable=no |
拡大・縮小を止める | 文字を拡大して読みたい人が困る | width=device-width, initial-scale=1 |
<link rel="prev"> / <link rel="next"> |
ページ送りの関係を伝える | Google 検索では使われなくなった | なし(他の用途で必要なら残してよい) |
keywords と prev・next、lang の扱いは Google 検索セントラルの「Google がサポートしているメタタグと属性」のページを今回開いて確認しました。X-UA-Compatible、apple-touch-icon-precomposed、html5shiv の経緯は一般に知られた情報で、今回あらためて公式ページを開いてはいません。
検証ツールにかけるとどう表示されるか
上の表の記述をまとめて入れた HTML を用意し、Nu Html Checker(vnu.jar 26.10.2)にかけました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="keywords" content="HTML,テンプレート">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script type="text/javascript" src="/js/main.js"></script>
<title>ページのタイトル</title>
</head>
<body>
<h1>ページの見出し</h1>
</body>
</html>
実行結果です。
"old.html":6.3-6.88: info warning: Consider avoiding viewport values that prevent users from resizing documents.
"old.html":8.3-8.59: error: Bad value “Content-Style-Type” for attribute “http-equiv” on element “meta”.
"old.html":9.3-9.67: error: Bad value “Content-Script-Type” for attribute “http-equiv” on element “meta”.
"old.html":13.3-13.51: info warning: The “type” attribute is unnecessary for JavaScript resources.
エラーになったのは Content-Style-Type と Content-Script-Type の2行、警告は user-scalable=no と script の type 属性の2行でした。X-UA-Compatible、keywords、shortcut icon、apple-touch-icon-precomposed、link の type="text/css" にはメッセージが出ていません。つまりこれらは「書くとエラーになる」のではなく「書いても効果がないので省ける」記述です。既存のページに残っていても、急いで消す必要はありません。新しく書くときに入れなければ、head がすっきりします。
viewport・charset・DOCTYPEを抜くと表示がどう変わるか
ここからは、最小構成から1行ずつ抜いたときの変化を Chromium 141 で測った結果です。確認用のページには、見出し・1段落の文章・表を1つ置き、body の文字サイズを 20px にしました。
viewport を抜いた場合
スマートフォン相当の画面(幅390px、isMobile を有効にした Playwright のエミュレーション)で開き、描画に使われた幅を測りました。
| 測った値 | viewport あり | viewport なし |
|---|---|---|
描画に使われた幅(clientWidth) |
390px | 980px |
表示の倍率(visualViewport.scale) |
1 | 0.398 |
| 20px の文字の見かけの大きさ | 20px | 約8px(20 × 0.398) |
@media (max-width: 600px) の判定 |
当てはまる | 当てはまらない |
画面のイメージを文字で表すと、次のようになります。
【viewport あり】幅390pxで描画 【viewport なし】幅980pxで描画して約0.4倍に縮小
+----------------------+ +----------------------+
| 備品の貸し出しにつ | | 備品の貸し出しについて |
| いて | | ノートパソコンやモニターなどの… |
| | | (文字が約8px相当で読みにくい) |
| ノートパソコンやモニ | | |
| ターなどの備品は、申 | | |
| 請フォームから予約で | | |
| きます。 | | (下は余白) |
+----------------------+ +----------------------+
viewport がないと、パソコン向けの幅でレイアウトしたものを縮小して見せる形になり、文字が小さくなります。 加えて、画面幅で切り替えるメディアクエリも 980px を基準に判定されるため、スマートフォン向けに書いた CSS が適用されません。「レスポンシブ対応のCSSを書いたのに切り替わらない」ときは、最初にこの1行を確認すると早く解決できます。
charset を抜いた場合
文字コードは、HTML 内の meta だけでなく、サーバーが返す HTTP ヘッダー(Content-Type)でも伝えられます。そこでローカルの HTTP サーバーを立て、ファイルの保存形式・meta・ヘッダーの組み合わせを変えて、ブラウザが判定した文字コード(document.characterSet)と見出しの表示を調べました。
| ファイルの保存形式 | meta charset | HTTP ヘッダー | 判定された文字コード | 見出しの表示 |
|---|---|---|---|---|
| UTF-8 | UTF-8 | text/html |
UTF-8 | 備品の貸し出しについて |
| UTF-8 | なし | text/html |
windows-1252 | å‚™å“ã®è²¸ã…(文字化け) |
| UTF-8 | なし | text/html; charset=UTF-8 |
UTF-8 | 備品の貸し出しについて |
| UTF-8 | UTF-8 | text/html; charset=Shift_JIS |
Shift_JIS | 蛯吝刀縺ョ雋ク縺…(文字化け) |
| Shift_JIS | UTF-8 | text/html |
UTF-8 | ���i�݂̑��o…(文字化け) |
| Shift_JIS | なし | text/html |
Shift_JIS | 備品の貸し出しについて |
この結果からわかることは3つあります。
- meta charset がなく、ヘッダーにも charset がないと、UTF-8 のファイルでも文字化けすることがある(今回は windows-1252 と判定されました。ブラウザの言語設定や内容によって推測結果は変わります)
- HTTP ヘッダーの charset は meta より優先される(4行目。meta が UTF-8 でもヘッダーが Shift_JIS ならそちらで読まれます)
- 宣言と実際の保存形式が食い違うと文字化けする(5行目。エディタの保存形式も UTF-8 にそろえます)
<meta charset="UTF-8"> を head の先頭に書き、ファイルを UTF-8 で保存する。この2つをそろえておけば、サーバーの設定に左右されにくくなります。なお、meta charset を 1,100 文字のコメントの後ろに置いたページも試したところ、今回の Chromium では UTF-8 と判定されました。ただし HTML 仕様では先頭1024バイト以内に置くことが求められているため、head の最初に書く形が確実です。
DOCTYPE を抜いた場合
DOCTYPE を抜いた同じページをパソコン相当の画面(幅1280px、高さ720px)で開いた結果です。
| 測った値 | DOCTYPE あり | DOCTYPE なし |
|---|---|---|
document.compatMode |
CSS1Compat(標準モード) |
BackCompat(互換モード) |
| 表のセルの文字サイズ(body は 20px) | 20px | 16px |
| 段落の文字サイズ | 20px | 20px |
| body の高さ | 162px(中身の高さ) | 720px(画面の高さ) |
互換モードでは、表が body の文字サイズを引き継がない、body の高さが画面いっぱいになるなど、CSS の解釈が一部変わります。 「表の中だけ文字サイズが違う」「高さの計算が合わない」といった現象は、DOCTYPE の有無が原因になっている場合があります。開発者ツールのコンソールで document.compatMode と入力すると、どちらのモードかすぐに確かめられます。
title と lang を抜いた場合
title と lang を抜いた HTML を検証ツールにかけると、次のメッセージが出ます。
"notitle.html":5.1-5.7: error: Element “head” is missing a required instance of child element “title”.
"notitle.html":1.16-2.6: info warning: Consider adding a “lang” attribute to the “html” start tag to declare the language of this document.
title はエラー、lang は警告という扱いの違いがあります。DOCTYPE を抜いた場合のメッセージは次のとおりです。
"nodoctype.html":1.1-1.16: error: Start tag seen without seeing a doctype first. Expected “<!DOCTYPE html>”.
抜いたときの影響のまとめ
| 抜いた行 | 見た目への影響 | 検証ツールの扱い | 気づきやすさ |
|---|---|---|---|
| DOCTYPE | CSS の解釈が一部変わる | エラー | 気づきにくい(一見ふつうに表示される) |
| charset | 条件によって文字化けする | メッセージなし(ファイル単体の検証では) | サーバーに置いてから気づくことがある |
| viewport | スマートフォンで縮小表示になる | メッセージなし | パソコンだけで確認していると気づきにくい |
| title | タブにファイル名やURLが出る | エラー | 気づきやすい |
| lang | 見た目は変わらない | 警告 | 気づきにくい |
見た目でわかりにくい項目ほど、雛形に最初から入れておく価値があります。
head の中の並べ方
head 内の順番に厳密な決まりはありませんが、次の順にしておくと読み込みの面でも、後から読み返す面でも扱いやすくなります。
| 順番 | 置くもの | 理由 |
|---|---|---|
| 1 | <meta charset> |
以降の文字を正しく読むため、最初に置く |
| 2 | <meta name="viewport"> |
描画の前提になる |
| 3 | <title> |
ページの名前。上のほうにあると見つけやすい |
| 4 | description、canonical | 検索に関わる情報をまとめる |
| 5 | OGP | 共有に関わる情報をまとめる |
| 6 | ファビコン、manifest | アイコン関連をまとめる |
| 7 | theme-color など | 表示まわりの補助的な指定 |
| 8 | CSS | 描画前に読み込ませる |
| 9 | JavaScript(defer) | 最後に置く |
雛形のように種類ごとにコメントで区切っておくと、項目を足したり外したりするときに迷いません。
雛形が正しく書けているかを確かめる方法
検証ツール(Nu Html Checker)を手元で動かす
W3C の Markup Validation Service と同じ検証エンジンを、npm から入れて手元で動かせます。Java が必要です(今回は OpenJDK 21 を使いました)。
npm install vnu-jar
java -jar node_modules/vnu-jar/build/dist/vnu.jar --stdout index.html
何も表示されなければ、メッセージ0件です。この記事の3つの雛形は、いずれもメッセージ0件でした。
ブラウザがどう解釈したかを取り出す
開発者ツールのコンソールで次を入力すると、手軽に確かめられます。
({
mode: document.compatMode,
charset: document.characterSet,
lang: document.documentElement.lang,
title: document.title,
layoutWidth: document.documentElement.clientWidth,
})
自動で確かめたい場合は、Playwright を使った次のスクリプトが使えます(Node.js 22、Playwright 1.56.0 で実行)。
// node check.js ./index.html
const { chromium } = require('playwright');
const path = require('path');
(async () => {
const file = 'file://' + path.resolve(process.argv[2]);
const browser = await chromium.launch();
// スマートフォン相当(幅390px)の画面で開く
const context = await browser.newContext({
viewport: { width: 390, height: 844 },
deviceScaleFactor: 3,
isMobile: true,
});
const page = await context.newPage();
await page.goto(file);
const result = await page.evaluate(() => ({
mode: document.compatMode, // CSS1Compat なら標準モード
charset: document.characterSet, // UTF-8 になっているか
lang: document.documentElement.lang,
title: document.title,
layoutWidth: document.documentElement.clientWidth, // 390 なら viewport が効いている
}));
console.log(result);
await browser.close();
})();
フル構成の雛形に対する実行結果です。
{
mode: 'CSS1Compat',
charset: 'UTF-8',
lang: 'ja',
title: 'ページのタイトル | サイト名',
layoutWidth: 390
}
viewport を抜いたページでは、最後の行が layoutWidth: 980 になりました。
公開前のチェックリスト
| 確認すること | 確かめ方 |
|---|---|
1行目が <!DOCTYPE html> になっている |
コンソールで document.compatMode が CSS1Compat |
html に lang="ja" がある |
ソースを確認 |
<meta charset="UTF-8"> が head の先頭にある |
ソースを確認 |
| ファイルが UTF-8 で保存されている | エディタの文字コード表示を確認 |
| viewport が指定されている | スマートフォン表示で文字が小さくなっていない |
| title がページごとに別の内容になっている | 各ページのタブを確認 |
| description がページごとに別の内容になっている | ソースを確認 |
| canonical と og:url が自分のサイトのURLになっている | example.com が残っていない |
| og:image が絶対URLで、画像が実際に開ける | URLをブラウザで開く |
| 使っていない CSS・JavaScript の行が残っていない | 開発者ツールのネットワーク欄に 404 がない |
| 検証ツールのメッセージが0件 | vnu.jar またはオンラインの検証サービス |
よくある質問
Q. DOCTYPE や html タグは大文字と小文字のどちらで書きますか?
A. どちらでも同じように動きます。<!DOCTYPE html> と <!doctype html> はブラウザにとって同じ意味です。タグ名や属性名は小文字でそろえる書き方が広く使われているので、チームで決めた書き方に合わせるのがおすすめです。
Q. viewport の initial-scale=1 は必要ですか?
A. width=device-width だけでも端末の幅に合わせた表示になります。MDN でも initial-scale=1 は多くの場合なくても同じ結果になると説明されています。広く使われている書き方なので、この記事の雛形では併記しています。拡大を止める user-scalable=no や maximum-scale=1 は、文字を大きくして読みたい人のために入れない形をおすすめします。
Q. meta keywords は書いておいたほうがよいですか? A. Google 検索では使われないと公式に案内されているため、書かなくて問題ありません。書いてあっても検証ツールでエラーにはならないので、既存のページから急いで消す必要もありません。ページの内容は title・見出し・本文で伝えます。
Q. OGP は全ページに必要ですか?
A. 共有される可能性があるページに入れておくと、リンクが貼られたときの見え方が整います。全ページで個別に用意するのが大変な場合は、og:image と og:site_name をサイト共通にして、og:title・og:description・og:url をページごとに出し分ける形から始めると無理がありません。
まとめ
- 土台は5点:
<!DOCTYPE html>、lang="ja"、<meta charset="UTF-8">、viewport、<title> - 雛形は3段階:学習用の最小構成、公開サイト用、OGP とファビコン込みのフル構成から選ぶ
- viewport がないとスマートフォンで幅980pxの縮小表示になり、メディアクエリも切り替わらない(Chromium 141 で実測)
- charset は head の先頭に書き、ファイルも UTF-8 で保存する。HTTP ヘッダーの charset は meta より優先される
- DOCTYPE がないと互換モードになり、表の文字サイズなど CSS の解釈が一部変わる
- X-UA-Compatible・keywords・type 属性などは省略できる。書いてあっても多くはエラーにならないので、新しく書くときに入れなければ十分
- 検証ツールとコンソールで確かめる習慣を付けると、雛形の崩れに早く気づける
本記事の内容は、ご自由にお使いください。
ご利用の際は、出典として本ページへのリンクを記載いただけますようお願いします。
(記載例)出典:株式会社RJC「HTMLテンプレートの基本|コピペで使える雛形とheadの書き方を1行ずつ解説」
株式会社RJCでは、HTMLの雛形やheadの書き方といった基礎を仲間と学び合っています。こうした知識を共有しながら、日々技術を磨いています。
株式会社RJC ― SI事業・SES事業・AI駆動開発。RJCは一緒に成長を楽しめる会社です。
WE ARE HIRING
RJCで一緒に開発しながら、
成長を楽しみませんか?
RJCは、Web・モバイル・AIを活用した開発プロジェクトで、テックリードやPM・PMOも活躍するシステム開発会社です。会社を知る、待遇を確かめる、話を聞いてみる。気になるところ見てみてください!
- 127日年間休日
- 12時間平均残業時間
- 毎日ガチャ遊びココロも大切にする福利厚生。アマギフなどの賞品ラインナップ!
ほかにも、チケットレストラン、書籍読み放題、2年ごとの慰労報奨(休暇 or 金一封)、11期連続の黒字決算。