ファイルを知る、使いこなす。
.htm

HTML

Web・開発

HTMはHTML文書に使われる短い拡張子です。保存したWebページは、同名の素材フォルダーを参照していることがあります。ブラウザーでの表示とエディタでのソース確認を使い分け、CSS・画像・リンク先も一緒に確認します。PHPなどのサーバー処理をHTMだけで再現することはできません。

主な用途
Webページの文書構造
中身の種類
テキスト
目次・よくある質問・根拠資料を見る

内容の最終確認: · 編集:Kai

開き方・操作手順

使っている環境や目的の項目を開いて、手順を確認してください。

保存したページを表示する

画像やCSSの付属フォルダーも一緒に扱います。

  1. HTMと同時に保存された素材フォルダーを、元の配置のままコピーします。
  2. 信頼できるページをブラウザーの「ファイルを開く」で表示します。
  3. 画像、装飾、リンクと本文が元ページに対応するか確認します。
内容と文字コードを調べる

表示の確認とソースの編集を使い分けます。

  1. エディターの「開く」からコピーを読み込みます。
  2. charset、画像のsrc、CSSのhrefを確認します。
  3. 文字コードを変える前に正しく読める設定を探し、別名で保存します。
ローカルで動かない機能を調べる

file URLとWebサーバー経由では条件が異なります。

  1. 開発者ツールで取得失敗のURLとコンソールのメッセージを確認します。
  2. サイトの説明でサーバーやAPI、ログインが必要か確認します。
  3. 制作元が指定する環境で再確認し、保存ページだけで再現できる範囲を区別します。

操作名・対応状況はアプリ・OS・版によって異なります。変更する前に原本を残してください。

開けないとき:症状から確認

  • 画像・装飾がない:相対パスの参照先とCSS・画像の付随フォルダーを確認します。HTMLだけのコピーでは不足することがあります。
  • 文字化け:保存時の文字コードとcharset指定を合わせます。UTF-8として誤って上書きする前に元の文字コードを確認します。
  • ローカルでは動かない:file URLでは機能や読み込みが制限される場合があります。制作手順で必要なWebサーバーを確認します。
  • リンクが元サイトへ戻る:相対リンクと絶対URL、base要素を確認します。
  • 大文字・小文字を変えて画像が消える:公開先のファイル名と参照を正確に合わせます。
  • 保存時と表示が違う:外部CSSや動的取得のデータが残っているか確認します。

HTML → PDF / 印刷用コピー

  1. 必要な画像やCSSが表示されることを確認し、ブラウザーの印刷からPDF保存を選びます。
  2. 改ページ、背景、リンク、長い表の切れをプレビューで確認します。
  3. 表示内容が欠けていないか印刷プレビューと出力PDFの両方で確認します。

PDFではフォームやJavaScriptの動作は通常再現されません。HTML原本と付随素材を残します。

保存ページで保持できるもの

HTMは文書の構造です。ページを保存しても、検索サーバー、購入処理、ログイン状態まで複製されるわけではありません。動作に必要な依存先を整理します。

確認例:page.htmがpage_files/photo.jpgを参照する場合は、両方の相対配置を保ちます。画像だけ別の場所へ移すと参照が切れます。

この手順の根拠:WHATWG · HTML Living Standard / Microsoft · HTML in Visual Studio Code

PDFへ渡す前に確認する点

印刷プレビューで長い表、背景画像、折りたたみ内の本文を確認します。閲覧用PDFと、再編集できるHTM・素材一式を別に保管します。

この手順の根拠:WHATWG · HTML Living Standard / Microsoft · HTML in Visual Studio Code

関連形式との違い

関連形式との違い
形式・方法役割確認する点
HTM / HTMLWeb文書素材とリンク
素材フォルダー画像・CSS等相対配置
PDF印刷用の表示動的機能は別

取り扱いと安全性

不明なHTMLは先にエディタで確認します。ブラウザーではスクリプトや外部通信が動く場合があるため、ログイン情報を求めるページを安易に信用しないでください。

よくある質問

HTMとHTMLで表示内容は変わる?

通常は同じ文書形式ですが、サーバー設定やリンク先のファイル名は区別されます。公開済みURLをむやみに変更しません。

HTMLをTXTへ改名するとコードが消える?

内容は変わりません。テキストとして読むだけです。

PDF化したら検索やフォームも動く?

通常、Webページの動作は引き継ぎません。

添付フォルダーを削除してよい?

画像やCSSの参照先か確認します。HTMを残しても必要な素材が消えると表示が欠けます。

クリックすると別サイトへ行くのは故障?

保存文書でも外部URLを持つことがあります。ソース内のリンク先と目的を確認します。

形式の基本情報:正式名称・MIME type・管理団体
名称
HyperText Markup Language
管理・仕様
WHATWG
MIME type
text/html

公式・一次情報

  • 標準仕様HTML Living Standard

    HTML文書・要素・外部リソースの扱いを定義する仕様です。

    WHATWG · リンク確認:
  • ソフトウェア公式HTML in Visual Studio Code

    HTMLの編集・書式・検証・プレビューの資料です。

    Microsoft · リンク確認: