schedule 5 MIN READ

HTML(エイチティーエムエル)
Webサイトの「骨組み」を作るための言葉

calendar_today 公開日: 2026年5月7日
update 最終更新日: 2026年5月7日
folder_open Web
青い背景に並ぶHTMLのコードタグ記号

インターネットでページを開いたとき、その裏側では「HTML」という専用の言葉がコンピュータに指示を出しています。

HTMLは、建物の「設計図」

Webサイトを一つの「家」に例えると、 HTMLは柱や壁などの「骨組み(構造)」を作る役割 を持っています。

家を建てるときに「ここが玄関」「ここが窓」と決めるように、HTMLを使って「ここが大きなタイトル」「ここが文章の塊」「ここが写真」といった役割を、コンピュータが理解できるように指定していきます。

「タグ」を使って意味を教える

HTMLの最大の特徴は、 「タグ」 と呼ばれる記号で情報を囲むことです。

例えば、見出しにしたい文字があるなら <h1>見出し</h1> のように、 < > で囲んだ記号(タグ)で挟みます。これによって、コンピュータは「あ、ここは一番大事な見出しなんだな」と判断できるようになります。

よく使われるタグの例:

  • <p> :普通の文章(段落)ですよ
  • <img> :画像を表示しますよ
  • <a> :他のページへのリンクですよ

見た目を整えるのは「CSS」の仕事

HTMLはあくまで「中身の意味」や「構造」を決めるためのものです。

「文字の色を赤くしたい」「背景をキラキラさせたい」といった、 見た目のおしゃれ(装飾)は「CSS(シーエスエス)」 という別の言葉にバトンタッチします。HTMLで土台を作り、CSSで内装を整える。この連携でWebサイトはできあがっています。

まとめ

  • check_circle HTML はWebサイトの構造・骨組みを決める言語
  • check_circle タグ (< >)を使って情報の役割をコンピュータに伝える
  • check_circle 見た目のデザインを担当する CSS とは別の役割

sell タグ

book 関連用語

CSS(シーエスエス)とは? Webサイトに「魔法」をかけるデザインの言葉

Webサイトの「見た目」を自由自在に操るCSSについて、初心者の方にも分かりやすく解説します。

arrow_forward
筆者プロフィール

WRITTEN BY

RosyRuby🌹 / ITエンジニア

「技術を誰にでもわかる言葉に」をモットーに活動中。

bookmark 続けて読みたい記事

CATEGORY: AI

プロンプトとは? AIを動かす「魔法の注文書」

AIを思い通りに動かすための「命令文」であるプロンプト。その基本から、精度の高い回答を引き出すコツ(注文の仕方)を初心者向けにやさしく解説します。

arrow_forward

CATEGORY: ネットワーク

IPアドレス インターネット上の「住所」の正体

インターネット上の住所にあたる「IPアドレス」について、初心者の方にもわかりやすく解説します。動的・静的アドレスの違いや確認方法も紹介。

arrow_forward

CATEGORY: バックエンド

APIとは? ソフトウェア同士をつなぐ「窓口」

「API」の正式名称や、アプリ同士がつながる仕組みを「レストランの注文」に例えて世界一わかりやすく解説します。

arrow_forward