Creating and Running .html Files

HTMLのコードをテキストファイルに保存してブラウザで表示する方法を解説します。ファイルの実体はただのテキストファイルで、拡張子を『.html』（または『.htm』）にしたものです。

.htmlファイルの書き方

テキストエディタで HTML のコードを記述し、ファイル名を『.html』拡張子で保存します。ファイルの文字コードは『UTF-8』で保存してください。

HTML ファイルには基本的な構造（雛形）があります。DOCTYPE 宣言・html 要素・head 要素・body 要素の4つが基本的な骨格です。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>サンプルページ</title>
</head>
<body>
    <h1>見出し</h1>
    <p>段落のテキストです。</p>
    <p>こんにちは、太郎さん！</p>
</body>
</html>

タグ	説明
<!DOCTYPE html>	HTML5 の文書であることをブラウザに伝える宣言です。ファイルの先頭に記述します。
<html lang="ja">	HTML 文書の最上位要素です。『lang』属性で言語を指定します（日本語は『ja』）。
<head>	文書の設定情報（メタデータ）を記述する領域です。ブラウザには表示されません。
<meta charset="UTF-8">	文字コードを UTF-8 に指定します。日本語を正しく表示するために必要です。
<title>	ページのタイトルです。ブラウザのタブに表示されます。
<body>	ブラウザに表示されるコンテンツを記述する領域です。

コメントの書き方

.html ファイルにはコメント（メモ）を記述できます。コメントはブラウザに表示されないため、コードの説明や注意書きを残すのに使います。

書き方	説明
<!-- コメント -->	コメントです。1行でも複数行でも使えます。『<!--』から『-->』までの範囲がコメントになります。

sample_comments.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>サンプルページ</title>
</head>
<body>

    <!-- ページの見出しです。 -->
    <h1>見出し</h1>

    <!--
        以下はコンテンツ領域です。
        段落を2つ配置しています。
    -->
    <p>1つ目の段落です。</p>
    <p>2つ目の段落です。</p>

</body>
</html>

コメントはコードを一時的に無効にしたいときにも使えます。また、HTML のコメントはブラウザの開発者ツールで確認できますが、ページ上には表示されません。パスワードや個人情報をコメントに書かないよう注意してください。

実行方法（ブラウザで開く）

HTML ファイルはサーバーを必要とせず、作成した .html ファイルをブラウザで直接開くだけで表示できます。

エクスプローラー（Windows）または Finder（macOS）で .html ファイルをダブルクリックするとブラウザで開きます。または、ブラウザのアドレスバーにファイルのパスを入力することでも開けます。

コードを変更した場合は、ファイルを保存してからブラウザをリロード（F5 キーまたは Ctrl + R）すると変更が反映されます。

表示が崩れている場合やタグが効いていない場合は、ブラウザの開発者ツール（Windows は『F12』キー、macOS は『Command + Option + I』）を開くと、HTML の構造やスタイルの適用状況を詳しく確認できます。

なお、.htm という拡張子も .html と同じように使えます。現在は .html が一般的です。

おすすめのエディタについては『環境構築』を参照してください。

Overview

.html ファイルはただのテキストファイルです。テキストエディタで HTML のコードを書き、拡張子を『.html』にして保存するだけで作成できます。特別なツールは必要ありません。

HTML ファイルはブラウザで直接開いて表示できます。サーバーや特別な実行環境は不要です。基本構造（DOCTYPE・html・head・body）を覚えることから始めましょう。

コメントは『』を使います。コードを一時的に無効にしたいときにも使えます。