ヘタリーマン
「HTMLって何？」って思ってるそこのあなた。大丈夫、HTMLはプログラミング言語じゃなくてマークアップ言語だから、プログラミング経験ゼロでも全然いける。この記事では基本のキから、コピペで使えるサンプルコードまで全部まとめたよ！

この記事の目次

  1. HTMLとは？Webページの骨組みを作る言語
  2. 基本構造のサンプルコード
  3. よく使うタグ一覧（テーブル形式）
  4. 汎用性のあるサンプルコード集
  5. HTMLを書くのに使えるアプリ
  6. 初心者がやりがちなミス

HTMLとは？Webページの骨組みを作る言語

HTML（HyperText Markup Language）は、Webページの構造を定義するための言語だよ。ブラウザ（Chrome、Safari、Edgeなど）がHTMLファイルを読み込んで、画面に文字や画像を表示してくれる仕組みなんだ。

たとえば、この記事を読んでいる今のページも、裏側ではHTMLで構造が作られているよ。見出し、段落、画像、リンク......全部HTMLのタグで囲まれた要素の集まりなんだ。

HTMLの3つの特徴

HTMLは「プログラミング言語」ではない

よく「HTMLでプログラミングを始めよう」と言われるけど、正確にはHTMLはプログラミング言語ではなくマークアップ言語。条件分岐やループ処理などの「ロジック」は書けない。でもWebページを作るなら、まずHTMLから始めるのが正解だよ。CSSやJavaScriptを学ぶ前に、HTMLの基礎を固めておくことが大事なんだ。

基本構造のサンプルコード

まずはHTMLの基本構造を見てみよう。すべてのHTMLファイルはこの形がベースになっているよ。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページのタイトル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>サイト名</h1>
    <nav>
      <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="about.html">概要</a></li>
        <li><a href="contact.html">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>セクションの見出し</h2>
      <p>ここに本文が入ります。</p>
      <img src="image.jpg" alt="画像の説明">
    </section>
  </main>

  <footer>
    <p>&copy; 2026 サイト名</p>
  </footer>
</body>
</html>

各パーツの意味

ヘタリーマン
この基本構造はテンプレートとして保存しておくと便利だよ。新しいページを作るたびにゼロから書く必要がなくなるからね。VS Codeなら!を入力してTabキーを押すだけで自動生成してくれるよ！

よく使うタグ一覧（テーブル形式）

HTMLには100以上のタグがあるけど、実際によく使うのは20個くらい。まずはこの一覧を押さえておけば、基本的なWebページは作れるよ。

タグ 用途 使用例
<h1>～<h6> 見出し（h1が最大、h6が最小） ページタイトル、セクション見出し
<p> 段落（パラグラフ） 本文のテキスト
<a> リンク 他のページや外部サイトへの移動
<img> 画像の表示 写真、アイコン、バナー
<div> ブロック要素のグループ化 レイアウトの区切り、CSS適用用
<span> インライン要素のグループ化 テキストの一部にスタイルを適用
<ul> / <ol> / <li> リスト（箇条書き / 番号付き） メニュー、手順、項目一覧
<table> 表（テーブル） データの比較、料金表
<form> 入力フォーム お問い合わせ、ログイン画面
<input> 入力欄 テキスト入力、チェックボックス
<button> ボタン 送信ボタン、アクション実行
<header> ヘッダー領域 サイトロゴ、ナビゲーション
<footer> フッター領域 著作権表示、リンク集
<nav> ナビゲーション領域 メインメニュー、パンくずリスト
<section> セクション（区切り） コンテンツのまとまり
<article> 独立した記事 ブログ記事、ニュース
ヘタリーマン
全部覚える必要はないよ。最初は<h1>、<p>、<a>、<img>、<div>の5つだけ覚えておけば十分。あとは使いながら少しずつ覚えていけばOKだよ！

汎用性のあるサンプルコード集

ここからは、実際のWebサイトでそのまま使えるサンプルコードを紹介するよ。コピペしてすぐに使えるように作ったから、自分のサイトに合わせてカスタマイズしてみてね。

1. ナビゲーションメニュー

ほぼすべてのWebサイトに必要なナビゲーションメニュー。レスポンシブ対応のシンプルなデザインだよ。

<nav style="background:#2d3748;padding:15px 20px;">
  <div style="max-width:1200px;margin:0 auto;
       display:flex;justify-content:space-between;
       align-items:center;flex-wrap:wrap;">
    <a href="/" style="color:#fff;font-size:1.3rem;
       font-weight:bold;text-decoration:none;">
      サイト名
    </a>
    <ul style="list-style:none;display:flex;
        gap:20px;margin:0;padding:0;">
      <li><a href="/" style="color:#e2e8f0;
          text-decoration:none;">ホーム</a></li>
      <li><a href="/about" style="color:#e2e8f0;
          text-decoration:none;">概要</a></li>
      <li><a href="/service" style="color:#e2e8f0;
          text-decoration:none;">サービス</a></li>
      <li><a href="/contact" style="color:#e2e8f0;
          text-decoration:none;">お問い合わせ</a></li>
    </ul>
  </div>
</nav>

2. カード型レイアウト

ブログ記事やポートフォリオの一覧表示によく使われるカードデザイン。flexboxを使って横並びにしているよ。

<div style="display:flex;flex-wrap:wrap;gap:20px;
     max-width:1200px;margin:0 auto;padding:20px;">

  <div style="flex:1;min-width:280px;background:#fff;
       border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1);
       overflow:hidden;">
    <img src="image1.jpg" alt="記事1"
         style="width:100%;height:180px;object-fit:cover;">
    <div style="padding:20px;">
      <h3 style="margin:0 0 10px;font-size:1.1rem;">
        記事タイトル1
      </h3>
      <p style="color:#666;font-size:0.9rem;line-height:1.6;">
        記事の概要テキストがここに入ります。
      </p>
      <a href="#" style="color:#3182ce;
         text-decoration:none;font-weight:bold;">
        続きを読む &rarr;
      </a>
    </div>
  </div>

  <div style="flex:1;min-width:280px;background:#fff;
       border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,0.1);
       overflow:hidden;">
    <img src="image2.jpg" alt="記事2"
         style="width:100%;height:180px;object-fit:cover;">
    <div style="padding:20px;">
      <h3 style="margin:0 0 10px;font-size:1.1rem;">
        記事タイトル2
      </h3>
      <p style="color:#666;font-size:0.9rem;line-height:1.6;">
        記事の概要テキストがここに入ります。
      </p>
      <a href="#" style="color:#3182ce;
         text-decoration:none;font-weight:bold;">
        続きを読む &rarr;
      </a>
    </div>
  </div>

</div>

3. お問い合わせフォーム

Webサイトに欠かせないお問い合わせフォーム。バリデーション属性（required、type="email"）も含めているよ。

<form action="/submit" method="POST"
      style="max-width:600px;margin:0 auto;padding:30px;
      background:#f7fafc;border-radius:12px;">

  <div style="margin-bottom:20px;">
    <label for="name"
      style="display:block;margin-bottom:5px;
      font-weight:bold;">お名前</label>
    <input type="text" id="name" name="name"
      required placeholder="山田 太郎"
      style="width:100%;padding:10px;border:1px solid #cbd5e0;
      border-radius:6px;font-size:1rem;
      box-sizing:border-box;">
  </div>

  <div style="margin-bottom:20px;">
    <label for="email"
      style="display:block;margin-bottom:5px;
      font-weight:bold;">メールアドレス</label>
    <input type="email" id="email" name="email"
      required placeholder="example@mail.com"
      style="width:100%;padding:10px;border:1px solid #cbd5e0;
      border-radius:6px;font-size:1rem;
      box-sizing:border-box;">
  </div>

  <div style="margin-bottom:20px;">
    <label for="subject"
      style="display:block;margin-bottom:5px;
      font-weight:bold;">件名</label>
    <select id="subject" name="subject"
      style="width:100%;padding:10px;border:1px solid #cbd5e0;
      border-radius:6px;font-size:1rem;
      box-sizing:border-box;">
      <option value="">選択してください</option>
      <option value="general">一般的なお問い合わせ</option>
      <option value="support">技術的なサポート</option>
      <option value="business">ビジネスの相談</option>
    </select>
  </div>

  <div style="margin-bottom:20px;">
    <label for="message"
      style="display:block;margin-bottom:5px;
      font-weight:bold;">メッセージ</label>
    <textarea id="message" name="message"
      rows="5" required
      placeholder="お問い合わせ内容をご記入ください"
      style="width:100%;padding:10px;border:1px solid #cbd5e0;
      border-radius:6px;font-size:1rem;resize:vertical;
      box-sizing:border-box;"></textarea>
  </div>

  <button type="submit"
    style="width:100%;padding:12px;background:#3182ce;
    color:#fff;border:none;border-radius:6px;
    font-size:1.1rem;cursor:pointer;">
    送信する
  </button>
</form>

4. レスポンシブ画像ギャラリー

CSS Gridを使った画像ギャラリー。画面サイズに応じて自動的にカラム数が変わるから、スマホでもPCでもきれいに表示されるよ。

<div style="display:grid;
     grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
     gap:15px;max-width:1200px;margin:0 auto;padding:20px;">

  <div style="position:relative;overflow:hidden;
       border-radius:10px;">
    <img src="photo1.jpg" alt="写真1"
         style="width:100%;height:200px;
         object-fit:cover;display:block;">
    <div style="position:absolute;bottom:0;left:0;right:0;
         padding:10px;background:linear-gradient(
         transparent, rgba(0,0,0,0.7));color:#fff;">
      <p style="margin:0;font-size:0.9rem;">
        キャプション1
      </p>
    </div>
  </div>

  <div style="position:relative;overflow:hidden;
       border-radius:10px;">
    <img src="photo2.jpg" alt="写真2"
         style="width:100%;height:200px;
         object-fit:cover;display:block;">
    <div style="position:absolute;bottom:0;left:0;right:0;
         padding:10px;background:linear-gradient(
         transparent, rgba(0,0,0,0.7));color:#fff;">
      <p style="margin:0;font-size:0.9rem;">
        キャプション2
      </p>
    </div>
  </div>

  <div style="position:relative;overflow:hidden;
       border-radius:10px;">
    <img src="photo3.jpg" alt="写真3"
         style="width:100%;height:200px;
         object-fit:cover;display:block;">
    <div style="position:absolute;bottom:0;left:0;right:0;
         padding:10px;background:linear-gradient(
         transparent, rgba(0,0,0,0.7));color:#fff;">
      <p style="margin:0;font-size:0.9rem;">
        キャプション3
      </p>
    </div>
  </div>

</div>

5. フッター

サイトの一番下に配置するフッター。著作権表示、リンク集、SNSリンクなどを含むシンプルなデザインだよ。

<footer style="background:#1a202c;color:#a0aec0;
        padding:40px 20px 20px;">
  <div style="max-width:1200px;margin:0 auto;
       display:flex;flex-wrap:wrap;gap:30px;
       justify-content:space-between;">

    <div style="flex:1;min-width:200px;">
      <h4 style="color:#fff;margin-bottom:15px;">
        サイト名
      </h4>
      <p style="font-size:0.9rem;line-height:1.8;">
        サイトの説明文がここに入ります。
      </p>
    </div>

    <div style="flex:1;min-width:200px;">
      <h4 style="color:#fff;margin-bottom:15px;">
        リンク
      </h4>
      <ul style="list-style:none;padding:0;">
        <li style="margin-bottom:8px;">
          <a href="/" style="color:#a0aec0;
          text-decoration:none;">ホーム</a>
        </li>
        <li style="margin-bottom:8px;">
          <a href="/privacy" style="color:#a0aec0;
          text-decoration:none;">プライバシーポリシー</a>
        </li>
        <li style="margin-bottom:8px;">
          <a href="/contact" style="color:#a0aec0;
          text-decoration:none;">お問い合わせ</a>
        </li>
      </ul>
    </div>

  </div>
  <div style="text-align:center;margin-top:30px;
       padding-top:20px;border-top:1px solid #2d3748;">
    <p style="font-size:0.85rem;">
      &copy; 2026 サイト名 All Rights Reserved.
    </p>
  </div>
</footer>
ヘタリーマン
上のサンプルコードはインラインスタイル（style属性）で書いてあるから、コピペしてすぐに動くよ。本格的なサイトを作るときは、CSSファイルに分離するのがベストプラクティスだけどね。まずは「動くものを作る」ことが大事！

HTMLを書くのに使えるアプリ

HTMLを書くためのエディタ（テキスト編集ソフト）は色々あるけど、おすすめを表にまとめたよ。結論から言うと、初心者にはVisual Studio Codeが一番おすすめだよ。

アプリ名 料金 特徴 おすすめ度
Visual Studio Code 無料 最強エディタ。拡張機能が豊富で、Emmetによるコード補完、ライブプレビュー、Git連携など何でもできる。Microsoft製で信頼性も高い ★★★★★
Sublime Text 無料（有料版あり） 軽量・高速で動作がサクサク。大量のファイルを扱っても重くならない。シンプルに使いたい人向け ★★★★☆
Brackets 無料 Adobe製のWeb開発特化エディタ。ライブプレビュー機能が標準搭載で、HTMLの変更がリアルタイムで確認できる ★★★☆☆
Cursor 無料（有料版あり） AI搭載エディタ。VS Codeベースで、AIがコードの自動補完や修正提案をしてくれる。AIと一緒にコーディングしたい人におすすめ ★★★★☆
CodePen 無料 ブラウザ上で即実行できるオンラインエディタ。HTML/CSS/JSをリアルタイムプレビューしながら書ける。インストール不要で手軽 ★★★★☆
JSFiddle 無料 ブラウザ上で即実行。CodePenと似ているが、よりシンプルなUI。コードの共有やテストに便利 ★★★☆☆

迷ったらVS Code一択

正直なところ、Visual Studio Code（VS Code）を入れておけば間違いない。無料で使えて、HTML/CSS/JavaScriptの開発に必要な機能がすべて揃っている。拡張機能「Live Server」を入れれば、HTMLファイルを保存するたびにブラウザが自動更新されるから、開発効率が爆上がりするよ。Emmetという機能を使えば、div.container>h1+p*3と入力してTabキーを押すだけで、タグが一気に展開される。これを知ってるかどうかで作業スピードが全然違うんだ。

初心者がやりがちなミス

HTMLを書き始めたばかりの人がやりがちなミスをまとめたよ。自分も最初はこういうミスを何度もやったから、事前に知っておくだけで時間を節約できるよ。

1. タグの閉じ忘れ

HTMLのほとんどのタグには開始タグと終了タグがあるよ。終了タグを忘れると、レイアウトが崩れたり予期しない表示になったりする。

<!-- NG：閉じタグがない -->
<div>
  <p>テキスト
</div>

<!-- OK：正しく閉じている -->
<div>
  <p>テキスト</p>
</div>

特に<div>が多いページだと、どの</div>がどの<div>に対応しているか分からなくなりがち。VS Codeを使っていれば、対応するタグをハイライトしてくれるから確認しやすいよ。

2. 全角スペースを使ってしまう

日本語入力のまま半角スペースを入れようとして、全角スペース（　）を入力してしまうミス。HTMLのコード内では全角スペースはエラーの原因になるよ。

<!-- NG：全角スペースが混入（見えにくいので要注意） -->
<p　class="text">テキスト</p>

<!-- OK：半角スペース -->
<p class="text">テキスト</p>

対策としては、エディタの設定で「全角スペースを可視化する」オプションを有効にすること。VS Codeなら拡張機能「zenkaku」を入れるだけで、全角スペースがハイライト表示されるようになるよ。

3. ファイル名に日本語を使ってしまう

HTMLファイルや画像ファイルの名前に日本語を使うと、サーバーにアップロードしたときに文字化けしたり、リンクが切れたりすることがあるよ。

<!-- NG：日本語ファイル名 -->
<img src="写真.jpg" alt="風景">
<a href="お問い合わせ.html">お問い合わせ</a>

<!-- OK：半角英数字とハイフン -->
<img src="photo.jpg" alt="風景">
<a href="contact.html">お問い合わせ</a>

ファイル名のルールは「半角英数字・ハイフン・アンダースコアのみ使う」と覚えておこう。スペースも避けて、代わりにハイフン（-）を使うのがベストだよ。

4. その他のよくあるミス

ヘタリーマン
ミスは誰でもするもの。大事なのは「なぜエラーが出たのか」を理解すること。ブラウザの開発者ツール（F12キー）を使えば、HTMLのエラー箇所がすぐに分かるよ。最初のうちはエラーが出るたびに調べて、少しずつ慣れていこう！

もっと深く学びたい人へ

HTMLの基礎が分かったら、次はCSSでデザインを整えてみよう。Webサイトの作り方全体を知りたい人はこちらの記事もチェック！

小学生でもわかるHPの始め方を見る
腎臓ソーセージ
AIで副業をするならやっぱり相棒はこいつかなと。私も使ってます。AIガンガン動くガンガン動く気持ちぃいいいMacBook Air。M5チップのおかげでChatGPTもClaudeもサクサク、ファンレスだから深夜の作業も無音。副業の相棒にマジでおすすめ。
MacBook Air M5をAmazonで見る（PR）
関連記事 小学生でもわかるHPの始め方 おすすめ記事 Claude Code（ターミナル版AI）の始め方と活用術