HTMLとは？Webページの「骨組み」を作る言語
CCコミュニケーションズ 編集部
HTMLとは？Webページの「骨組み」を作る言語
ページの、
骨組みを作る。
WHAT IS HTML
「HTMLって難しそう」と身構えていませんか。
HTMLは、タグで囲むだけのシンプルな仕組み。骨組みを作る言語です。
「Web制作の求人には必ず出てくるHTML。名前は聞くけれど、コードなんて書いたことがない」——この記事は、そんな未経験の方の最初の一歩です。読み終わる頃には、HTMLが何をするものか、Webページがどんな仕組みでできているかを、自分の言葉で人に説明できるようになります。
先に結論から。HTMLとは、文章や画像に「これは見出し」「これは段落」と役割の印をつけて、ページの骨組みを作る言語です。印をつける記号を「タグ」と呼びます。暗記する呪文ではなく、「囲むだけ」のシンプルな仕組みです。
HTMLの仕事は「赤ペンで印をつける」こと
学校の先生が、作文に赤ペンで「ここが題名」「ここから本文」と印をつけていく場面を想像してください。HTMLがやっているのは、まさにこれです。真っ白な文章に役割の印をつけていく。すると、ChromeやSafariといったブラウザ（Webページを見るためのソフト）がその印を読み取り、「題名は大きく」「本文は読みやすく」と表示してくれます。
つまりHTML自体は、色をつけたり動かしたりはしません。「この文章は何なのか」を伝える——それだけに集中した、とても素直な言語です。だからこそ、コードを書いたことがない人の入口に向いています。
タグの形は「開始・中身・終了」の3点セット
タグの書き方は、たった1パターンです。たとえば大見出しなら <h1>会社案内</h1> と書きます。最初の <h1> が「ここから見出し」という開始の印、最後の </h1> が「ここまで」という終了の印。終了タグにはスラッシュ（/）が入る——違いはこれだけです。
段落なら <p>こんにちは。</p>、リンクなら <a>。名前が変わるだけで、形はずっと同じ。この「3点セット」が読めるようになった時点で、あなたはもうHTMLの半分を身につけています。
よく使うタグは、まず5つで十分
| タグ | 役割 | 覚え方 |
|---|---|---|
<h1>〜<h6> | 見出し | heading（見出し）の h |
<p> | 段落 | paragraph（段落）の p |
<a> | リンク | anchor（いかり）の a |
<img> | 画像 | image（画像）の img |
<ul>・<li> | 箇条書き | list（一覧）の l |
タグは全部で100種類以上ありますが、プロも全部は暗記していません。私たちも制作中に「このタグの書き方どうだったかな」と調べます。調べながら書くのが当たり前の世界なので、暗記の得意・不得意は関係ありません。まずこの5つが読めれば、世の中のWebページの骨組みはだいたい見えてきます。
なぜ「正しい印」をつけるのか——見た目のためだけではありません
「大きい太字にしたいだけなら、見出しタグじゃなくてもいいのでは？」——いい質問です。実は、タグを読んでいるのはブラウザだけではありません。検索エンジンは見出しタグから「このページの主題」を読み取りますし、目の不自由な方が使う読み上げソフトは、見出しタグを頼りにページを拾い読みします。
つまり正しいタグは、画面の向こうにいる訪問者への案内表示です。きれいなコードは目的ではなく、探している情報にその人が迷わずたどり着くための手段——私たちはそう考えて骨組みを作っています。
CCの制作現場で、実際にあった話
私たちCCコミュニケーションズは、WordPress（ワードプレス＝Webサイトを管理するシステム）での企業サイト制作をお受けしています。以前、他社から引き継いだサイトを開いたら、見出しがすべて「太字にしただけの段落」で作られていたことがありました。見た目は見出しでも、印としては本文のまま。検索エンジンに主題が伝わらず、デザイン変更のたびに表示が崩れる状態でした。
私たちは全ページの印をつけ直しました。地味な作業です。でも、依頼主のサイトの先には、検索してたどり着くお客様がいます。骨組みの正しさは、その人たちを迷わせないための土台。納品して終わりではなく「この先も崩れない作り」まで含めて仕事だと考えています。
未経験からでも、HTMLは一番やさしい入口
HTMLは正確には「プログラミング言語」ではなく、マークアップ言語（印をつける言語）と呼ばれます。計算も複雑な命令もなく、印をつけるだけ。だからWeb制作の学びは、ほぼ例外なくHTMLから始まります。必要な道具は、パソコンに最初から入っているメモ帳とブラウザの2つだけ。特別なソフトも費用もいりません。
今日からできる、たった1つのこと
このページの上で右クリックして「ページのソースを表示」を選び、<h1> という文字を1つ見つける
今見ているこのページも、開けばタグの並んだ骨組みでできています。「本当にタグでできているんだ」と自分の目で確かめた瞬間、HTMLは知識から実感に変わります。見つけたら、まわりのタグが「開始・中身・終了」の3点セットになっていることも確かめてみてください。
まとめ
HTMLは、ページの骨組みに役割の印をつける言語。タグは「開始・中身・終了」の3点セットで、まず5つ読めれば十分です。そして正しい印は、ブラウザ・検索エンジン・読み上げソフト、その先にいる訪問者への案内になります。私たちCCコミュニケーションズは、メモ帳の1行から始めて、お客様のサイトを任されるまで一歩ずつ進める研修環境で、一緒に手を動かす仲間を探しています。
