WEB制作で絶対に理解しなければならないものの一つがHTMLです。
そうなんですね。どんなものなんですか？
WEBページの基礎部分。家にたとえても基礎にあたります。これが無いとWEBページはつくれません。
たしかに、基礎が無いと家は建ちませんね。
はじめに
Web制作学習の第一歩、HTML。多くの入門書では「Webページの骨格を作る言語」と説明されています。それは間違いではありませんが、学習を進めるうちに、多くの人が「見た目をどう変えるか」という点だけに注目してしまいがちです。
この記事では、その考え方を一度リセットし、HTMLが本来持つ「文章の構造を定義する」という最も重要な役割に焦点を当てます。なぜそれが重要なのか、具体的な例を交えながら深掘りしていきます。この本質を理解することが、将来的にCSSやJavaScriptを学ぶ上での強固な土台となります。
そもそも「HTML」って何の略？
本題に入る前に、言葉の意味を少しだけ見てみましょう。HTMLは HyperText Markup Language の略です。
- HyperText（ハイパーテキスト）: リンクで文書同士を繋げられる、Webの根幹をなす「テキストを超えた」仕組み。
- Markup（マークアップ）: 文章の各部分に「これは見出し」「これは段落」といった**意味の印（タグ）**を付けていくこと。
- Language（言語）: コンピュータ（ブラウザ）にその意味を伝えるための「言葉」。
つまりHTMLとは、「リンク機能を持った文章に、意味の印をつけていくための言語」です。重要なのは、デザインや色を指定するのではなく、あくまで文章の役割に印をつけるのが目的だという点です。
HTMLの本質は「文章の構造」を伝えること
HTMLの歴史を遡ると、その本質がより明確になります。そもそもインターネットは、研究者たちが論文を効率的に共有するために作られました。
HTMLは、その論文という「文章」を、コンピュータの世界で誰もが分かりやすく読めるように整形する目的で生まれたのです。つまり、どれが主題で、どれが段落で、どこが引用なのか、といった文章の骨格をコンピュータに正しく伝えるための言語なのです。
良いマークアップと悪いマークアップ
Web制作の現場では、ブラウザによる見た目の差異をなくすため、見出しの文字サイズやリストの行頭文字などを一度すべて消去する「リセットCSS」を適用するのが一般的です。
この、CSSを適用するまではただのテキストにしか見えない状況で、なぜ意味のあるタグ付けが重要なのかを見ていきましょう。
【元になる文章】
私の好きなフルーツ
果物にはたくさんの種類がありますが、私が特に好きなものをいくつか紹介します。
ベスト3リスト
・りんご
・バナナ
・みかん
良いマークアップ例：文章の構造（意味）を正しく伝える
HTML
<main>
<h1>私の好きなフルーツ</h1>
<p>果物にはたくさんの種類がありますが、私が特に好きなものをいくつか紹介します。</p>
<h2>ベスト3リスト</h2>
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>みかん</li>
</ul>
</main>
【解説】
リセットCSSが当たっているため、画面上はプレーンなテキストに見えます。しかし、コンピュータにはこの文章の構造が完璧に伝わっています。<h1>（大見出し）、<p>（段落）、<h2>（中見出し）、<ul>と<li>（リスト）という論理的な構造が正しく定義されており、これこそがHTMLの果たすべき役割です。
悪いマークアップ例：文章の構造が不明瞭
HTML
<div>
<div>私の好きなフルーツ</div>
<div>果物にはたくさんの種類がありますが、私が特に好きなものをいくつか紹介します。</div>
<div>ベスト3リスト</div>
<div>・りんご</div>
<div>・バナナ</div>
<div>・みかん</div>
</div>
【解説】
すべてを意味のない<div>タグで囲っているため、人間には同じ文章に見えても、コンピュータには構造が一切伝わりません。どれが見出しでどれがリストなのか区別がつかないため、SEOやアクセシビリティの観点で大きな問題を抱えています。
まとめ 構造化思考こそがHTMLマスターの鍵
まとめです。
- HTMLは見た目ではなく「意味」を記述する言語文章のどの部分が「見出し」で、どれが「リスト」なのかなど、その構造的な意味をマークアップすることがHTMLの第一の目的です。
- 構造と見た目は分離して考える。HTMLで文章の骨格をしっかりと作り、見た目の装飾はCSSに任せる。この役割分担が、質の高いWebサイト制作の基本です。
- 正しいマークアップは多くのメリットを生む。意味が正しく伝わるHTMLは、検索エンジンが内容を理解しやすくなる（SEO向上）だけでなく、音声読み上げソフトなどを使用するユーザーの助けにもなります（アクセシビリティ向上）。WEBの構築時、修正時にも構造が整っていれば修正箇所の判断が容易。
見た目を整える前に、まず文章の構造を考える。この「構造化思考」こそ、HTMLをマスターする上で最も大切なスキルと言えるでしょう。
より詳しいHTMLの技術的な解説は、MDNのドキュメントが非常に参考になります。
