HTMLとは

HTML（HyperText Markup Language）とは、見出しや段落といった文章の役割を「タグ」という印で示し、Webページの構造を作るためのマークアップ言語です。ブラウザがHTMLを読み取り、書かれた構造のとおりにページを画面へ表示します。

ミナと学ぶ「初日からHTML」 — HTMLはHyperText Markup Languageの略でウェブページを作る言語 ここは見出し ここは段落 とタグで文章に印をつける作業がマークアップで ブラウザはその印を読み取って構造どおりに表示する
ミナと学ぶ「初日からHTML」
漫画の内容をテキストで読む
  1. 1コマ目ナレーション: 総務から突然の辞令 ウェブ担当1日目ミナ: 今日からウェブ担当ですか!? 総務しか知らないのに…
  2. 2コマ目ソウ: 隣の席へようこそ まずはHTMLからだよ
  3. 3コマ目ミナ: HTMLって何の略なんですか? 呪文みたいです
  4. 4コマ目ソウ: HyperText Markup Language の略でウェブページを作る言語だよ
  5. 5コマ目ミナ: でも文章を打つだけじゃ ただの文字の並びですよね?
  6. 6コマ目ソウ: そこでタグの出番だよ ここは見出しと印をつける これがマークアップ
  7. 7コマ目ソウ: その印をブラウザが読み取って 見出しは大きく 段落は段落として表示してくれるんだ
  8. 8コマ目ナレーション: ウェブ担当1日目の学びミナ: HTMLはタグで印をつけて　ウェブページの構造を　ブラウザに伝える言語なんですね!

HTMLとは(Webページを作る言語)

HTMLとは、Webページを作るための言語です。いま表示しているこのページを含め、世の中のほとんどのWebページはHTMLで書かれています。

わかりやすく言うと、HTMLは家の柱や壁のようにページの骨組みを作る言語で、「この部分は見出し、この部分は段落」というように、文章の各部分へ目印を付けていきます。この目印を付ける作業をマークアップと呼びます。

HTMLファイルの実体は、ただのテキストファイルです。ChromeやSafariなどのブラウザがその中身を解釈し、見出しは大きく、リンクは押せる形で表示します。HTMLの仕様はWHATWGという団体が「HTML Living Standard」として策定しており、MDN Web Docsはその仕様をかみ砕いて解説したドキュメントです。

HTMLの意味と略・正式名称

HTMLは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、日本語に直すと「ハイパーテキストに目印を付けるための言語」という意味です。英語では「What is HTML?」と表現される、Web制作の基本用語です。

HyperText / Markup / Language の意味

正式名称を構成する3つの単語の意味は、次の表のとおりです。

単語 意味
HyperText リンクで他の文書へ移動できる仕組みを持った文書
Markup 文章に「見出し」「段落」などの目印を付けること
Language 言語。決められた書き方のルールの集まり

3つをつなげると「リンクでつながる文書に、目印を付けるための言語」となり、HTMLの役割がそのまま名前になっていることがわかります。

HTMLの基本の書き方（タグとは）

HTMLは「タグ」を使って書きます。タグとは<と>で囲んだ目印のことで、大見出しなら<h1>のように書きます。

基本の形は「開始タグ＋内容＋終了タグ」の3点セットです。たとえば<h1>こんにちは</h1>と書くと「こんにちは」が大見出しとして扱われ、終了タグには/（スラッシュ）を付けます。

なお、<meta>のように終了タグを持たない「空要素」もあります。

最小のHTMLサンプルと表示（Try it）

以下は、そのままブラウザで表示できる最小構成のHTML文書です。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは、HTML</h1>
<p>これが最初のWebページです。</p>
</body>
</html>

実行すると、大見出し「こんにちは、HTML」とその下の段落が表示されます。<body>の中に書いた内容が、画面に表示される部分です。

HTMLでできること・何に使うのか

HTMLでできるのは、Webページに載せる要素を定義して配置することです。文章だけではなく、次のような部品もタグで表現できます。

  • 見出し・段落・箇条書き
  • 他のページへ移動するリンク
  • 画像・動画の埋め込み
  • 表（テーブル）
  • 問い合わせや検索などの入力フォーム

これらを組み合わせることで、ニュースサイトからネットショップまで、あらゆるWebページの土台を作れます。具体的な活用例はHTMLでできること・メリットのページで紹介しています。

HTMLとCSS・JavaScriptの関係

HTMLが担当するのはページの構造だけで、見た目の装飾はCSS、動きの追加はJavaScriptという別の言語が担当します。3つの役割分担は、次の表のとおりです。

言語 役割 例
HTML 構造（骨組み） 見出し・段落・リンクの定義
CSS 見た目（装飾） 色・大きさ・配置の指定
JavaScript 動き（振る舞い） クリックへの反応や表示の更新

家にたとえるとわかりやすく、HTMLが骨組み、CSSが内装や外壁、JavaScriptが自動ドアなどの設備にあたります。まずHTMLで構造を作れるようになることが、Web制作の出発点です。

HTMLとはに関するよくある質問

HTMLは何と読みますか?

「エイチティーエムエル」と読みます。読み方の詳細や間違えやすい呼び方はHTMLの読み方のページで説明しています。

HTMLはプログラミング言語ですか?

厳密にはプログラミング言語ではなく、マークアップ言語に分類されます。詳しい理由や両者の違いは専用ページで解説しています。

HTMLファイルを作るのに特別なソフトは必要ですか?

不要です。メモ帳などのテキストエディタで書き、拡張子を.htmlにして保存すれば、ブラウザで開いて表示できます。

タグは大文字と小文字のどちらで書きますか?

どちらでもブラウザは解釈しますが、小文字で書くのが標準的なスタイルです。本サイトのサンプルもすべて小文字で統一しています。