HTMLファイルを作り始めるとき、「最初に何を書けばよいの？」と迷う方は多いのではないでしょうか。
HTMLには、どのページでも土台として使える基本テンプレートがあります。型を一度理解すれば、タイトルや本文を入れ替えながらさまざまなWebページを作れます。
この記事では、初心者向けにコピペできるHTMLテンプレートを紹介し、各行の意味、CSSとJavaScriptの読み込み方、ブラウザで確認する手順まで順番に解説します。
まずはHTMLファイルを用意する
作業用フォルダーを新しく作り、その中にindex.htmlというファイルを保存します。拡張子が.txtにならないように注意してください。
index.htmlは、Webサイトの最初のページによく使われるファイル名です。Visual Studio Codeなどのテキストエディターで開き、次のコードを貼り付けます。
コピペで使えるHTMLの基本テンプレート
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="ページの内容を説明する文章">
<title>ページのタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<p>サイト名</p>
</header>
<main>
<h1>ページの見出し</h1>
<p>ここに本文を書きます。</p>
</main>
<footer>
<p>© サイト名</p>
</footer>
<script src="script.js" defer></script>
</body>
</html>これが変更前の空ファイルへ追加する基本コードです。保存してindex.htmlをブラウザで開くと、「ページの見出し」と本文などが表示されます。
上の図では、html要素の中にhead要素とbody要素が入っています。さらに、ブラウザに表示する見出しや段落はbody要素の中へ書きます。
テンプレートの各行が持つ役割
DOCTYPEでHTML文書だと伝える
先頭の<!doctype html>は、このファイルを標準モードのHTML文書として扱うようブラウザへ伝える宣言です。HTML要素ではありませんが、必ずファイルの1行目に書きます。
大文字と小文字のどちらでも動作しますが、現在は短く読みやすい<!doctype html>という書き方が一般的です。
html要素でページ全体を囲む
<html>から</html>までがHTML文書全体です。開始タグと終了タグでheadとbodyを囲みます。
lang="ja"は、ページの主な言語が日本語であることを示します。検索エンジンや音声読み上げソフトが内容を正しく解釈しやすくなるため、日本語ページでは省略しないでください。
head要素にはページの設定を書く
head要素には、文字コード、画面幅、ページタイトルなど、ブラウザや検索エンジンへ伝える情報を書きます。基本的に、ここへ書いた内容はページ本文には表示されません。
| コード | 役割 |
|---|---|
<meta charset="UTF-8"> | 日本語などの文字化けを防ぐため、文字コードをUTF-8に指定します。 |
viewport | スマートフォンの画面幅に合わせてページを表示します。 |
description | ページの内容を短い文章で説明します。検索結果の説明文として使われる場合があります。 |
title | ブラウザのタブや検索結果などに表示されるページ名です。 |
link | 外部CSSファイルをHTMLへ読み込みます。 |
meta descriptionは順位を直接上げるためのタグではありません。ただし、検索する人がページ内容を判断しやすい説明にすると、検索結果から訪問してもらう助けになります。
body要素にはブラウザに表示する内容を書く
body要素には、見出し、文章、画像、リンクなど、読者がブラウザ上で見る内容を書きます。
| 要素 | 主な役割 |
|---|---|
header | ページやセクションのヘッダーを表します。 |
nav | 主要なナビゲーションリンクをまとめます。 |
main | そのページ固有の中心的な内容を表します。通常は1ページに1つです。 |
article | 記事など、それだけで内容が完結する部分を表します。 |
section | 見出しを伴う、意味のある内容のまとまりを表します。 |
h1〜h6 | 階層のある見出しを表します。 |
p | 文章の段落を表します。 |
a | 別のページや場所へのリンクを作ります。 |
img | 画像を表示します。内容を説明する代替テキストも設定します。 |
footer | 著作権表示や関連情報など、フッター部分を表します。 |
見た目だけを基準にタグを選ぶのではなく、「この部分にはどのような役割があるか」で要素を決めることが大切です。文書構造が分かりやすくなり、検索エンジンや支援技術にも内容が伝わりやすくなります。
CSSを読み込んで見た目を整える
HTMLと同じフォルダーにstyle.cssを作成します。変更前はブラウザ標準の見た目ですが、次のCSSを追加すると文字や余白が整います。
body {
margin: 0;
color: #222;
font-family: system-ui, sans-serif;
line-height: 1.7;
}
header,
main,
footer {
width: min(100% - 32px, 960px);
margin-inline: auto;
}
main {
padding-block: 48px;
}HTML側では、head要素内の<link rel="stylesheet" href="style.css">がCSSファイルを読み込んでいます。relは読み込むファイルとの関係、hrefはファイルの場所を示す属性です。
width: min(100% - 32px, 960px)により、広い画面では本文幅を960pxまでに抑え、狭い画面では左右に16pxずつ余白を残します。スマートフォンでも横にはみ出しにくい書き方です。
JavaScriptはdeferを付けて読み込む
JavaScriptを使う場合は、HTMLと同じフォルダーにscript.jsを作ります。テンプレートでは、終了bodyタグの直前に次のコードを書いています。
<script src="script.js" defer></script>JavaScriptファイルの場所を指定する属性はhrefではなくsrcです。deferを付けると、HTMLの解析を妨げずにファイルを読み込み、文書の解析後に実行できます。
deferを使う場合はhead要素内へ配置しても構いません。初心者のうちはテンプレートの位置を決め、すべてのページで統一すると迷いにくくなります。
ブラウザで変更後の表示を確認する
index.html、style.css、script.jsを同じフォルダーへ保存します。index.htmlをダブルクリックしてブラウザで開きます。- タブに「ページのタイトル」と表示され、ページ内に見出しと本文があることを確認します。
- コードを変更したら保存し、ブラウザを再読み込みします。
何も表示されない場合は、本文がbody要素の中にあるか、開始タグと終了タグの組み合わせが合っているかを確認してください。CSSが反映されない場合は、ファイル名とhref="style.css"のつづりを見直します。
Visual Studio Codeならひな形をすぐに呼び出せる
Visual Studio Codeには、HTMLを省略記法で入力できるEmmetが標準で用意されています。
index.htmlを開きます。- 半角の
!を入力します。 - 候補に表示される
!を選び、EnterキーまたはTabキーで確定します。
基本的なHTMLのひな形が自動で展開されます。ただし、ページの説明、CSSの読み込み、本文の構造などは制作するページに合わせて追加してください。
HTMLテンプレートでよくある疑問
meta keywordsは必要ですか？
基本テンプレートへmeta keywordsを入れる必要はありません。現在のGoogle検索ではランキングに使用されないため、ページのタイトルや本文を分かりやすくすることを優先します。
X-UA-Compatibleは必要ですか？
現在の主要ブラウザを対象にする新しいページでは、X-UA-Compatibleを基本テンプレートへ入れる必要はありません。古いInternet Explorer向けに使われていた指定です。
タグはすべて小文字で書く必要がありますか？
HTMLでは大文字でも小文字でも解釈されますが、小文字で統一するのが一般的です。表記がそろい、コードを読み返しやすくなります。
まとめ
HTMLの基本テンプレートは、DOCTYPE、html、head、bodyを土台に作ります。headにはページの設定を、bodyにはブラウザへ表示する内容を書きます。
まずは記事のコードをindex.htmlへコピペし、タイトルや見出し、本文を書き換えてみてください。変更前と変更後をブラウザで見比べると、それぞれの要素が持つ役割を理解しやすくなります。