HTMLとは｜Webページの骨組みを表すマークアップ言語

いまの画面で、四つの部品を探す

このページを例に、内容を役割ごとに見分けてみましょう。

1. いま見ているページの一番大きな見出しを探す
2. その下にある本文の段落を一つ選ぶ
3. 押すと移動するリンクを一つ探す
4. 画像がある場合は、画像が本文のどこに置かれているかを見る
5. その四つを「見出し、段落、リンク、画像」と書き分ける

HTMLとは、Webページの＿＿＿＿＿＿＿＿＿＿＿＿を表す言語です。
タグは、部品の＿＿＿＿＿＿＿＿＿＿＿＿を示します。
CSSとの違いは、HTMLが主に＿＿＿＿＿＿＿＿＿＿＿＿を担当することです。

答えの例は、「構造」「役割」「骨組みや意味」です。見た目を変えるためだけにタグを選ぶのではなく、ページの中でその部品が何を意味するかを考えます。

イト

HTTPの返事の中に、HTMLって書かれた設計図が入ってたよ

ユイ

見出し、段落、リンク、画像の場所をブラウザに伝えるものですね

ピコ

そう。HTMLは、Webページの中身に役割と構造をつけるための言語なんだ

第65話「HTMLは何を組み立てる？」では、HTTPの橋から返ってきたHTML設計図を開きます。画面のむこう側で、ブラウザが最初にどんな骨組みを読んでいるのかを見ていきましょう。

同じ文字でも、役割が違う

ページに文字を書くだけなら、ただの文章でもできます。けれどWebページでは、ブラウザ、検索エンジン、読み上げソフトなどが「どこが見出しで、どこが本文で、どこがリンクなのか」を理解できる必要があります。

たとえば、同じ「ピコルートへようこそ」という文字でも、ページ全体の見出しなのか、本文の一部なのか、リンクの文字なのかで役割が変わります。HTMLは、その役割をタグで示します。

ラボのたとえでは、HTMLはページの設計図です。文字や画像の場所をただ並べるのではなく、それぞれに「何の部品か」という札をつけます。

タグ・要素・属性

HTMLでは、タグを使ってページの部品に役割をつけます。

よく見るタグには、次のようなものがあります。

タグは、ブラウザに「この部分は何なのか」を伝える札のようなものです。

<h1>ピコルートへようこそ</h1>
<p>インターネットの仕組みを物語で学びます。</p>

<h1> や </h1> はタグです。そのタグに囲まれた文字まで含めて、ひとつの見出し要素として見ます。<p> も同じように、段落を表す要素を作ります。

さらに、部品には追加メモとして属性をつけることがあります。

<a href="/guides/what-is-css/">CSSの記事へ進む</a>
<img src="/images/lab/example.avif" alt="ラボの机に置かれた設計図">

href はリンク先、src は画像ファイルの場所、alt は画像の説明です。画面に見えている文字や画像だけでなく、ブラウザやほかの道具が読む手がかりもHTMLには入ります。

マコト

タグは札、要素は中身まで含めた部品として見るとよさそうだね

ピコ

うん。属性はその部品につける追加メモとして考えると入りやすいよ

入れ子で構造を作る

Webページは、見出し、段落、リンク、画像がただ横一列に置かれているわけではありません。

記事の中に見出しがあり、その下に段落があり、段落の中にリンクがある。メニューの中に複数のリンクがあり、カードの中に画像とタイトルがある。このように、部品の中に別の部品が入る形を入れ子として見ると、HTMLの構造がつかみやすくなります。

簡単な例を見てみます。

<article>
  <h1>HTMLとは</h1>
  <p>HTMLはWebページの構造を表す言語です。</p>
  <a href="/guides/how-web-page-renders/">表示の仕組みへ進む</a>
</article>

この例では、article の中に見出し、段落、リンクが入っています。ブラウザはこうしたまとまりを読み、ページの構造として扱います。

実際のサイトでは、ヘッダー、ナビゲーション、本文、サイドバー、フッターなど、さらに大きなまとまりもあります。HTMLを読むときは、細かなタグだけでなく「どの部品がどこに入っているか」を見ると理解しやすくなります。

HTMLとCSSとJavaScriptの役割

HTMLはページの構造を表します。CSSは見た目のルールを決めます。JavaScriptは動きや処理を加えることがあります。

三つを分けると、次のようになります。

HTMLだけでもページの内容は表せます。けれど、普段見ているWebページの見た目にはCSSが大きく関わります。さらに、メニューの開閉やフォームの確認、あとからデータを読み込む動きにはJavaScriptが関わることがあります。

HTMLを直せば見た目がすべて決まるわけではありません。HTMLは主に骨組みです。見た目の細かいルールは、次に見るCSSへ進むとつながります。

ブラウザはHTMLをどう使うか

HTMLが届く通信は HTTPとは で扱います。ブラウザは、サーバーから返ってきたHTMLを読み、ページの構造を作ります。この内部の構造はDOMと呼ばれます。

流れを短くすると、次のようになります。

1. ブラウザがHTTPレスポンスでHTMLを受け取る
2. HTMLを読み、見出しや段落などの構造を作る
3. HTMLに書かれたCSS、画像、JavaScriptなどを必要に応じて取りに行く
4. CSSを読み、見た目のルールを当てる
5. 配置を計算し、画面に描く

つまり、HTMLはWebページ表示の出発点になる材料です。HTMLが届くと、ブラウザはそこから追加の材料を見つけ、画面を組み立てていきます。

この前後の流れを広く見るなら Webページ表示の仕組み が役に立ちます。

HTMLでよくある勘違い

HTMLを学び始めるときは、次の点で混乱しやすくなります。

• HTMLはプログラミング言語そのものではなく、構造を表すマークアップ言語
• HTMLは見た目をすべて決めるものではない
• タグ名は見た目ではなく役割を示すものとして考える
• 画像やリンクには、画面に見えない追加情報がある
• 正しい構造は、検索やアクセシビリティにも関係する

もちろん、HTMLを書けばブラウザの標準スタイルで見た目が変わることはあります。けれど「大きくしたいから見出しタグを使う」のではなく、「ここが見出しだから見出しタグを使う」と考える方が、あとから崩れにくくなります。

HTMLは、見た目の近道ではありません。ページの意味と構造を整えるための土台です。

HTMLのミニクイズ

Q1. HTMLは何を表すための言語ですか？

Webページの見出し、本文、画像、リンクなどの構造を表すための言語です。

Q2. a タグでよく使われる属性は何ですか？

リンク先を示す href 属性です。

Q3. HTMLとCSSの役割はどう違いますか？

HTMLはページの構造を表し、CSSは色、余白、配置などの見た目を整えます。