HTMLとは？AIにホームページを書かせる前に知っておく最低限と、出てきたHTMLの読み方

HTMLは、Webページの見出し・段落・画像・リンクなどの「意味と構造」を書く言語です（見た目はCSS、動きはJavaScript）。 AIにページを書かせるときも、基本の構造と主なタグを知っていれば、出てきたHTMLを読んで確かめられます。 確かめるために使う主な道具は、ブラウザの開発者ツールとW3Cの検証サービスです。

HTMLとは

HTMLとは、文章や画像などに目印を付け、Webページの各部分の意味と構造をブラウザに伝える言語です。 正式名称はHyperText Markup Languageで、日本語ではハイパーテキスト・マークアップ言語と呼びます。 商品名を見出し、商品説明を段落、購入先をリンクとして示すことが、HTMLの基本的な役割です。

計算や条件分岐を記述するプログラミング言語とは役割が異なり、HTMLは内容を構造化します。 出典：MDNのHTML解説。

例えば、商品名を大きな文字にしただけでは、それが見出しであることを十分には伝えられません。 見出し用の要素を使うことで、ブラウザや読み上げソフトにも、本文との関係を伝えられます。

「HTML5」は過去の規格名であり、現代のWeb技術を広く指す呼び名としても使われています。 現在の基準は、WHATWGが継続的に更新している「HTML Living Standard」です。 W3CとWHATWGは2019年5月28日、HTMLとDOMの単一仕様を共同で発展させる合意を発表しました。 AIには「HTML5で」とだけ伝えるより、現行仕様に沿い、対象ブラウザで動くページを依頼します。

HTML・CSS・JavaScriptの違い

HTMLは内容の意味と構造、CSSは見た目、JavaScriptは処理や動的な振る舞いを主に担当します。

ただし、リンクによる移動や通常のフォーム送信など、HTML自体が備えている機能もあります。 CSSでもアニメーションを作れるため、画面が動くことだけでJavaScript使用とは判断できません。

AIへの依頼では、技術名に加え、利用者が何をしたとき、どうなるかを具体的に伝えましょう。 「購入ボタンを付ける」なら、移動先の商品ページまで示すと、見た目だけの完成を防げます。

HTMLの基本の構造

HTML文書は、文書全体を表す部分、ページの設定を書く部分、本文を書く部分に分けて読みます。

以下は、日本語の商品紹介ページを想定した、構造を確認するための最小限の学習例です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>収納用品の紹介｜サンプル商店</title>
</head>
<body>
  <h1>収納用品のご案内</h1>
  <p>商品の特長と使い方をご紹介します。</p>
</body>
</html>

titleは文書のタイトルであり、h1は本文に置く最上位の見出しなので、役割を分けて考えます。

viewportの指定だけでは、画像の幅や文字の折り返しまで、自動的にスマホ向けには整いません。 CSSによるレイアウト調整も必要であり、利用者が文字を拡大できる設定も維持しましょう。

よく使うタグとその意味

HTMLのタグは、すべて暗記するより、文章・画像・リンク・ページのまとまりに分けて覚えると読めます。

divとspanは便利ですが、それだけでは見出しやナビゲーションの意味までは伝わりません。 商品の特長という話題にはsection、その中の配置用の囲みにはdivという使い分けができます。 見た目がボタンでも、別ページへの移動ならa、送信などの操作ならbuttonが候補になります。

タグとは、要素の始まりや終わりを表す目印であり、内容を含めた全体を「要素」と呼びます。 通常は開始タグと終了タグで内容を囲みますが、imgやmetaなどには終了タグを書きません。

HTMLのclass・id・属性とは

属性は要素に情報や設定を加える仕組みで、classは分類名、idは文書内で重複させない識別子です。

例えば、class="product"と書くだけで、商品らしい色やレイアウトになるわけではありません。 その名前を対象にするCSSなどが必要であり、同じクラス名は複数の要素で利用できます。 一方、id="features"を付けた場所には、href="#features"のページ内リンクで移動できます。

問い合わせフォームでは、labelのforと入力欄のidを一致させる方法で項目名を関連付けます。 入力欄の中に薄く出るplaceholderは入力例などの補助であり、項目名の代わりにはしません。

HTML形式・HTMLファイル・HTMLメールとは

HTML形式は内容の表現方法、HTMLファイルはその記述を保存したもの、HTMLメールはHTMLで本文を表すメールです。

HTMLファイルには一般に.htmlという拡張子が付き、ブラウザで開くとページとして表示されます。 ただし、画像やCSSを別ファイルとして参照していれば、その参照先も正しい場所に必要です。

手元のファイルを開くことと、インターネット上へ公開することは、それぞれ別の作業です。 直接開いたファイルでは、外部データの取得などが動かず、確認用サーバーが必要な場合もあります。

HTMLメールは文字の装飾や画像を使えるメールですが、LPのHTMLをそのまま転用する前提にはできません。 受信するメールソフトに合わせた確認が必要であり、互換性のために要素へ直接CSSを書く方法も使われます。 AIに依頼するときは、ブラウザで見るLPなのか、受信箱で読むメールなのかを最初に指定しましょう。

AIが書いたHTMLの読み方と確かめ方

AIが書いたHTMLは、画面と要素を対応させ、行き先・文法・通信・内容の意味を順に確かめます。

開発者ツールで要素を見る手順

Chromeでは、確認したい表示を右クリックして「検証」を選ぶと、その場所の要素を調べられます。 最初は商品画像や購入ボタンなど、役割を判断しやすい場所から、次の順番で見ていきましょう。

1. 確認用ページを開き、購入ボタンなどを右クリックして「検証」を選びます。
2. Elements（要素）で選ばれた要素を見て、リンクならaのhrefを読みます。
3. 文字や画像だけが選ばれた場合は、その外側にある要素もたどります。
4. 画像ならsrcとaltを読み、表示する写真と説明が対応するか確かめます。
5. 見た目は、StylesやComputedのパネルで、適用されたCSSを確認します（表示言語によって名前が変わります）。

Elementsに出るのは現在のページ構造であり、JavaScriptによる変更を含むことがあります。 開発者ツール上の一時的な編集は、元のファイルの修正として保存されたわけではありません。 直したい内容はAIへ戻し、制作元の修正後に、再読み込みして結果を確かめましょう。

W3Cの検証サービスで文法を調べる

HTMLの文法の確認には、W3CのNu Html Checkerを利用できます。 公開URL、ファイルのアップロード、HTMLの直接入力から、確認する方法を選べます。

1. 入力前に、ファイルに秘密情報や社外へ出せない内容がないか確認します。
2. 対象のHTMLを検証し、エラーや警告と、その位置を記録します。
3. メッセージをAIに渡し、原因と修正内容を説明させます。
4. 修正したHTMLを再検証し、表示と操作も改めて確かめます。

エラーがないことは、売上につながるデザインや、フォームの到達、安全性の認定を意味しません。 W3Cも、Nu Html Checkerは合否の認証をする仕組みではないと説明しています。

外部スクリプト・フォーム・APIキー・alt・見出しを確かめる

送信先はactionだけで判断せず、JavaScriptによる送信や、ボタン側の上書きも確認します。 Networkの公式手順に沿って記録を保持し、顧客情報を使わずテスト送信します。 Headersで送信先URLと送信方法、Payloadで送信した項目と内容を確かめます。 POSTはデータの送り方であり、それだけで暗号化されるわけではないため、HTTPSも確認します。

ブラウザへ配信する情報は利用者も読めるため、秘密情報はサーバー側で管理します。 開発者ツールのSearchでは、読み込まれたファイルを対象に、apiKeyやsecretなどを検索できます。 ただし、検索で見つからないことだけを根拠として、秘密情報がないとは断定できません。 例えばStripeには公開可能なキーと秘密のキーがあるため、公式の区分を確認します。 秘密のキーを公開した場合は、削除だけで済ませず、失効・再発行と利用状況の確認を依頼します。

画像のaltは、実物を見て、その文脈で必要な情報や、リンク先の目的を説明できるか確かめます。 装飾ならalt=""とする場合があり、属性そのものを書かない状態とは意味が異なります。 見出しは文字の大きさだけで選ばず、主題から下位の話題へ進む順番で組み立てましょう。 下位へ進む際にh2からh4へ飛ぶことは避け、説明を終えてh3からh2へ戻ることとは区別します。

AIにホームページのHTMLを依頼する方法

AIには、誰に何をしてほしいページか、根拠となる事実、見た目の約束、納品条件をまとめて渡します。

例えば、「料金は渡した資料にある内容だけを使い、未設定のリンクや送信先は明記する」と依頼します。 さらに「実際に動かしていない確認は未実施と書く」と伝え、AIの説明と作業実績を区別します。

当社では、一度に完成を求めず、骨組み、文章、見た目、動き、軽さの確認という順に直しています。 まず見出しと掲載内容を確定すると、装飾ができた後で、大きく構成を変える手戻りを減らせます。

当社がAIでHTMLを作り公開するまで

当社はAIにHTMLとCSSを書かせ、人が指示と確認を行い、修正の元データと公開物を分けて管理しています。

AIのコーディングエージェントが記述を担い、人は掲載する事実や、表示・動作の確認に関わります。

公開用HTMLだけを直接直すと、次に組み立てた際に、その修正が消えてしまうことがあります。 修正は生成元へ戻し、生成物を作り直す運用にすることで、確認済みの内容を引き継ぎます。 トップページは2026年10月時点で15版目となり、前の版も戻せるように保存しています。

共通CSSに上書きされて見た目が変わった例

手元では整っていたページが、本番では文字サイズ、リストの記号、画像の余白を変えたことがあります。 原因はサイトの共通CSSであり、ページ側の指定が、既存のスタイルに上書きされていました。

対応では、ページ固有の名前を付けた範囲にCSSを限定し、他のページとの干渉を抑えました。 そのうえで、手元と本番のComputedに出る計算後のスタイルを比べ、差が解消したか確かめました。 HTMLの文法が正しくても起きるため、CMSへ入れた後の実物で確認することが欠かせません。

HTMLを公開する前後の確認手順

公開前の確認ページと公開後の本番ページを実際に開き、表示、操作、問い合わせの到達まで確かめます。

1. 生成元と公開用HTMLを保存し、元へ戻せる版を残します。
2. HTMLの検証を行い、外部通信と秘密情報の確認結果も記録します。
3. 確認用ページで、画面幅を変えながら表示とリンクを確かめます。
4. 実際のスマートフォンでも、メニューや入力欄を操作します。
5. 公開後の本番ページを開き、表示が更新されているか確認します。
6. テスト用の内容でフォームを送り、送信・到達・完了表示を確認します。

当社では、公開処理の記録が成功でも、実際のページが変わっていなかったことがありました。 また、新しいページのフォームが、別ページ用の迷惑メール対策設定で、全件迷惑扱いになった例もあります。 そのため、ボタンを押せることだけで終えず、受信先へ届くことと、完了表示を別々に確認します。

スマホ確認では、幅を狭めたPCの画面だけで、実機のブラウザまで再現できるとは判断できません。 当社では、一部の古いSafariで高さが0になり、中身が消える問題を、その版のエンジンで再現して直しました。 長いページは画面ごとに撮影し、登場の動きがある部分は1秒ほど待ってから、重なりや空白を確認します。 また、HTMLを改行なしの1行で入れて本文が空になった例では、閉じタグの後に改行を入れて対応しました。

見出しの見た目もブラウザ任せにせず、内容の階層を決めたうえで、CSSの指定を確認しましょう。 2025年5月には、特定の要素内に置いたh1を小さくする、文脈依存の既定スタイルが仕様から削除されました。 これはh1の廃止ではなく、各ブラウザへの反映時期も同じではないため、対象環境で確かめます。 出典：MDNの見出し要素の解説。

よくある質問（FAQ）

HTMLを暗記する必要はありませんが、主要なタグと確認方法を知ると、AIへの修正指示を具体化できます。

HTMLは覚えないとだめ？

すべてのタグを覚える必要はなく、見出し、段落、リンク、画像、フォームから確認すれば十分です。 特にhref、src、actionが何を指すか分かると、事業上大切な行き先を確かめやすくなります。

HTMLだけでホームページは作れる？

文章、画像、リンクを含むページは作れますが、見た目の調整には通常CSSも組み合わせます。 選択に応じた表示変更などにはJavaScriptを使い、問い合わせの受信には受け取る側の処理も必要です。

doctypeとは？

doctypeは、ブラウザが文書を標準モードで扱うために、HTML文書の先頭へ置く文書型宣言です。 現行HTMLでは<!doctype html>という簡潔な形を使い、見出しや本文を表示する要素とは区別します。

HTMLファイルの開き方は？

ブラウザの「ファイルを開く」で選ぶか、ブラウザへドラッグ＆ドロップすると表示できます。 画像やCSSが別にある場合は、ファイル同士の位置関係を保ち、必要なものをまとめて受け取ります。 直接開いて動かない機能がある場合は、確認用サーバーが必要かを制作担当者へ確認しましょう。