インターネットで毎日見ているホームページ。その中身がどうやって作られているか、考えたことはありますか？
そこで必ず登場するのが「HTML（エイチティーエムエル）」という言葉です。
「プログラミングみたいなもの？」「難しそう……」と感じるかもしれませんが、実は私たちが目にしているすべてのWebページの「骨組み」を作っているのが、このHTMLなのです。この記事では、HTMLの正体や役割について、専門用語を抑えて分かりやすく解説します。
HTMLの正体は「Webページの骨組み」
正式名称は、HyperText Markup Language（ハイパーテキストマークアップランゲージ）。略して「HTML」。
HTMLは、文章に「これは見出し」「これは本文」といった「意味」を持たせるための言語です。この意味付けのことを「マークアップ」と呼び、HTMLはマークアップ言語に分類されます。
- 情報の整理整頓
単なる文字の羅列に「タイトル」「箇条書き」「リンク」といった役割を与えることで、ブラウザ（ChromeやSafariなど）が正しく内容を理解できるようになります。 - Webの共通言語
世界中のほぼすべてのWebページがHTMLで作られており、インターネットの世界を支える最も基本的なルールです。
HTMLで「できること」の具体例
HTMLを使うことで、ただのテキストファイル（文字だけの情報）が「Webページ」へと生まれ変わります。
- 文章の構造化
どこがタイトルで、どこが段落なのかなど、文字の情報をはっきりさせる。 - リンクの作成
別のページやサイトへジャンプできるようにする。 - 画像や動画の配置
ページの中に写真やYouTube動画などを埋め込む。 - 入力フォームの設置
お問い合わせフォームや検索ボックスなどの土台を作る。
【重要】HTMLとCSS、どう違うの？
Web制作を学ぶときに必ずセットで出てくる「CSS（シーエスエス）」との違いは、「家づくり」に例えると非常に分かりやすいです。
- HTMLは「骨組み・壁」
家の中に「柱を立てる」「壁を作る」「ドアをつける」といった、建物の構造そのものを作る役割。 - CSSは「内装・デザイン」
壁紙を何色にするか、ドアの形をどうするか、家具をどこに置くかといった、見た目を整える役割。
Wordを使ったことがある方だと、HTMLは「文字入力」、CSSは文字の色や配置を変えるなど、見た目を変化させる「書式設定」と考えると理解しやすいです。
Webページに置き換えると、HMTLはページ上に表示させる「中身」。CSSは表示されている中身の見た目を変化させる「設定」と言ったイメージです。
つまり、「HTMLで形を作り、CSSで綺麗に飾る」という分担が基本です。
最初に覚えたい「基本のキーワード」
HTMLを理解するために、最低限知っておきたい概念をまとめました。基本なのでしっかり理解しましょう。
HTMLの基本形
<開始タグ>コンテンツ</終了タグ>
HTMLの最も基本的な形です。「コンテンツ」はページ上に表示される内容、「タグ」は意味付けを行うものとなります。タグの種類によっては「終了タグ」が不要なものもあります。
タグ
上記の基本形にある、内容を左右で囲む記号のことです。半角の「<>」を利用し、内容ごとに決まったタグを入れていきます。<p>は段落を意味する、<h1>は見出しを意味するなど、使用するタグによってテキストに意味を与えます。終了タグは</p>このようにアルファベットの前にスラッシュが必要となります。
ブラウザ
HTMLを読み込んで、私たちが普段見ている「Webページ」の形に翻訳して表示してくれるソフト（Google ChromeやiPhoneのSafariなど）のことです。インターネットを見るためのアプリと思っていただければ問題ありません。
ソースコード
HTMLで書かれた「設計図」そのもののことです。普段は見えませんが、ブラウザの裏側にはこのコードがびっしり書かれています。
なぜHTMLを最初に学ぶの？
HTMLはWeb制作における「すべての基礎」だからです。どんなに高度なWebサイトも、最後はHTMLとして出力されます。これを理解しておくことで、ブログの修正やWebデザイン、さらにはプログラミング学習へとスムーズに進めるようになります。
Webサイトを作るための土台となるのがHTML。これを理解しておかないとWebサイト制作はできないと言っても過言ではありません。
まとめ
HTMLは、Webの世界で情報を伝えるための「土台」です。
コードを書くのは難しそうに見えますが、その役割は「文章に意味をつける」という、とてもシンプルなものです。
この仕組みを知るだけで、いつも見ているインターネットの景色が少し違って見えるはずですよ。
