はじめに
プログラミングは「処理を書く」イメージですが、HTMLは文章に「これは見出し」「これは段落」と意味を付けていく作業に近いと感じています。一般的には、HTMLは「マークアップ言語」と呼ばれ、プログラミング言語とは分けて考えられています。
この記事では、そんな疑問を出発点に、HTMLの基礎をまとめてみました。
この記事でわかること
- HTMLでできることと基本の形
- タグの考え方
- 始めるために必要なものと始め方
- おすすめの学ぶ順番
結論
HTMLは、文章に「ここは見出し」「ここは段落」と意味を付けて、Webページの骨組みを作るものです。VS Codeとブラウザがあれば今日から始められるので、まずは小さなページを1枚作ってみるのが近道です。
Photo by Florian Olivo on Unsplash
HTMLとは？
HTMLは、私がWeb制作で最初に覚えた言語です。当時は「これだけで本当にWebページが作れるの？」と半信半疑でした。
Photo by Juanjo Jaramillo on Unsplash
テキストエディタに打ち込んだファイルをブラウザで開き、ちゃんとページが表示されたときの感覚は、今でも覚えています。
最初に作ったのは、教材の本（カピぞうの本）を見ながら書いた、文字中心のプロフィールページでした。見出しと文章を並べただけのシンプルなページでも、自分の書いたコードが画面に表示されたことがうれしかったです。
プロフィールページは、見出し・段落・画像・リンクといった基本のタグをひと通り使えるので、最初の練習題材として取り組みやすいと思います。書いたものがすぐ画面で確認できるので、学び始めの手応えを感じやすいのも良いところです。
HTMLは「見た目」ではなく「意味」を定義する言語です。たとえば、ブラウザに次のような情報を伝えます。
- これは見出し
- これは本文
- これは画像
- これはリンク
HTMLだけでは色や配置などのデザインは整えられませんが、Webページの土台としてとても重要な役割を持っています。
HTMLの歴史
HTML誕生（1991年）
HTMLは、1991年にティム・バーナーズ＝リー（Tim Berners-Lee）氏によって公開されました。研究者同士が情報を共有するための仕組みとして生まれた技術です。
最初のころに扱えたのは、次のようなシンプルな要素が中心でした。
- 見出し
- 段落
- リンク
Webの普及（1990年代）
インターネットの普及とともにWebサイトが増え、HTMLも進化していきました。次のような表現ができるようになっていきます。
- 画像表示
- テーブル（表）
- フォーム入力
この時代には、代表的なブラウザも登場しました。
- Netscape Navigator
- Internet Explorer
CSS・JavaScriptとの分離
やがて、見た目はCSS、動きはJavaScriptというように、役割を分けて作る考え方が広まりました。
| 役割 | 技術 |
|---|---|
| 構造 | HTML |
| デザイン | CSS |
| 動き | JavaScript |
この3つを組み合わせることで、現代のWebサイトは作られています。
HTML5（現在）
現在主流なのはHTML5です。動画・音声の扱いやスマホ対応が強化され、Webアプリの開発にも使われています。
HTMLでできること
HTMLを使うと、次のようなWebコンテンツが作れます。
- Webページ
- ブログ
- ポートフォリオサイト
- LP（ランディングページ。商品や申し込みを1枚で案内するページ）
- Webアプリの画面
HTMLの基本構造
HTMLのファイルは、おおまかに次のような形をしています。headにはページの情報、bodyには画面に表示する内容を書きます。
<!DOCTYPE html>
<html>
<head>
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これはHTMLです。</p>
</body>
</html>
タグとは？
HTMLは「タグ」と呼ばれる記号で、文章の構造を表します。基本は、開始タグと終了タグで内容をはさむ形です。
<h1>タイトル</h1>| タグ | 意味 |
|---|---|
| h1 | 見出し |
| p | 段落 |
| a | リンク |
| img | 画像 |
| ul / li | リスト |
| div | ブロック |
| button | ボタン |
HTMLを始めるために必要なもの
| 必要なもの | 説明 |
|---|---|
| パソコン | Windows / MacどちらでもOK |
| テキストエディタ | コードを書くソフト |
おすすめエディタ
Visual Studio Code（VS Code）がよく使われています。無料で使え、日本語化もできます。
HTMLの始め方（初心者向け）
① VS Codeをインストール
公式サイトからダウンロードします。
② フォルダ作成
作業用のフォルダを1つ作ります。名前は何でも大丈夫です。
my-html③ index.html作成
フォルダの中に、次の名前でファイルを作ります。
index.html④ HTMLを書く
<!DOCTYPE html>
<html>
<body>
<h1>はじめてのHTML</h1>
</body>
</html>
⑤ ブラウザで開く
保存したindex.htmlをダブルクリックすると、ブラウザで表示を確認できます。
初心者におすすめの学習順
- HTML
- CSS
- JavaScript
私自身、学び始めたころはHTMLとCSSを混同してしまうことがありました。
どちらも「Webページを作るためのコード」としてまとめて覚えようとすると、境目があいまいになりやすいのかもしれません。前に紹介した表のように、「HTMLは構造、CSSは見た目」と役割を分けて覚えておくと整理しやすくなると思います。
迷ったときは、「これは文章の意味（見出し・段落・リストなど）を伝えるものか、色や大きさ・配置を決めるものか」と考えてみてください。どちらに書くかを判断しやすくなります。CSSの役割は、CSSとは？できること・書き方の基本と、余白でつまずいた私の練習法でまとめています。
HTMLを学ぶよい点
Photo by Joshua Woroniecki on Unsplash
- Webの仕組みが理解できる
- 副業・仕事につながる
- 初心者でも始めやすい
HTMLを覚えてから、ふだん見ているWebサイトの見え方も変わりました。
ブラウザのデベロッパーツール（ページのHTMLやCSSを確認できる機能）で、ほかのサイトのコードを見るのが楽しくなったんです。「このタグはこう使うんだ」と新しい使い方を知るたびに、ネット上のページが教材のように見えてきます。
デベロッパーツールは、多くのブラウザでF12キーや右クリックの「検証」から開けます。表示されたコードを書き換えても、変わるのは自分の画面だけで一時的なものです。気になったサイトで試しながら学べるのも良いところです。
この記事のまとめ
HTMLは、Web制作の土台になる技術です。まずは小さなページを作りながら慣れていくことが、上達の近道だと思います。
CSSやJavaScriptと組み合わせることで、本格的なWebサイトも作れるようになります。
よくある質問（FAQ）
Q. HTMLはプログラミング言語ですか？
A. 一般的にはマークアップ言語に分類されます。プログラミング言語が「条件分岐」や「繰り返し」など処理の流れを書くのに対し、HTMLは文書の構造や意味を定義するための言語という違いがあります。
Q. HTMLだけでサイトは作れますか？
A. ページを表示すること自体はできますが、装飾や動きを付けるにはCSSとJavaScriptが必要です。実務では「HTML＝骨組み、CSS＝見た目、JavaScript＝動き」という役割分担で組み合わせるのが基本です。
Q. HTMLの学習時間はどれくらいですか？
A. 基本的なタグ（見出し・段落・リンク・画像・リストなど10〜15種類程度）なら、1日1〜2時間の学習で1週間ほどあれば一通り書けるようになることが多いです。「意味に合ったタグを選ぶ」感覚に慣れるまでは、実際にページを作りながら1〜2か月ほど練習するのが目安です。
Q. HTMLとHTML5の違いは何ですか？
A. HTML5は現在主流のバージョンで、動画・音声の再生タグや、フォームの入力チェック機能などが追加されています。今からHTMLを学ぶ場合は、特に意識しなくても自然とHTML5の書き方を学ぶことになります。
Q. HTMLを書くときによくあるミスは何ですか？
A. タグの閉じ忘れと、見た目を優先してタグの意味を無視してしまうことの2つが代表的です。たとえば、見出しではない文字を大きく見せたいだけで見出しタグを使うと、後からCSSで調整しづらくなったり、検索エンジンに内容が正しく伝わらなくなったりします。
