先生と生徒の会話形式で理解しよう

生徒

「HTMLを学ぼうと思うんですが、HTMLだけでどこまでできるんですか？」

先生

「HTMLは、Webページの骨組みや構造を作る言語です。文章や画像を配置することはできますが、動きをつけたりデザインを美しくするのは別の技術が必要ですよ。」

生徒

「じゃあ、HTMLだけではキレイなページは作れないんですか？」

先生

「その通りです。HTMLは建物の骨組み、CSSが内装や装飾、JavaScriptが動く仕組みというイメージですね。それでは、HTMLでできることとできないことを詳しく見ていきましょう！」

1. HTMLとは何か？基本的な役割を理解しよう

HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webページを作成するための基本的なマークアップ言語です。マークアップ言語とは、文章に「ここは見出し」「ここは段落」「ここはリンク」といった意味づけをする言語のことです。プログラミング言語とは異なり、計算や複雑な処理はできませんが、Webページの構造を作るために欠かせない技術です。HTMLは、インターネット上のすべてのWebサイトで使用されており、パソコンやスマートフォンのブラウザがHTMLを読み込んで、私たちが見ているWebページを表示しています。

2. HTMLでできること｜文章の構造化と情報の配置

HTMLでできることは、Webページの基本的な構造を作ることです。具体的には、見出しや段落、リストなどを使って文章を整理できます。また、画像を表示したり、他のページへのリンクを設定したり、表を作成したりすることも可能です。例えば、新聞や雑誌のように「大見出し」「中見出し」「本文」「画像」といった要素を配置して、情報を分かりやすく伝えることができます。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLでできること</title>
</head>
<body>
    <h1>私のブログ</h1>
    <h2>今日の出来事</h2>
    <p>今日は天気が良かったので、公園に行きました。</p>
    <img src="/img/sample150-100.jpg" alt="公園の写真">
    <p>詳しくは<a href="page2.html">こちら</a>をご覧ください。</p>
</body>
</html>

ブラウザ表示

このように、HTMLでは見出しタグ（h1、h2など）、段落タグ（p）、画像タグ（img）、リンクタグ（a）などを使って、情報を整理して配置することができます。

3. HTMLでできないこと｜デザインや装飾の限界

HTMLだけではWebページを美しくデザインすることはできません。HTMLは文章の構造を定義するものであり、色をつけたり、文字の大きさを変えたり、レイアウトを整えたりする機能は基本的に持っていません。例えば、「この文字を赤色にしたい」「背景に画像を敷きたい」「文字と画像を横に並べたい」といったデザイン的な要望は、HTMLだけでは実現できません。このようなデザインや装飾には、CSS（Cascading Style Sheets：カスケーディング・スタイル・シート）という別の技術を使う必要があります。CSSを使うことで、HTMLで作った構造に対して、色や大きさ、配置などの見た目を自由に設定できるようになります。

4. HTMLでできないこと｜動きやインタラクション

HTMLは静的な文書を作る技術であり、ユーザーの操作に応じて内容を変化させたり、アニメーションをつけたりする機能はありません。例えば、「ボタンをクリックしたらメッセージが表示される」「画像がスライドショーのように切り替わる」「入力フォームの内容をチェックする」といった動的な機能は、HTMLだけでは実現できません。このような動きのある機能を実現するには、JavaScript（ジャバスクリプト）というプログラミング言語を使用します。JavaScriptを使うことで、ユーザーの操作に反応する、動きのあるWebページを作ることができます。


<!-- HTMLだけでは動きはつけられません -->
<button>クリックしてください</button>
<p>このボタンを押しても何も起こりません</p>

<!-- JavaScriptを使えば動きをつけられます -->
<button onclick="alert('こんにちは！')">クリックしてください</button>

ブラウザ表示

5. 初心者が迷いがちな点｜HTMLとCSS、JavaScriptの違い

プログラミング初心者の方が最も混乱しやすいのが、HTML、CSS、JavaScriptの違いです。これらは、それぞれ役割が全く異なります。HTMLは「建物の骨組み」、CSSは「内装や装飾」、JavaScriptは「電気や水道などの設備」に例えることができます。家を建てるとき、まず骨組みを作り、次に壁紙を貼ったり家具を配置したりして、最後に電気や水道を通しますよね。Webページも同じで、まずHTMLで構造を作り、CSSでデザインを整え、JavaScriptで動きをつけるという流れになります。この3つの技術は、別々に学ぶことができますが、実際のWebページではこれらを組み合わせて使用します。

6. HTMLだけでできる基本的なページ要素

HTMLだけでも、情報を伝えるための基本的なWebページは作成できます。見出しや段落はもちろん、リスト（箇条書き）、表（テーブル）、リンク、画像、動画の埋め込みなども可能です。また、フォームを使って、ユーザーから名前やメールアドレスなどの情報を入力してもらう仕組みも作れます。ただし、フォームで入力された情報を処理したり、データベースに保存したりするには、サーバー側のプログラム（PHPやPythonなど）が必要になります。


<h2>好きな果物のアンケート</h2>
<form>
    <p>お名前：<input type="text" name="name"></p>
    <p>好きな果物：</p>
    <ul>
        <li><input type="checkbox" name="fruit" value="apple"> りんご</li>
        <li><input type="checkbox" name="fruit" value="banana"> バナナ</li>
        <li><input type="checkbox" name="fruit" value="orange"> オレンジ</li>
    </ul>
    <button type="submit">送信</button>
</form>

ブラウザ表示

7. HTMLでできないこと｜データベースとの連携

HTMLは、ブラウザ上で表示される文書を作成する技術であり、データを保存したり管理したりする機能はありません。例えば、会員登録システムやショッピングカートのように、ユーザー情報や商品情報を保存しておく必要がある場合は、データベースという別の仕組みが必要です。また、データベースからデータを取り出してWebページに表示したり、ユーザーが入力した情報をデータベースに保存したりするには、サーバーサイドプログラミング言語（PHP、Python、Ruby、Java、Node.jsなど）を使用する必要があります。HTMLはあくまでも「見せる」ための技術であり、「保存する」「計算する」といった処理はできないのです。

8. 初心者が知っておくべきHTMLの限界と可能性

HTMLは、Webページを作る上で最も基本的な技術ですが、それだけでは限界があります。しかし、HTMLをしっかり理解することは、CSSやJavaScriptを学ぶ上での土台になります。初心者の方は、まずHTMLで基本的なページ構造を作れるようになることが大切です。その後、CSSでデザインを学び、JavaScriptで動きをつける、という順番で学習を進めると、効率的にスキルを身につけることができます。現代のWebサイトは、これら3つの技術を組み合わせて作られているため、HTMLだけで完璧なWebサイトを作ることはできません。しかし、HTMLはすべての基礎となる重要な技術であり、これを理解せずにWebページを作ることはできません。


<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>HTMLの基本構造</title>
</head>
<body>
    <header>
        <h1>Webサイトのタイトル</h1>
        <nav>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">会社概要</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>記事のタイトル</h2>
            <p>ここに本文が入ります。HTMLで構造を作り、CSSでデザインを整えます。</p>
        </article>
    </main>
    <footer>
        <p>&copy; 2025 私のWebサイト</p>
    </footer>
</body>
</html>

ブラウザ表示

このように、HTMLでは文書の構造を明確に定義できます。header（ヘッダー：ページ上部）、nav（ナビゲーション：メニュー）、main（メイン：主要コンテンツ）、article（記事）、footer（フッター：ページ下部）などのタグを使うことで、検索エンジンにもページの構造が伝わりやすくなります。これは「セマンティックHTML」と呼ばれ、現代のWeb制作では非常に重要な考え方です。