WEBアプリ開発の学習は、HTMLから始めるのが基本です。ただ、「HTMLから始めましょう」と言われても、具体的に何をどこまで学べばいいのか分からない、という声をよく聞きます。

25年以上、Webシステムの開発・運用に携わり、多くの初心者の指導も行ってきた経験から、HTMLを学ぶ際に押さえるべきポイントと、つまずきやすい部分をまとめました。これからWEBアプリ作りの第一歩を踏み出す方向けの内容です。

そもそも、HTMLとは何をするものか

HTMLは、Web ページの「構造」を作るための言語です。「これは見出しです」「これは文章です」「これは画像です」というように、画面に表示する内容それぞれに"意味"を与えていく作業だとイメージすると分かりやすいです。

見た目の装飾（色、大きさ、配置など）は、後で学ぶCSSという別の言語が担当します。HTMLの段階では、「何を」「どういう意味の要素として」配置するかだけを考えます。この役割分担を最初に理解しておくと、あとの学習でつまずきにくくなります。

最初に覚えるべき、基本のタグ

HTMLは「タグ」と呼ばれる目印を使って、要素の意味を表現します。最初はすべてを覚えようとせず、次のタグから使えるようになることを目標にします。

  • <h1>〜<h6>：見出し。数字が小さいほど大きな見出しになる
  • <p>：段落（文章のまとまり）
  • <a>：リンク。他のページや外部サイトへのリンクを作る
  • <img>：画像を表示する
  • <ul>・<li>：箇条書きのリストを作る
  • <div>：意味を持たない、要素をグループ化するための箱

この6種類のタグだけでも、自己紹介ページのような簡単なページは十分に作れます。まずはこの範囲で、実際に1つのページを完成させてみることをおすすめします。

HTMLファイルの基本構造を理解する

タグの使い方と合わせて、HTMLファイル全体の基本構造も押さえておく必要があります。

  • <!DOCTYPE html>：このファイルがHTML文書であることを宣言する、決まり文句
  • <html>：ページ全体を囲む要素
  • <head>：ページのタイトルや、文字コードなど、画面には直接表示されない情報を書く場所
  • <body>：実際に画面に表示される内容を書く場所

最初のうちは、この基本構造を「おまじない」として丸ごとコピーして使って構いません。慣れてくるにつれて、それぞれの部分が何のためにあるのかが自然と分かってきます。

HTMLを学ぶときの、具体的な進め方

1. 決まった構造を、まず手で書き写す

見本となるHTMLコードを、意味が分からない部分があっても、まずはそのまま手で入力してみます。書き写す中で、タグの対応関係（開始タグと終了タグがセットになっていることなど）が自然と身についていきます。

2. 一つ変えて、表示がどう変わるかを確認する

タグの中の文字を変えてみる、タグの種類を変えてみるなど、少しずつ変更を加えて、ブラウザでの表示がどう変わるかを確認します。この「変えてみて、確認する」の繰り返しが、暗記よりもずっと効果的な学習方法です。

3. 小さなテーマで、1ページを完成させる

自己紹介ページ、好きな本や映画の紹介ページなど、小さなテーマで構わないので、実際に1つのページを最初から最後まで作り切る経験を積みます。「完成させた」という経験が、次のステップに進むための自信になります。

初心者がつまずきやすいポイント

1. タグの閉じ忘れ

HTMLの多くのタグは、開始タグ（<p>）と終了タグ（</p>）がセットになっています。この終了タグを忘れると、意図しない場所までスタイルや構造が崩れてしまうことがあります。エディタの多くには、対応するタグを分かりやすく表示する機能があるので、活用すると気づきやすくなります。

2. インデント（字下げ）を意識しない

HTMLは、インデントをつけなくても表示上は動きます。しかし、要素の親子関係が分かりやすいように、正しくインデントをつけて書く習慣をつけておくと、コードが長くなったときにも読みやすく、ミスにも気づきやすくなります。最初から丁寧に書く癖をつけておくことをおすすめします。

3. 見た目の調整を、HTMLだけで頑張ろうとする

文字を大きくしたい、色を変えたいといった見た目の調整は、本来CSSの役割です。HTMLの学習段階でここを頑張りすぎると、本来学ぶべき「構造の作り方」から意識がそれてしまいます。見た目の調整はCSSに任せると割り切り、HTMLでは意味のある構造を作ることに集中するのがポイントです。

次のステップに進む目安

次のような状態になったら、CSSやJavaScriptの学習に進むタイミングだと考えています。

  • 見本を見ずに、自己紹介ページなど簡単なページを一から書ける
  • タグの開始と終了、親子関係を意識して書ける
  • エラー（表示が崩れる、意図と違う）が起きたときに、どのタグが原因かを自分で調べられる

すべてのタグを暗記する必要はありません。よく使うタグを実際に手を動かしながら覚え、分からないタグが出てきたときに調べられる状態になっていれば、次のステップに進む準備は十分です。

まとめ

HTML学習のいろはは、次の流れで進めることをおすすめします。

  • HTMLは「構造」を作る言語だと理解する
  • まずは6種類程度の基本タグと、ファイルの基本構造を覚える
  • 見本を書き写し、少しずつ変更を加えながら表示の変化を確認する
  • 小さなテーマで、1ページを最後まで作り切る経験を積む
  • 見た目の調整に深入りせず、構造作りに集中する

HTMLは、WEBアプリ開発の一番土台になる部分です。ここで「作ったものが画面に表示される」という感覚をしっかりつかんでおくことが、この先のJavaScriptやサーバーサイド言語の学習をスムーズに進めるための、確かな一歩になります。