HTMLファイルの作り方｜はじめてのWebページ作成入門

HTMLファイルは、Webページを作成するための基本的なファイルです。メモ帳やテキストエディタで作成でき、ブラウザで開くとWebページとして表示されます。この記事では、HTMLファイルの構造を1つずつ丁寧に解説し、はじめてのWebページを作成する手順を紹介します。

HTMLファイルの作成手順

HTMLファイルを作成するために特別なソフトは必要ありません。Windows標準の「メモ帳」やmacOSの「テキストエディト」でも作成できます。より便利なテキストエディタとして、Visual Studio Code（VS Code）がおすすめです。

以下のコードをテキストエディタにコピーして、「index.html」という名前で保存してみましょう。拡張子を.htmlにすることが重要です。

HTML

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>はじめてのWebページ</title>
</head>
<body>
    <!-- これはコメントです。ブラウザには表示されません -->
    <p>ホームページに表示したい文字を入力します。</p>
    <p>2つ目の段落です。</p>
</body>
</html>

保存したファイルをダブルクリックするか、ブラウザにドラッグ＆ドロップすると、Webページとして表示されます。

HTMLファイルの構造を理解する

HTMLファイルは決まった構造を持っています。各部分の役割を順番に見ていきましょう。

Step 1 <!doctype html>

このファイルがHTML文書であることをブラウザに宣言します。すべてのHTMLファイルの先頭に必ず記述します。

Step 2 <html lang="ja">

HTML文書全体を囲むタグです。lang="ja"は「このページの言語は日本語です」という意味で、検索エンジンやスクリーンリーダーが言語を正しく判定するために使われます。

Step 3 head部（<head>〜</head>）

ページに直接表示されない情報（メタデータ）を記述する領域です。文字コード、ページタイトル、CSSの読み込みなどをここに書きます。

Step 4 <meta charset="utf-8">

文字コードをUTF-8に設定します。UTF-8は日本語を含む世界中の文字を扱える文字コードで、現在のWeb標準です。これを書き忘れると日本語が文字化けする原因になります。

Step 5 <title>

ページのタイトルを設定します。ブラウザのタブや検索結果に表示される重要な要素です。

Step 6 body部（<body>〜</body>）

ページに実際に表示される内容を記述する領域です。テキスト、画像、リンクなど、ユーザーに見せたいすべてのコンテンツをここに書きます。

Step 7

で囲んだ内容はコメントとして扱われ、ブラウザには表示されません。コードのメモや説明を書くのに使います。

HTMLの基本ルール

HTMLを書く上で、いくつかの基本的なルールがあります。

HTML

<!-- タグは開始タグと終了タグのペアで使う -->
<p>段落の内容</p>

<!-- コード上の改行はブラウザでは無視される -->
<p>この文章は
コード上では2行ですが
ブラウザでは1行で表示されます</p>

<!-- 改行するにはbrタグを使う -->
<p>1行目<br>2行目<br>3行目</p>

<!-- 新しい段落にする場合はpタグを使う -->
<p>最初の段落</p>
<p>次の段落（段落間に自動で余白が入る）</p>

HTMLでは、コード上で改行やスペースを入れても、ブラウザの表示には反映されません。改行したい場合は タグ、段落を分けたい場合はタグを使います。この仕組みは最初は戸惑いますが、HTMLの最も基本的なルールの1つです。

おすすめのテキストエディタ

Visual Studio Code（VS Code）: 無料で高機能。初心者からプロまで幅広く使われている
Sublime Text: 軽量で高速。シンプルな操作性
メモ帳（Windows）: インストール不要ですぐ使えるが、機能は最小限

よくある間違い

拡張子を.htmlではなく.txtのまま保存すると、ブラウザで正しく表示されません
タグの終了タグ（等）を忘れると、レイアウトが崩れる原因になります
<meta charset="utf-8">を書き忘れると日本語が文字化けします
WordやGoogleドキュメントで保存するとHTMLファイルとして正しく動作しないため、必ずテキストエディタを使用してください

まとめ

HTMLファイルはテキストエディタで作成し、拡張子を.htmlにして保存する
<!doctype html>でHTML文書であることを宣言する
head部にはメタデータ（文字コード、タイトル等）を書く
body部に実際に表示するコンテンツを書く
HTMLではコード上の改行は無視されるため、 タグやタグを使う
<meta charset="utf-8">は日本語の文字化け防止に必須