HTMLをゼロから学ぶプログラミング入門

headとbodyを含むHTML文書の木構造図 — HTML文書の入れ子構造：htmlはheadとbodyを含む

ニュースサイト、ショップ、個人のブログなど、これまでに開いたWebページはすべて、HTMLで書かれた基本的な構造を持っています。HTMLは計算やループを行うプログラミング言語ではなく、ページの各部分が何であるかをブラウザに伝えるマークアップ言語です。見出し、段落、画像、リンク、フォームなどを示します。このチュートリアルはゼロから始めて、実際に動く個人のプロフィールページを作るところまで進みます。

HTMLとは

HTMLはHyperText Markup Languageの略です。「ハイパーテキスト」はリンクでつながれたテキストを、「マークアップ」は内容の意味を示すタグを指します。ブラウザはHTMLファイルを上から順に読み、タグをページの構造として解釈して、ユーザーに表示します。

HTMLは色や文字サイズを直接指定しません。それはCSSの役割です。ページを対話的にするのはJavaScriptの役割です。3つは家にたとえると、骨組み（HTML）、塗装や内装（CSS）、動かすための配線（JavaScript）のように連携します。

必要なツール

HTMLを書くには、2つのツールだけで十分です。

1. **テキストエディタ：** Windowsのメモ帳でも使えますが、無料で使えるVS Codeがおすすめです。タグを色分けし、コードの自動補完もしてくれます。

2. **Webブラウザ：** Chrome、Edge、Firefoxなどで、作成したファイルを開いて結果を確認します。

`my-website` という名前のフォルダを作り、その中に `index.html` というファイルを作成してください。`index.html` はブラウザやWebサーバーがホームページとして認識する標準的な名前です。

最初のWebページ

`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>これは私が初めて自分で書いたWebページです。</p>
</body>
</html>

構造を一つずつ見てみましょう。

`<!DOCTYPE html>` は、このファイルがHTML5の文書であることをブラウザに伝えます。必ず一行目に書きます。
`<html lang="ja">` はページ全体の大枠です。`lang` の値は、ページの主要な言語をブラウザや検索エンジン、スクリーンリーダーに伝えます。
`<head>` には、文字コード、ページのタイトル、モバイル向けの設定など、訪問者が直接見ない情報を入れます。
`<meta charset="UTF-8">` は文字コードをUTF-8と宣言し、日本語を含むすべての言語を正しく表示できるようにします。
`<title>` はブラウザのタブに表示される名前です。
`<body>` には、訪問者が画面で見るすべての内容を入れます。

ファイルを保存し、ダブルクリックしてブラウザで開きます。書いた見出しと段落が表示されるはずです。

すべての例の保存と実行の方法

1. デスクトップに `my-website` という名前のフォルダを作ります。

2. その中に `index.html` という新しいファイルを作ります。各例で使うファイル名は、下の表に書いてあります。

3. 例のコードをコピーし、ファイルの中身と置き換えて貼り付けます。

4. UTF-8で保存します。メモ帳なら「名前を付けて保存」で文字コードをUTF-8に設定します。拡張子が `.html.txt` になっていないかも確認してください。

5. ファイルをダブルクリックしてブラウザで開きます。保存するたびにF5キーで再読み込みしても構いません。

6. VS Codeを使う場合は Live Server を入れておくと、保存するたびにページが自動で更新されます。

画像を使う例（ギャラリーや店舗の例など）では、画像ファイルをHTMLと同じフォルダに置き、ファイル名を `src` の値と完全に一致させる必要があります。一致しない場合、ブラウザは壊れた画像の枠と `alt` の文字を表示します。

テキストと見出し

HTMLには `<h1>` から `<h6>` までの見出しタグがあります。`<h1>` は最も重要な見出しで、通常は1ページに1回だけ使います。`<h2>` から `<h6>` は、順番に小見出しとして使います。

<h1>私のストーリー</h1>
<h2>子ども時代</h2>
<p>私は東京で生まれ、幼いころから本を読むのが大好きでした。</p>
<p>私は <strong>プログラミング</strong> と <em>写真撮影</em> が好きです。</p>
<p>この行は<br>改行されます。</p>

`<p>` は段落です。`<strong>` は太字にして、重要であることを意味します。`<em>` は斜体にして、強調を意味します。`<br>` は段落を変えずに改行します。閉じタグはありません。

リンクと画像

`<a>` タグはリンクを作ります。`href` の値がリンク先です。

<a href="https://www.example.com">サンプルサイトを見る</a>
<a href="about.html">自己紹介ページへ</a>

最初のリンクは外部サイトへ、2つ目のリンクは同じフォルダにある `about.html` へ移動します。

`<img>` タグは画像を表示します。`src` で画像の場所を指定する必要があり、画像を見られない人や画像が読み込めなかった場合のために、`alt` で内容の説明を必ず書くべきです。

<img src="photo.jpg" alt="朝焼けの風景写真" width="400">

<h2>学びたい言語</h2>
<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

<h2>インストールの手順</h2>
<ol>
  <li>プログラムをダウンロードする</li>
  <li>手順に従ってインストールする</li>
  <li>プログラムを開いて使い始める</li>
</ol>

表

表は `<table>` タグで作ります。各行は `<tr>`、見出しのセルは `<th>`、データのセルは `<td>` です。

<table>
  <tr>
    <th>教科</th>
    <th>点数</th>
  </tr>
  <tr>
    <td>数学</td>
    <td>85</td>
  </tr>
  <tr>
    <td>英語</td>
    <td>78</td>
  </tr>
</table>

表は本当に表形式のデータにだけ使います。ページ全体のレイアウトに使うと、スクリーンリーダーで読みにくくなります。

フォーム

フォームは、訪問者の入力内容をサーバーに送るための仕組みです。たとえば問い合わせフォームには、名前、メールアドレス、メッセージの入力欄があります。

<form action="/send" method="post">
  <label for="name">名前：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">メール：</label>
  <input type="email" id="email" name="email" required>

  <label for="message">メッセージ：</label>
  <textarea id="message" name="message" rows="4"></textarea>

  <button type="submit">送信</button>
</form>

`<label>` は `for` の値で入力欄と結び付けます。この値は入力欄の `id` と一致させる必要があります。これにより、ラベルをクリックすると入力欄にフォーカスが移り、スクリーンリーダーも各欄の役割を読み上げられます。`required` は空欄のままの送信を防ぎ、`type="email"` はブラウザにメールアドレスの形式を確認させます。

意味を持つタグ

意味を特に持たない `<div>` のほかに、HTML5には、ページの構造を明確に示すタグがあります。

`<header>` ページや記事の先頭部分
`<nav>` ナビゲーションメニュー
`<main>` ページの主要な内容。1ページに1つ使います
`<section>` 見出しを持つ、まとまったひとつの内容
`<article>` 記事や投稿など、単独で読める内容
`<footer>` ページや記事の末尾部分

<body>
  <header>
    <h1>私のWebサイト</h1>
    <nav>
      <a href="index.html">ホーム</a>
      <a href="about.html">自己紹介</a>
    </nav>
  </header>
  <main>
    <article>
      <h2>最初の記事</h2>
      <p>記事の内容です。</p>
    </article>
  </main>
  <footer>
    <p>著作権 2026</p>
  </footer>
</body>

意味を持つタグは、検索エンジンがページを理解するのに役立ち、スクリーンリーダーを使う人が必要な部分へすばやく移動できるようにします。

属性：idとclass

属性は、タグの中に書く追加情報です。すでに見た `href`、`src`、`alt` などがそうです。よく使われる2つは `id` と `class` です。

`id` はページ内で重複させてはいけません。1つの要素を特定するために使います。
`class` は複数の要素で共有できます。CSSで装飾するためにグループ化するのに使います。

<p id="intro" class="highlight">この段落は識別子を持ち、highlightグループに属しています。</p>
<p class="highlight">この段落も同じグループに属しています。</p>

CSSとJavaScriptをつなぐ

見た目を整えるには、スタイルをCSSファイルに分け、`<head>` 内で `<link>` タグを使って読み込みます。

<link rel="stylesheet" href="style.css">

`style.css` には次のような内容を書きます。

body {
  font-family: sans-serif;
  background-color: #f5f7fb;
  color: #1a1a1a;
}
h1 {
  color: #2255aa;
}

JavaScriptは `<script>` タグで読み込みます。ページの内容を先に読み込ませるため、`</body>` の直前に置くのが一般的です。

<script src="main.js"></script>

小さなプロジェクト：個人プロフィールページ

すべてを組み合わせて、個人のプロフィールページを作ってみましょう。

<!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>
      <a href="#about">自己紹介</a>
      <a href="#skills">スキル</a>
      <a href="#contact">連絡先</a>
    </nav>
  </header>

  <main>
    <section id="about">
      <h2>自己紹介</h2>
      <img src="me.jpg" alt="山田太郎の写真" width="160">
      <p>私は毎日新しいことを学んでいるWeb開発者です。</p>
    </section>

    <section id="skills">
      <h2>スキル</h2>
      <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
      </ul>
    </section>

    <section id="contact">
      <h2>連絡先</h2>
      <p>メール：<a href="mailto:[email protected]">[email protected]</a></p>
    </section>
  </main>

  <footer>
    <p>HTMLで作成</p>
  </footer>
</body>
</html>

リンク `#about` は、同じページ内の `id="about"` を持つ要素を指すため、メニューをクリックするとその部分へ直接スクロールします。`mailto:` のリンクは、訪問者のメールソフトを開きます。

実例：コーヒーショップのメニューを一歩ずつ作る

架空のコーヒーショップのメニューページを作って、複数のタグを組み合わせる練習をしましょう。まずは基本の骨組みから始めます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ガーデンコーヒー メニュー</title>
</head>
<body>
  <h1>ガーデンコーヒー メニュー</h1>
  <p>毎日営業 8:00〜18:00</p>
</body>
</html>

一行ずつ見ていきましょう。

`<h1>` は店名で、ページの主要な見出しはこの1つだけです。
`<p>` は営業時間などの通常の文章で、特別な強調は不要です。

次にドリンクのセクションを追加します。小見出しには `<h2>`、リストには `<ul>` と `<li>` を使います。

<h2>ホットコーヒー</h2>
<ul>
  <li>エスプレッソ 450円</li>
  <li>カフェラテ 550円</li>
  <li>カプチーノ 550円</li>
</ul>

<h2>冷たいドリンク</h2>
<ul>
  <li>アイスアメリカーノ 600円</li>
  <li>抹茶ラテ 500円</li>
</ul>

価格を比べやすいように表にまとめます。前に説明した `<table>`、`<th>`、`<td>` を使います。

<table>
  <tr>
    <th>ドリンク</th>
    <th>サイズ</th>
    <th>価格</th>
  </tr>
  <tr>
    <td>カフェラテ</td>
    <td>S</td>
    <td>550円</td>
  </tr>
  <tr>
    <td>カフェラテ</td>
    <td>L</td>
    <td>650円</td>
  </tr>
</table>

最後に店の写真と、ホームへ戻るリンクを追加して、実際に使えるページにします。

<img src="shop.jpg" alt="木陰に包まれたガーデンコーヒーの店構え" width="600">
<p><a href="index.html">ホームに戻る</a></p>

まとめたファイルを保存して、ブラウザで開いてみましょう。見出し、リスト、表、画像のあるメニューが表示されます。商品名や価格を変えてブラウザを再読み込みすると、すぐに結果が反映されます。この「編集して保存し、再読み込みする」という流れが、Webページを作るときに毎日使う基本の作業です。

初心者がよくつまずくミスと対処法

**閉じタグを忘れる：** `</p>` のない `<p>文章` と書くと、ページが崩れることがあります。開いたタグすべてに対応する閉じタグがあるか確認してください。
**段落の間隔に `<br>` を使う：** 段落を分けるには、`<p>` を別々に使います。`<br>` を繰り返しても代わりにはなりません。
**画像に `alt` を付けない：** スクリーンリーダーを使う人には、画像の内容が伝わりません。短い説明を必ず付けましょう。
**`id` を重複させる：** 1つのページ内で `id` は一意でなければなりません。重複すると、リンクやCSSが正しく動かなくなることがあります。
**ファイルパスが間違っている：** ファイル名とフォルダ名を一文字単位で一致させてください。多くのサーバーは大文字と小文字を区別します。
**変更が反映されない：** ファイルを保存してから再読み込みするか、Ctrl+F5で完全に読み直してください。

問題が起きたら、ブラウザの開発者ツール（F12キーを押して「Console」タブを選択）を開きましょう。エラーメッセージが問題の行を指すことが多く、修正がずっと早くなります。

知っておきたいその他のタグとコマンド

基本のタグ以外にも、ページを豊かにするタグが数多くあります。よく使われるものを短い例とともに紹介します。

強調と文中の意味

<p>以前の価格 <s>100円</s>、今だけ <mark>80円</mark></p>
<p>水は H<sub>2</sub>O、E = mc<sup>2</sup></p>
<p>注意：<small>税別価格です</small></p>
<p><abbr title="HyperText Markup Language">HTML</abbr> の正式名称は？</p>
<p>会議は <time datetime="2026-10-30">10月30日</time> です</p>

`<mark>` は文字をハイライトし、`<sub>` と `<sup>` は下付きと上付きを作ります。`<abbr>` はマウスを乗せると正式名称を表示し、`<time>` は人にも機械にも読める日時を示します。

引用とコード

<blockquote cite="https://example.com/source">
  学ぶことは、繰り返し実践することです。
</blockquote>
<p>コマンドの例：<code>console.log("hi")</code></p>
<pre>
  この行は入力したとおりの
  空白と改行を保ちます。
</pre>

`<blockquote>` は他からの引用を示し、`<code>` は文中にコマンドを表示し、`<pre>` は空白と改行をそのまま保ちます。

コンテンツのまとめ方

<figure>
  <img src="chart.png" alt="月別売上のグラフ" width="500">
  <figcaption>2026年の月別売上</figcaption>
</figure>

<details>
  <summary>登録方法を見る</summary>
  <p>名前とメールアドレスを入力して確定してください。</p>
</details>

<dl>
  <dt>HTML</dt>
  <dd>Webページの構造を記述する言語です。</dd>
  <dt>CSS</dt>
  <dd>Webページの見た目を整える言語です。</dd>
</dl>

`<figure>` と `<figcaption>` は画像と説明文を組にします。`<details>` は訪問者がクリックするまで内容を隠し、`<dl>` は用語と説明を対にして並べます。

動画・音声・埋め込みフレーム

<video controls width="480" poster="cover.jpg">
  <source src="clip.mp4" type="video/mp4">
  お使いのブラウザは動画に対応していません。
</video>

<audio controls>
  <source src="song.mp3" type="audio/mpeg">
</audio>

<iframe src="https://www.example.com/map" width="400" height="300" title="店舗の地図"></iframe>

`controls` は再生ボタンを表示します。`<iframe>` は別のページを自分のページに埋め込みます。スクリーンリーダーの利用者がフレームの内容を把握できるように、必ず `title` を付けてください。

フォームの追加コントロール

<form>
  <fieldset>
    <legend>受け取るニュースの方法</legend>
    <input type="checkbox" id="mail" name="channel" value="mail">
    <label for="mail">メール</label>
    <input type="radio" id="sms" name="plan" value="sms">
    <label for="sms">SMS</label>
  </fieldset>

  <label for="city">都市：</label>
  <select id="city" name="city">
    <option value="tokyo">東京</option>
    <option value="osaka">大阪</option>
  </select>

  <label for="visit">来店日：</label>
  <input type="date" id="visit" name="visit">

  <label for="qty">数量：</label>
  <input type="number" id="qty" name="qty" min="1" max="10" value="1">
</form>

チェックボックスは複数選択を、同じ `name` を持つラジオボタンは1つだけの選択を許します。`<select>` はドロップダウンメニューを作り、`type="date"` や `type="number"` は、データの種類に合った入力欄をブラウザに表示させます。

区切り線と進捗表示

<hr>
<p>ダウンロードは70%完了しました</p>
<progress value="70" max="100"></progress>
<meter value="0.6" min="0" max="1">60%</meter>

`<hr>` は飾りの線ではなく、話題の区切りを示します。`<progress>` は進行中の作業を、`<meter>` は範囲内で測定された値を表示します。

HTMLの実例10選

実際のサイトでよく見るパターンを10個集めました。どれもそのままコピーして出発点にできます。なぜそう書くのかも説明します。

例1：旅行記

<article>
  <h2>チェンマイ 3日2泊</h2>
  <p>年明けの涼しい時期に行きました。</p>
  <ol>
    <li>1日目：ドイステープ寺院</li>
    <li>2日目：ワロロット市場</li>
    <li>3日目：ドイインタノン</li>
  </ol>
</article>

旅行記は単独で読める内容なので `<article>` を使います。日程には順序の意味があるため `<ol>` を使います。`<ul>` にするとその順序の意味が失われます。

例2：検証付きの会員登録フォーム

<form action="/register" method="post">
  <label for="username">ユーザー名（英字4〜12文字）：</label>
  <input type="text" id="username" name="username"
         pattern="[A-Za-z]{4,12}" required>

  <label for="password">パスワード（8文字以上）：</label>
  <input type="password" id="password" name="password"
         minlength="8" required>

  <label for="birth">生年月日：</label>
  <input type="date" id="birth" name="birth">

  <button type="submit">登録する</button>
</form>

`pattern` は正規表現で入力を検査し、`minlength` は最小文字数を決め、`required` は必須入力を指定します。ブラウザは送信前に修正を促すので、サーバーの負担が減ります。ただし、ブラウザの検査は回避できるため、サーバー側でも必ず検査しなければなりません。

例3：写真ギャラリー

<section>
  <h2>旅の写真</h2>
  <figure>
    <img src="doi1.jpg" alt="ドイインタノンの雲海" width="300">
    <figcaption>朝の雲海</figcaption>
  </figure>
  <figure>
    <img src="temple.jpg" alt="高い木々に囲まれた古い寺院" width="300">
    <figcaption>旧市街のお寺</figcaption>
  </figure>
</section>

各画像は `<figure>` と `<figcaption>` で囲み、説明文が画像に確実に結び付くようにします。`alt` は単に「写真」と書くのではなく、画像に写っているものを説明します。

例4：入れ子のナビゲーションメニュー

<nav>
  <ul>
    <li><a href="index.html">ホーム</a></li>
    <li>
      <a href="shop.html">ショップ</a>
      <ul>
        <li><a href="shop-shirts.html">シャツ</a></li>
        <li><a href="shop-bags.html">バッグ</a></li>
      </ul>
    </li>
    <li><a href="contact.html">お問い合わせ</a></li>
  </ul>
</nav>

構造に実際の階層があるので、メニューは入れ子のリストにします。スクリーンリーダーは項目数と階層の深さを利用者に伝えられます。

例5：よくある質問

<h2>よくある質問</h2>
<details>
  <summary>注文した商品はいつ届きますか？</summary>
  <p>地域によりますが、1〜3営業日でお届けします。</p>
</details>
<details>
  <summary>返品はできますか？</summary>
  <p>未使用であれば7日以内に返品できます。</p>
</details>

`<details>` はページを短くまとめられ、JavaScriptなしで動き、誰にとっても扱いやすい仕組みです。

例6：プラン比較表

<table>
  <caption>プラン比較</caption>
  <thead>
    <tr>
      <th scope="col">項目</th>
      <th scope="col">ベーシック</th>
      <th scope="col">プロ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">容量</th>
      <td>5 GB</td>
      <td>50 GB</td>
    </tr>
    <tr>
      <th scope="row">月額料金</th>
      <td>99円</td>
      <td>299円</td>
    </tr>
  </tbody>
</table>

`<caption>` は表に名前を付け、`<thead>` と `<tbody>` は見出しと内容を分けます。`scope` は見出しが列か行のどちらに対応するかを示します。スクリーンリーダーはこれらを頼りにデータを正しく読み上げます。

例7：出典付きの引用

<figure>
  <blockquote cite="https://example.com/book">
    <p>ゆっくり進むことを恐れるな。立ち止まることを恐れよ。</p>
  </blockquote>
  <figcaption>『作家への道』より <cite>作品名</cite></figcaption>
</figure>

`<cite>` は作品名に使い、著者名には使いません。`<blockquote>` の `cite` 属性は出典を指します。

例8：候補表示付きの検索欄

<form action="/search" method="get" role="search">
  <label for="q">商品を検索</label>
  <input type="search" id="q" name="q" list="suggest" placeholder="例：コーヒー">
  <datalist id="suggest">
    <option value="中煎りコーヒー">
    <option value="深煎りコーヒー">
    <option value="緑茶">
  </datalist>
  <button type="submit">検索</button>
</form>

`type="search"` は入力欄にクリアボタンを付けます。`<datalist>` は入力中に候補を表示します。`method="get"` を使うと検索語がURLに残るので、結果を共有したりブックマークしたりできます。

例9：idを使った内部リンク

<nav>
  <a href="#intro">はじめに</a> |
  <a href="#terms">用語</a>
</nav>

<h2 id="intro">はじめに</h2>
<p>はじめに の本文です。</p>

<h2 id="terms">用語</h2>
<dl>
  <dt>URL</dt>
  <dd>Web上のリソースの住所です。</dd>
  <dt>DNS</dt>
  <dd>ドメイン名をIPアドレスに変換する仕組みです。</dd>
</dl>

`#` で始まるリンクは、同じページ内の `id` を指します。そのためページを読み直さずに、見出しまでスクロールできます。

例10：検索エンジンとSNS共有のためのmetaタグ

<head>
  <meta charset="UTF-8">
  <meta name="description" content="HTMLでWebサイトを作る方法を最初から学べます。">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta property="og:title" content="HTMLを最初から学ぶ">
  <meta property="og:type" content="article">
  <link rel="canonical" href="https://example.com/html-course/">
</head>

`description` は検索結果でページタイトルの下に表示されることが多い要約です。`og:title` と `og:type` は、SNSで共有されたときの表示を決めます。`canonical` はページの正式なURLを示し、内容の重複による問題を防ぎます。

追加の例の期待される結果

例	保存するファイル名	ブラウザで見えるもの
1. 旅行記	trip.html	「チェンマイ 3日2泊」という見出しと、1日目から3日目までの番号付きリスト
2. 会員登録フォーム	register.html	ユーザー名、パスワード、生年月日の入力欄。ユーザー名が4文字未満だと、ブラウザは送信を止めて修正を求めます
3. 写真ギャラリー	gallery.html	2枚の写真とそれぞれの説明文（画像ファイルが同じフォルダにある必要があります）
4. 入れ子のメニュー	menu.html	主要メニュー3項目と、「ショップ」の下の2つの小項目（CSSがなければ字下げされたリストとして表示されます）
5. よくある質問	faq.html	2つの質問。クリックすると回答が開き、もう一度クリックすると閉じます
6. 比較表	table.html	上に表の名前があり、列の見出しは「ベーシック」と「プロ」、行の見出しは太字の表
7. 出典付きの引用	quote.html	字下げされた引用ブロックと、その下の出典の行
8. 検索欄	search.html	入力すると消去ボタンが出る検索欄。クリックすると候補が表示されます（ブラウザによって異なります）
9. 内部リンク	anchor.html	「用語」をクリックすると用語の見出しまで直接スクロールし、アドレスが `#terms` で終わります
10. metaタグ	head.html	ページには何も表示されません。View Source、またはF12キーで Elements タブの `<head>` 内を確認します

最初から身につけたい習慣

`<html>` に正しい `lang` を設定し、すべての画像に `alt` を付けます。
見た目のためだけでなく、意味に合ったタグを使います。
すべてのタグを閉じ、コードのインデントを揃えて読みやすくします。
W3CのMarkup Validatorでページを検証し、エラーを見つけます。
スマートフォンの幅でもページを確認します。多くの訪問者はモバイル端末からアクセスするからです。

次のステップ

HTMLがわかったら、CSSでページを装飾し、JavaScriptで訪問者の操作に応答させることを学びましょう。その後、Gitでコードを管理したり、プロジェクトが大きくなったらReactやVueのようなフレームワークを学んだりできます。

まとめ

HTMLはすべてのWebページの土台です。`<html>`、`<head>`、`<body>` という基本構造から、テキスト、リンク、画像、リスト、表、フォームまでを理解すれば、すぐに動くページを作れるようになります。小さなページから始め、少しずつ複雑にしていき、毎日少しずつ練習してください。すぐに上達するはずです。

このチュートリアルで作成したプロフィールページ