Marketing Glossary DX・マーケティング用語集
HyperText Markup Language（HTML）
HTMLとは？
HTMLとは「HyperText Markup Language（ハイパーテキスト・マークアップ・ランゲージ）」の略で、Webページの見た目の土台となる「骨格」を作成するためのマークアップ言語です。現在インターネット上で公開されている、ほとんどのWebページの作成に用いられています。
HTMLの役割とは?Webページの「骨格」を作る言語
HTMLの最も重要な役割は、Webページに表示されるテキスト、画像、リンクなどの要素に「意味」を与え、コンピューターが理解できる形に構造化することです。
例えば、「この文章は見出しです」「ここからここまでが段落です」「この画像を表示してください」といった指示を、「タグ」と呼ばれる特定の記号を使って記述します。このタグで囲まれたテキストや要素の集合体が、私たちが普段ブラウザで見ているWebページとして表示されます。
よく「プログラミング言語」と混同されがちですが、HTMLは計算や条件分岐などの複雑な処理を行わないため、厳密には「マークアップ言語」に分類されます。Web制作を学ぶ上で、一番最初に習得すべき基礎的な言語です。
HTMLでできること
HTMLを使うことで、Webページに以下のような基本的な要素を配置できます。
- テキストの構造化：見出し（<h1>）、段落（<p>）などで文章の構造を定義する。
- 画像の表示：ページ内に画像（<img>）を埋め込む。
- リンクの設置：他のWebページやファイルへのハイパーリンク（<a>）を作成する。
- 箇条書きリストの作成：順序のないリスト（<ul>）や順序のあるリスト（<ol>）を作る。
- 表（テーブル）の作成：行と列からなる表（<table>）でデータを整理して見せる。
- 入力フォームの設置：お問い合わせやアンケートで使われる入力欄（<form>）を作成する。
これらの要素を組み合わせることで、Webページの基本的な骨格が完成します。
最重要!HTMLとCSS、JavaScriptの違いと関係性
Webページ制作では、HTML、CSS、JavaScriptという3つの言語がセットで使われます。それぞれの役割を理解することが、Web制作を学ぶ上で非常に重要です。よく「家づくり」に例えられます。
HTML：Webページの構造を定義する（家の骨組み）
HTMLは、Webページの構造を作る役割を担います。見出しや段落、画像の配置など、どこに何があるかという「骨格」を定義します。家づくりで言えば、柱や壁、屋根といった建物の構造そのものにあたります。HTMLだけでもWebページは表示できますが、装飾がないため非常に簡素な見た目になります。
CSS：Webページを装飾する（家の内装・外装）
CSS（Cascading Style Sheets）は、HTMLで作られた骨格に対してデザインを施す言語です。文字の色やサイズ、背景色、レイアウトの調整など、見た目に関するすべてを担当します。家づくりで言えば、壁紙の色を決めたり、ペンキを塗ったり、家具を配置したりする内装・外装の役割です。
JavaScript：Webページに動きをつける（家の設備・家電）
JavaScriptは、Webページに動的な機能を追加するプログラミング言語です。例えば、「クリックしたら画像が切り替わるスライドショー」や「入力内容に応じて表示が変わるメニュー」など、ユーザーのアクションに応じた複雑な動きを実装できます。家づくりで言えば、自動で開くドアや、ボタンで操作するエレベーター、センサー付きの照明といった設備・家電の役割です。
| 言語 | 役割 | 家づくりの例え |
| HTML | 構造の定義 | 骨組み（柱、壁、屋根） |
| CSS | 見た目の装飾 | 内装・外装（壁紙、色、レイアウト） |
| JavaScript | 動的な機能 | 設備・家電（自動ドア、エレベーター） |
この3つを適切に使い分けることで、構造がしっかりしていて、見た目が美しく、機能的なWebサイトが作られます。
HTMLの基本的な書き方と構造
HTMLは「タグ」を使って記述します。ここでは、すべてのHTMLファイルの基本となる構造と、よく使われるタグの例を紹介します。
HTMLファイルの基本構造
HTMLファイルは、基本的に以下の構造で記述されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページのタイトル</title>
</head>
<body>
<!-- ここにページに表示したい内容を記述します -->
<h1>これは見出しです</h1>
<p>これは段落です。</p>
</body>
</html>- <!DOCTYPE html>：この文書がHTML5で書かれていることを宣言します。
- <html>：HTML文書全体を囲む、最も基本となるタグです。lang=”ja”は言語が日本語であることを示します。
- <head>：ページのタイトルや文字コードなど、ブラウザには直接表示されないヘッダー情報を記述します。
- <body>：ブラウザに実際に表示されるコンテンツ（見出し、文章、画像など）を記述する部分です。
よく使う基本的なHTMLタグの例
| タグ | 意味 | 書き方の例 |
| ～ | 見出し | <h1>一番大きな見出し</h1> |
| <p> | 段落 | <p>ここに文章が入ります。</p> |
| <a> | リンク | <a href=”https://example.com”>リンクテキスト</a> |
| <img> | 画像 | <img src=”image.jpg” alt=”画像の説明”> |
| , | 順序なしリスト | <ul><li>項目1</li><li>項目2</li></ul> |
HTML5とは?従来との違い
HTML5は、2014年に勧告されたHTMLの最新バージョンです。従来のバージョン（HTML4.01など）に比べて、より文書の構造を意味的に記述できるようになりました。
HTML5で追加された代表的なタグには、以下のようなものがあります。
- <header>：ページやセクションのヘッダー部分
- <footer>：ページやセクションのフッター部分
- <nav>：ナビゲーションメニュー
- <article>：独立した記事コンテンツ
- <section>：関連するコンテンツのまとまり
これらのタグを使うことで、「この部分がヘッダーである」とコンピューターや検索エンジンがより正確に理解できるようになり、SEO（検索エンジン最適化）やアクセシビリティの向上につながります。
HTMLを学習するには
HTMLは比較的習得しやすく、Web制作の入門に最適な言語です。
- 学習サイトで学ぶ：Progateやドットインストールなど、オンラインで手を動かしながら無料で学べるサービスが多数あります。
- 書籍で体系的に学ぶ：初心者向けに図解を多用した分かりやすい本がたくさん出版されています。基礎から体系的に知識を身につけたい方におすすめです。
- 実際にコードを書いてみる：学習と並行して、VSCode（Visual Studio Code）などのテキストエディタを使い、簡単なWebページを自分で作ってみることが最も効果的な学習方法です。
まとめ
この記事では、HTMLの基本的な概念から具体的な書き方、関連技術との違いまでを解説しました。
- HTMLはWebページの「骨格」を作るマークアップ言語
- CSSは「装飾」、JavaScriptは「動き」を担当し、3つで1つのWebページが作られる
- HTMLは「タグ」を使って、文章の構造や画像の配置などを指示する
- HTML5を使うことで、より意味的に文書を構造化でき、SEOにも有利になる
- HTMLはWeb制作の第一歩であり、初心者でも学習しやすい
HTMLは、あらゆるWebサイトの根幹をなす重要な技術です。この記事が、あなたのWeb制作学習の第一歩となれば幸いです。