HTMLの基本構造とは？最初のWebページの作り方を初心者向けに解説

HTMLを学び始めると、<!doctype html>、<head>、<body>など、見慣れない記号がまとまって登場します。コードをどこから書けばよいのか、書いた後にどうやってWebページとして表示するのか、迷う方も多いでしょう。

まずは「ページの設定」と「画面に出す内容」を分けて考えましょう。ひな型を使ってindex.htmlを作り、ブラウザーで表示してから見出しと文章を書き換えると、コードと表示の関係を確かめられます。

この記事では、パソコンでHTMLファイルを作り、手元のブラウザーで表示・更新するところまで進めます。サーバーの契約やインターネットへの公開は必要ありません。Web制作全体の仕事や流れを先に知りたい方は、「Web制作とは？初心者向けに仕事内容と必要なスキルを解説」も参考にしてください。

HTMLの基本構造とhead・bodyの役割

HTMLでは、<h1>のような印を「タグ」と呼びます。<h1>見出し</h1>のように、タグと内容を合わせたまとまりが「要素」です。HTML文書は、ページ全体を表すhtml要素の中に、ページの設定をまとめるhead要素と、ブラウザーに表示する内容を書くbody要素を置くのが基本です。その前には、HTML文書であることを示す<!doctype html>を書きます。

構成	主な役割	ブラウザーでの見え方
<!doctype html>	HTML文書として標準モードで扱うための宣言	ページ内には表示されない
<html lang="ja">	文書全体を囲み、主な言語を日本語に指定する	要素自体は表示されない
<head>	文字コード、画面幅、ページタイトルなどを指定する	主にタブや文書の処理へ反映される
<body>	見出し、文章、画像などページの内容を書く	ページ内に表示される

headとbodyは、どちらも必要ですが役割が異なります。タブに出るページタイトルを変えたいときはhead内のtitle要素、ページ内の見出しを変えたいときはbody内のh1要素を修正します。

headの役割：ページの設定

head要素には、文字コードを指定するmeta charset、スマートフォンなどの画面幅に合わせるmeta viewport、ブラウザーのタブに表示するtitleなどを書きます。head内の内容は、通常、本文としてそのまま表示されません。

MDNの日本語解説「ヘッド部には何が入る？ウェブページのメタデータ」では、headが文書のメタデータを含む領域であり、bodyのようにページ内へ表示される部分ではないことを確認できます。

bodyの役割：ページの内容

body要素には、見出し、段落、画像、リンク、リストなど、ページを開いた人が見る内容を書きます。最初のページでは、大見出しを表すh1要素と、段落を表すp要素があれば十分です。

最初のWebページを作る前に準備するもの

必要なのは、HTMLファイルを保存できるパソコン、テキストエディター、Webブラウザーです。テキストエディターは、コードを文字として編集・保存するアプリです。ここではVisual Studio Code（以下、VS Code）を使う場合の操作を例にします。Windowsのメモ帳など、プレーンテキスト（文字装飾を含まないテキスト）を保存できるアプリでも始められます。

WordやGoogleドキュメントのような文書作成ソフトは、文字装飾などの情報が加わるため、HTMLファイルの作成には向きません。コードを文字として保存できるテキストエディターを使ってください。

作業用フォルダーを一つ作る

デスクトップなど分かりやすい場所に、新しいフォルダーを作ります。名前はmy-first-pageのように、半角英数字の小文字とハイフンで付けるのがおすすめです。

HTML以外の画像やCSSを後で追加するときも、このフォルダーの中へまとめます。MDNの「ファイルの扱い」でも、Webサイトに関係するファイルを一つのプロジェクトフォルダーへまとめ、ファイル名は小文字で空白を避ける方法が案内されています。

index.htmlというファイルを作る

VS Codeを開き、WindowsではCtrl + N、MacではCommand + Nで新しいテキストファイルを作ります。続けてWindowsではCtrl + S、MacではCommand + Sを押し、先ほどのmy-first-pageフォルダーを保存先に選び、index.htmlという名前で保存してください。キーの組み合わせは、先に書いたキーを押しながら後のキーを押す意味です。

この段階ではファイルの中身が空でも構いません。次の章でコードを入れます。拡張子はファイルの種類を示す名前の末尾で、HTMLでは.htmlを使います。index.htmlは、サイトやフォルダーの最初のページによく使われる名前です。

VS Codeの操作キーは公式のキーボードショートカット一覧（英語）で確認できます。Macのテキストエディットを使う場合は、「フォーマット」→「標準テキストにする」を選んでからコードを入力し、.htmlで保存します。再編集時のコード表示も含め、Apple公式のHTMLファイル作成・編集手順を参照してください。

保存に使うアプリや設定によっては、ファイル名の末尾に.txtが付くことがあります。拡張子が非表示だと、その違いを見落としやすくなります。ファイル名の末尾が本当に.htmlになっているかを確認してください。

HTMLの基本構造をコードで入力する

作成したindex.htmlをテキストエディターで開き、次のコードを入力します。最初は手で一行ずつ打つより、コード全体を貼り付けてから、各部分の役割を確認する方が進めやすいでしょう。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのWebページ</title>
  </head>
  <body>
    <h1>はじめてのWebページ</h1>
    <p>HTMLで作った最初のページです。</p>
  </body>
</html>

MDNの「HTML: コンテンツの作成」にも、index.htmlを作り、文書型宣言、html、head、bodyを組み合わせる基本例があります。ここで使うコードも同じ考え方です。

doctypeとhtmlで文書全体を示す

先頭の<!doctype html>は、現在の標準的なHTML文書として扱うための宣言です。開始タグと終了タグで内容を囲む通常の要素とは異なり、終了タグはありません。

<html lang="ja">から</html>までは文書全体です。lang="ja"は、このページの主な言語が日本語であることをブラウザーや支援技術へ伝えます。

headで文字コード・画面幅・タイトルを指定する

<meta charset="UTF-8">は、この文書をUTF-8という文字コードで読み取るようブラウザーへ伝えます。文字コードは、文字とデータの対応の決まりです。宣言を書くだけでは、ファイルの保存時の文字コードは変わりません。ファイル自体もUTF-8で保存し、宣言は例のようにheadの先頭へ書いてください。

<meta name="viewport" content="width=device-width, initial-scale=1.0">は、スマートフォンなどでページを配置する領域の幅を端末に合わせ、最初の表示倍率を指定する設定です。これだけで、画像や段組みなどすべてのレイアウトが自動調整されるわけではありません。詳しい意味はMDNのviewport解説で確認できます。<title>の内容は、タブ名やブックマーク名などに使われます。

bodyに見出しと段落を書く

<h1>はページの主題を表す大見出し、<p>は一つの段落を表します。開始タグ、内容、終了タグの順に書き、<h1>...</h1>のように対応させます。

この例で行頭に入れている半角スペースは、親子関係を読みやすくする「インデント」です。ここでの字下げの幅が、そのままページの余白になるわけではありません。どの要素の中に何が入っているかを見分けやすくするため、そろえておきましょう。

ブラウザーで最初のWebページを表示する

コードを入力したら、保存したHTMLファイルをブラウザーで開きます。サーバーへアップロードしなくても、パソコン内のファイルを使って表示を確認できます。

下の図は、上の例を書き換えた後に確認する場所を整理した模式図です。タブ名も変えたい場合は、head内のtitleを書き換え、同じように保存・再読み込みしてください。

HTML制作では、コードを書く→保存する→ブラウザーで確認する→一つ直すという短いサイクルを繰り返します。表示がおかしくなったら、直前に変更した一か所から見直すと原因を追いやすくなります。

HTMLが表示されないときの確認方法

最初のページがうまく表示されないときは、コード全体を書き直す必要はありません。下の表で自分の症状に合う行を選び、最初の確認から試してください。

症状	最初に確認すること	直らない場合の次の確認
タグが文字として表示される	末尾が.htmlか	.txtの付加や、<などへの変換がないか
編集アプリで開く	ブラウザーを指定して開けるか	ブラウザーでもタグが表示される場合だけ拡張子を確認する
ページが真っ白	コードを保存したか	同じファイルのbody内に内容があるか
変更前の文章が表示される	エディターで保存したか	同じファイルを開き、再読み込みしたか
日本語が文字化けする	UTF-8で保存したか	meta charsetが正しいか
一部が意図どおり表示されない	半角の<と>を使っているか	開始タグ・終了タグ・入れ子が対応しているか

index.html.txtになっていないか確認する

ブラウザーのページ内にタグまで文字として表示される場合は、まず拡張子を確認します。Windows 11では、エクスプローラーの「表示」→「表示」→「ファイル名拡張子」をオンにして確認できます。詳しくはMicrosoftの拡張子の表示手順（新しいタブで開きます）を参照してください。編集アプリで開くだけなら、拡張子の誤りとは限りません。ファイルを開くアプリの設定による場合があるので、前の章のSTEP 2に沿ってブラウザーを指定してください。

index.html.txtなら、末尾の.txtを外してindex.htmlへ変更します。拡張子を変更する警告が表示された場合は、対象が自分で作ったファイルであることを確認してから変更してください。 正しい.htmlでもタグが表示されるなら、エディターで先頭を確認します。本文コード例の<の代わりに<が保存されていると、タグではなく記号として表示されます。コード例をプレーンテキストのファイルへ貼り直してください。

保存と再読み込みを分けて確認する

コードを直しても変化しないときは、テキストエディターで保存した後、ブラウザーを再読み込みします。別の場所にある同名ファイルを開いていないか、ブラウザーのアドレス欄に表示されるファイルの場所も確認してください。

一度に多くの行を変更すると原因を追いにくくなります。まずh1の文章だけを変え、保存と再読み込みが機能しているか試しましょう。

日本語が文字化けするときはUTF-8を確認する

ファイルの保存形式をUTF-8にし、head内に<meta charset="UTF-8">があるか確認します。meta charsetのつづりや引用符が全角になっていないかも見直してください。

タグの対応と入れ子を確認する

<h1>に対する</h1>のように、開始タグと終了タグが対応しているかを確認します。また、要素を別の要素の途中で交差させず、内側の要素から閉じます。

MDNの「基本的なHTMLの構文」では、要素、開始タグ、終了タグ、属性、文書構造、正しい入れ子を日本語で確認できます。ブラウザーはタグの誤りを補って表示することがあり、必ずエラー画面が出るわけではありません。表示の違和感があるときは、コードを増やす前に基本構文へ戻りましょう。

よくある質問

HTMLファイルは必ずindex.htmlという名前にしますか？

必須ではありません。about.htmlやcontact.htmlなど、内容に合う名前も使えます。ただし、index.htmlはフォルダーの最初のページとして扱われることが多いため、最初の練習用ファイル名として分かりやすい選択です。

Visual Studio Codeをインストールしないと作れませんか？

いいえ。HTMLをプレーンテキストとして保存できるエディターなら作れます。今後、複数ファイルを扱ったり入力補助を使ったりする場合はVisual Studio Codeなどのコードエディターが便利ですが、最初の1ページでは必須ではありません。

パソコン内で表示できればWebサイトとして公開されていますか？

いいえ。index.htmlを直接開いた状態は、自分のパソコン内だけで確認しているローカル表示です。インターネット上で他の人に見てもらうには、サーバーへファイルを置くなど、別の公開作業が必要です。

CSSを書かなくてもWebページになりますか？

はい。HTMLだけでも見出しや文章は表示されます。ただし、色、余白、配置などの見た目を整えるにはCSSを組み合わせます。まずこの記事でHTMLファイルの作成と表示を確認し、その後でCSSを追加すると役割を区別しやすくなります。

スマートフォンだけでもHTMLを作れますか？

対応する編集アプリを使えば作成できます。ただし、ファイル名や拡張子、複数行のコード、ブラウザーとの切り替えを確認しやすいため、初心者の最初の練習にはパソコンがおすすめです。

まとめ

HTMLの基本構造は、文書全体を表すhtml要素の中に、ページの設定を書くheadと、読者に見せる内容を書くbodyを置きます。先頭の<!doctype html>、文字コード、画面幅、ページタイトルまで含めたひな型を使えば、最初のページを無理なく作れます。

まずは作業用フォルダーへindex.htmlを作り、コードを保存してブラウザーで開いてください。タブ名とページ内の見出しを確認できたら、h1とpを書き換え、保存と再読み込みを試します。

今日の一歩は、短くても自分の文章が表示される1ページを完成させることです。次は、見出し・段落・リンク・画像など、body内でよく使うHTMLタグへ進みましょう。

目的別に次の記事を選ぶ

リンクや画像を足して、ページの内容を増やしたい方へ

見出し・段落に加え、リンクや画像に使うタグと属性の書き方を確認できます。

文字の色や余白など、見た目を整えたい方へ

HTMLで作った内容にCSSを適用するため、セレクタ・プロパティ・値の基本を学べます。