FreeHostBox Web Academy

HTML

HTMLとは？初心者向けに役割・基本構造・書き方を解説

著者: FreeHostBox Web Academy 編集部 公開日: 2026-09-01 最終更新: 2026-09-09
画面に表示されたHTMLコードのイメージ
要点: HTMLとは、Webページの構造を作るマークアップ言語です。役割、CSS・PHPとの違い、基本構造、最小コード例を初心者向けに解説します。

HTMLとは一言でいうと

HTML（HyperText Markup Language）とは、Webページの構造（見出し・段落・画像・リンク）をタグで意味付けする言語です。ブラウザはこのタグを読んで「ここが見出し、ここが本文、ここが画像」と理解して表示します。厳密には計算を行うプログラミング言語ではなく、文書に目印を付けるマークアップ言語です。

運び方はHTTPとは、置き場所はWebサーバーとは、動的処理はPHPとはが担当し、HTMLは中身の構造に専念する分業です。公開までの全体手順に戻りたい場合は、Webサイトの作り方が地図になります。私たちはWHATWG HTML StandardとMDN Web DocsのHTML基礎を参考に、初めての方にも分かりやすくまとめました。

ポイント: HTMLは「何がどこにあるか」を書く言語です。「どう見せるか」はCSS、「どう動かすか」はPHPやJavaScriptに任せます。この分離が保守性と検索エンジンへの伝わりやすさの土台になります。

全体像：書く→置く→届くの3区間で理解する

HTML学習の全体像は3区間で整理します。書く作業だけ切り離すと挫折しにくくなります。

  1. 書く（本記事）: テキストエディタで index.html を作ります。タグ6種と基本構造が分かれば1ページ書けます。
  2. 置く（公開作業）: 書いたファイルをサーバーの公開フォルダへ転送します。具体的手順はHTMLの公開方法で扱います。FTPかファイルマネージャーのいずれかを使います。
  3. 届く（配信と暗号化）: ブラウザからの要求にサーバーが応答し、HTTPSで届きます。運び方はHTTPとは、暗号化はSSLとはで扱います。

ブラウザの読み方も押さえます。ブラウザはHTMLを上から読み、見出し・段落・画像・リンクの意味を解釈して画面を組み立てます。追加で必要なCSSや画像は再びHTTPで取りに行きます。タグの書き間違いがあってもブラウザが推測で表示する場合がありますが、推測依存は崩れの元になるため、正しい対応付けを習慣にします。

  • HTMLは構造、CSSは見た目、PHPは動的処理だと説明できる
  • 書く→置く→届くの順番を言える
  • ブラウザがタグを解釈して表示すると知っている
  • 公開手順としてHTMLの公開方法へ進めると分かる

HTML・CSS・PHP・JavaScriptの役割分担

暗い画面のカラフルなコードのイメージ
HTMLの構造に見た目を足すのがCSSの役割

Webページは4者の分業でできています。入門段階ではHTMLとCSSの線引きが最重要です。

言語・技術役割担当する例書く場所
HTML構造（何がどこに）h1が見出し、pが段落、imgが画像、aがリンクindex.html 本体
CSS見た目（色・大きさ・配置）文字色、余白、スマホ対応の並び替え<style> または style.css
JavaScriptブラウザ側の動きメニュー開閉、画像切替、入力補助<script> または .js
PHPサーバー側の動的処理フォーム受付、ログイン、DB連携.php（サーバーで実行）

この分離が重要です。HTMLに色や動きを詰め込むと保守が難しくなります。たとえば見出しの色を変えたいとき、HTML側は <h1>紹介</h1> のままにし、CSS側で h1 { color: #1a1a1a; } と指定します。こうすると全ページの見出しを一括で変えられます。動的処理の入口はPHPとはとPHPの動かし方、DB連携はMySQLとはとPHPとMySQLの連携で扱います。更新を管理画面で行いたい場合はWordPressとはが選択肢になります。

補足として、HTMLの正しさは検索エンジンや読み上げソフトへの伝わりやすさにも関係します。見出しを装飾目的で h1 だらけにせず、大見出し→小見出しの順序（h1→h2→h3）を守り、画像に代替文（alt）を付ける習慣が基礎になります。

基本構造：DOCTYPE・html・head・bodyの意味

すべてのHTML文書は共通の骨格を持ちます。下記が最小の全文例です。まず丸ごとコピーして動かし、意味は後から対応付けます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="はじめての自己紹介ページです。">
  <title>はじめてのページ</title>
</head>
<body>
  <h1>はじめての見出し</h1>
  <p>はじめての段落です。HTMLは構造を書くだけです。</p>
  <a href="https://freehostbox.net/">FreeHostBoxへ</a>
</body>
</html>

各行の意味は次の通りです。

  • <!DOCTYPE html>: 「この文書はHTMLです」という宣言です。最初に1行置きます。
  • <html lang="ja">〜</html>: 全体を囲む器です。lang="ja" で日本語文書だと示します。
  • <head>〜</head>: 画面に出ない設定置き場です。文字コード、スマホ対応、説明文、タブ名を書きます。
  • <meta charset="UTF-8">: 文字コードの指定です。ファイル保存時のUTF-8と一致させます。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0">: スマホで等倍表示するための指定です。漏れると小さく縮小表示されます。
  • <title>: ブラウザのタブ名と検索結果の見出しになります。ページごとに固有の文言にします。
  • <body>〜</body>: 画面に出る本体です。見出し・段落・画像・リンクはすべてここに書きます。

覚える順番は h1・p・a・img・ul・divの6種で十分です。残りは必要になってから足します。基本ルールは3つです。タグは開く・閉じるを対応させる（<p>〜</p>）、ファイル名は半角英数・小文字にする（トップは index.html）、文字コードはUTF-8とviewportを欠かさないことです。保存時はテキストエディタの「文字コード：UTF-8」「改行：LF」を確認し、Word等の装飾付き保存を使いません。

主要タグの書き方：まず押さえる20要素

カラフルなコードのクローズアップのイメージ
タグで意味付けされたコードがページの骨組みになる

主要タグを用途別に整理します。すべて暗記する必要はなく、6種を手に馴染ませてから広げます。

タグ用途書き方の例注意点
h1〜h3見出し（大→小）<h1>店名</h1>h1は1ページ1回、順序を守る
p段落<p>紹介文です。</p>改行はbrに頼らず段落で分ける
aリンク<a href="about.html">紹介へ</a>外部は https://、内部は相対パス
img画像<img src="img/photo.jpg" alt="風景">alt必須、幅はCSSで調整
ul・ol・li箇条書き・番号付き<ul><li>項目</li></ul>並列項目は必ずliで囲む
div・section・header・footer囲み・区画<section><h2>見出し</h2></section>見出し付きの塊はsectionが目安
nav・main導線・本文の目印<nav>〜</nav>構造の伝わりやすさが上がる
table・tr・th・td表<table><tr><th>項目</th></tr></table>見出しセルはthを使う
form・input・textarea・button入力欄（静的段階では形のみ）<input type="text" name="q">送信処理はPHP側が必要
meta・title・link設定・タブ名・CSS読込<link rel="stylesheet" href="css/style.css">head内に置く

リンクと画像のパスは相対参照が基本です。同じフォルダの about.html へは about.html、下層 img/ の photo.jpg へは img/photo.jpg と書きます。http:// で始まる絶対指定を内部に使うと、HTTPS化後に混在警告の原因になります。内部は相対パスか https:// に統一し、詳しい公開時の確認はHTMLの公開方法とSSL/HTTPS設定手順で行います。

次のコードは、見出し・画像・表・リンクを組み合わせた実践例です。1ページの型としてそのまま使えます。

<header>
  <h1>カフェあおぞら</h1>
  <nav><a href="index.html">トップ</a> | <a href="menu.html">メニュー</a></nav>
</header>
<main>
  <section>
    <h2>お知らせ</h2>
    <p>9月の営業時間は10:00〜18:00です。</p>
    <img src="img/shop.jpg" alt="店舗の外観写真" width="640" height="360">
  </section>
  <section>
    <h2>メニュー（一部）</h2>
    <table border="1">
      <tr><th>品名</th><th>価格</th></tr>
      <tr><td>ブレンド</td><td>450円</td></tr>
      <tr><td>カフェラテ</td><td>520円</td></tr>
    </table>
    <ul>
      <li>豆の販売あり</li>
      <li>テイクアウト可</li>
    </ul>
  </section>
</main>
<footer><p><small>最終更新日：2026-09-09</small></p></footer>

画像の width・height は読み込み時のガタつき防止に有効ですが、表示幅の最終調整はCSS（img { max-width: 100%; height: auto; }）で行います。表の border="1" は学習時の可視化用であり、見た目の装飾はCSSへ移します。

CSSとの接続：最低限の見た目調整

HTMLが書けたら、最小のCSSで読みやすくします。HTMLファイル内の <style> に書く方法と、別ファイルに分ける方法があります。最初は前者で構いませんが、複数ページになったら後者が保守しやすくなります。

/* index.html の <style> 内または css/style.css に記述する例 */
body { font-family: system-ui, sans-serif; line-height: 1.8; margin: 0; color: #222; }
header, main, footer { max-width: 720px; margin: 0 auto; padding: 16px; }
img { max-width: 100%; height: auto; }
a { color: #0b5fff; }
table { border-collapse: collapse; width: 100%; }
th, td { border: 1px solid #ccc; padding: 8px; text-align: left; }

別ファイル化する場合は、head内に <link rel="stylesheet" href="css/style.css"> を置き、public_html/css/style.css として転送します。CSSを分けると「構造（HTML）と見た目（CSS）の分離」が体現でき、公開フォルダの整理にもなります。配置イメージはWebサーバーとはのフォルダ図でも確認できます。

よくあるエラーと解決

書いても表示が崩れる6症状を表にまとめます。原因の候補から順に確認します。

症状原因の候補対処
文字化けcharset不一致・保存形式の混在UTF-8で保存し直し、<meta charset="UTF-8"> を確認。エディタの保存形式もUTF-8にする
画像が出ないパス・大文字小文字・階層の間違い相対パスとファイル名を確認。Photo.JPG と photo.jpg は別物
リンクが404綴り・拡張子・配置の不一致about.html の有無と公開フォルダ直下かを確認。HTMLの公開方法の表と併用
スマホで崩れる・小さいviewport漏れ・固定幅の多用viewportを追加し、幅指定を % や max-width に変える
見出しの順序が滅茶苦茶h1乱用・装飾目的の使用h1は1回、h2→h3の順に直す。大きさはCSSで調整
更新が反映されないブラウザ・CDNのキャッシュ強制再読み込み、シークレットウィンドウ、転送ログ確認

文字化けの三点一致（保存形式・meta・HTTPヘッダー）はHTTPとはの Content-Type 解説と対応しています。画像404の切り分けは、開発者ツール（F12→Network）で要求URLを確認すると速くなります。要求URLとサーバー上の配置を一文字ずつ見比べます。

つまずき・誤解と実践への接続

  • 誤解1「HTML＝プログラミングで難しい」: 文書構造の目印付けであり、計算や分岐は扱いません。6種のタグで1ページ書けます。動的処理はPHPとはの担当です。
  • 誤解2「全部のタグを覚える必要がある」: 必要ありません。h1・p・a・img・ul・divから始め、表や入力欄は使う段で足します。
  • 誤解3「見た目はHTMLで作る」: 色・配置はCSSの担当です。HTMLに <font> や大量の style を埋めると直しにくくなります。
  • つまずき1「拡張子が .txt になる」: Windowsのメモ帳では保存時に種類を「すべてのファイル」にし、index.html と名付けます。index.html.txt は別物です。
  • つまずき2「画像だけ出ない」: パスと大文字小文字が大半です。img/photo.jpg の階層通りに転送されているか、HTMLの公開方法の配置図と照合します。
  • つまずき3「公開後にスマホで崩れる」: viewport漏れと固定幅（例: width: 1200px）が原因です。max-width: 100% とviewportで直します。

公開前の最小チェックリスト

  • ファイル名は半角小文字でトップは index.html になっている
  • UTF-8保存＋ <meta charset="UTF-8"> ＋viewportが入っている
  • h1は1回、h2→h3の順序が守られている
  • 画像に alt が付き、パスが相対参照になっている
  • 内部リンクに http:// 混在がなく、404がない
  • スマホ幅で横スクロールやはみ出しがない
  • 更新日・連絡先が明記されている

次に読む記事

  • HTMLの公開方法 — 書いたファイルを無料サーバーへ置く手順です。FTPとファイルマネージャーの両方式を扱います。
  • Webサイトの作り方 — 全体地図に戻り、企画から改善までの順番を確認します。
  • SSLとはとSSL/HTTPS設定手順 — 公開と同時に行うHTTPS化の概念と手順です。
  • Webサーバーとは — 置き場所と公開フォルダの考え方を補強します。
  • ドメインとは — 住所の意味と独自ドメインの考え方です。
  • PHPとは — 動的化したい場合の入口です。HTMLとの分業が明確になります。
  • WordPressとは — 更新体制を楽にしたい場合の選択肢です。

よくある質問

Q. HTMLはプログラミング言語ですか？ A. 厳密にはマークアップ言語で、文書構造の定義が役割です。条件分岐や計算などの動的処理はPHPやJavaScriptが担当します。まずは構造に専念すると学びやすくなります。

Q. HTMLだけでサイト公開できますか？ A. 可能です。紹介・ポートフォリオなどの静的サイトはHTMLと画像だけで公開できます。フォームや会員機能が必要になったらPHPとはやWordPressとはを足します。

Q. CSS・PHPとの違いは何ですか？ A. HTMLは構造、CSSは見た目、PHPはサーバー側の動的処理です。三者の分離が保守性と検索への伝わりやすさの土台になります。

Q. まず覚えるタグは何ですか？ A. h1・p・a・img・ul・divの6種です。見出し・段落・リンク・画像・箇条書き・囲みが書ければ1ページ作れます。

Q. 文字化けしたらどう直しますか？ A. エディタの保存形式と <meta charset="UTF-8"> をUTF-8に統一します。HTTP側の Content-Type との三点一致が要点であり、詳しくはHTTPとはでも扱います。

Q. 学んだ次は何をすればよいですか？ A. HTMLの公開方法で無料サーバーへ置き、SSL/HTTPS設定手順で常時HTTPS化まで行います。FreeHostBoxでは無料SSL・広告なし・FTP/ファイルマネージャーをご用意していますので、ぜひ無料プランでお試しください。

出典

  • WHATWG HTML Standard、MDN Web Docs（HTML基礎・要素リファレンス）
  • IETF RFC 9110（HTTP Semantics）
  • 無料プランの内容は料金ページをご覧ください。分からなければ私たちがサポートします。まずは無料プランで実際に触って確かめてみてください。

よくある質問

HTMLはプログラミング言語？

厳密にはマークアップ言語で、計算や条件分岐より文書構造の定義が役割です。動的処理はPHPやJavaScriptが担当します。

HTMLだけでサイト公開できる？

可能です。紹介ページやポートフォリオなど静的サイトはHTMLと画像だけで公開できます。フォームや会員機能はPHPやWordPressを足します。

CSS・PHPとの違いは？

HTMLは構造、CSSは見た目、PHPはサーバー側の動的処理です。三者の分業が保守性とSEOの土台になります。

まず覚えるタグは？

h1・p・a・img・ul・divの6種で十分です。残りは必要になってから足します。見出し・段落・リンク・画像・箇条書き・囲みの順に覚えます。

文字化けしたら？

UTF-8保存とmeta charsetの不一致が大半です。エディタの保存形式とhead内の指定をUTF-8に統一します。

HTMLを学んだ次は何をする？

HTMLの公開方法で無料サーバーへ置き、常時HTTPS化まで行います。更新を楽にしたい場合はWordPressへ進みます。

更新履歴: 公開 2026-09-01 / 最終更新 2026-09-09。技術仕様・対応バージョンは変更されるため、重要な設定は公式ドキュメントも併せて確認してください。

書いたHTMLを無料で公開する

ファイルができたらFTPかファイルマネージャーでアップロードするだけです。独自ドメインは後からで大丈夫です。

公開手順を読む 他の記事を探す