HTML入門
HTMLとは？
HTML（HyperText Markup Language）はウェブページを作成するための標準言語です。プログラミング言語ではなく、マークアップ言語です ― タグを使ってブラウザにコンテンツの表示方法を指示します。
シンプルなブログから複雑なECサイトまで、あなたが見るすべてのウェブページは、その基盤にHTMLが使われています。HTMLはページの構造を定義します。見出し、段落、画像、リンク、テーブル…すべての「骨格」はHTMLによって作られています。
💡 わかりやすい例え：
ウェブページを家に例えると、HTMLは構造フレーム（壁、ドア、窓）、CSSは装飾（色、スタイル）、JavaScriptは電気・配管システム（インタラクティブ機能）です。
シンプルなHTMLドキュメント
すべてのHTMLドキュメントは一連のタグで構成されています。以下は最も基本的なHTMLドキュメントの構造です。
サンプル
HTML
<!DOCTYPE html>
<html>
<head>
<title>初めてのウェブサイト</title>
</head>
<body>
<h1>こんにちは、世界！</h1>
<p>これは最初の段落です。</p>
</body>
</html>
コードの説明
<!DOCTYPE html>― ドキュメントタイプ宣言。ブラウザにこれがHTML5ドキュメントであることを伝えます<html>― HTMLドキュメントのルート要素。すべてのコンテンツはこのタグの中に入ります<head>― ドキュメントのヘッダー領域。メタデータ（タイトル、エンコーディングなど）を含みます<title>― ブラウザタブに表示されるページタイトルを定義します<body>― ドキュメントのボディ領域。すべての表示コンテンツがここに入ります<h1>― レベル1の見出し。通常、ページで最も大きなテキストです<p>― 段落タグ。テキストのブロックを囲むために使います
HTMLタグ構文
HTMLタグは通常、ペアで構成されます。開始タグと終了タグです。
HTML
<tagname>ここにコンテンツが入ります</tagname>
- 開始タグ：
<tagname>― 山括弧でタグ名を囲んだもの - 終了タグ：
</tagname>― 開始タグと同じだが、スラッシュが付く - コンテンツ： 開始タグと終了タグの間にあるテキストや他のタグ
一部のタグにはコンテンツがなく、空タグと呼ばれます。例えば改行タグ <br> や水平線タグ <hr> などです。
✅ ベストプラクティス：
タグ名は常に小文字で記述してください。
<TAGNAME> でも技術的には動作しますが、小文字がより標準的で読みやすいです。
HTML属性
タグには属性を付けて追加情報を提供できます。属性は開始タグの中に name="value" の形式で記述します。
HTML
<a href="https://www.example.com">これはリンクです</a>
<img src="/assets/images/tutorials/html-example-photo.webp" alt="サンプル写真">
href― リンクの移動先URLsrc― 画像のファイルパスalt― 画像が読み込めない場合の代替テキスト（アクセシビリティに重要）
⚠️ 注意：
属性値はクォーテーションで囲む必要があります。一貫性のためにダブルクォーテーション
" " が推奨されます。
HTMLのバージョン
HTMLはその誕生以来、複数のバージョンを経てきました。現在使用しているのは最新標準のHTML5です。HTML5では多くの新機能が導入されました。
- 意味論的タグ（
<header>、<nav>、<article>など） - ネイティブの音声・動画サポート（
<audio>、<video>） - Canvas描画API
- ローカルストレージ（localStorage）
- レスポンシブ画像のサポート
📌 安心してください：
このチュートリアルはすべてHTML5標準に基づいています。学ぶすべての概念は現代的ですぐに使えます。
開発ツール
HTMLを書くために必要なものは2つだけです。
- テキストエディター ― VS Code（無料、軽量）、Sublime Text、Notepad++
- ブラウザ ― Chrome、Edge、FirefoxのいずれでもOK
エディターでコードを書き、.html ファイルとして保存し、ブラウザで開くだけ ― それだけです。
🚀 自分で試してみましょう：
テキストエディターを開き、上のサンプルコードをコピーして、myfirst.html として保存し、ダブルクリックしてブラウザで開いてください ― あなたの最初のウェブページが完成しました！
❓ よくある質問
Q HTMLとプログラミング言語の違いは何ですか？なぜHTMLはプログラミング言語ではないのですか？
A PythonやJavaなどのプログラミング言語は変数、ループ、条件分岐などの論理制御機能を持ち、複雑なアルゴリズムやビジネスロジックを実装できます。HTMLはタグを使ってページ構造を記述するだけで、論理処理能力はなく、計算や判断、動作の変更ができません。簡単に言うと、プログラミング言語は「動作するもの」、HTMLは「何かがどのように見えるかを記述するもの」です。
Q HTMLを学ぶには何が必要ですか？英語が苦手でも学べますか？
A HTMLはすべてのプログラミング技術の中で最も敷居が低く、前提知識は必要ありません。英語が苦手でも学習に支障はありません。HTMLタグは数十個の一般的な単語しかなく（
pはparagraph（段落）、hはheading（見出し）など）、使っているうちに自然に覚えます。重要なのはタグのセマンティクスとネストの論理を理解することであり、英語力ではありません。Q
<!DOCTYPE html>はなぜ最初の行に書かなければなりませんか？書かないとどうなりますか？A DOCTYPEを書かないと、ブラウザは「Quirksモード」に入り、1990年代の古いレンダリングエンジンを使ってページを解析するため、レイアウトの崩れやCSSの不具合が発生する可能性があります。DOCTYPEはブラウザに「モダンな標準モードでレンダリングしてください」と伝える命令です。HTMLタグではなく命令なので、すべての内容の前に記述する必要があります。
📖 まとめ
- HTMLはタグを使ってページ構造を記述するマークアップ言語であり、プログラミング言語ではない
- すべてのHTMLドキュメントは決まった骨格に従う：
<!DOCTYPE html>、<html>、<head>+<body> - タグは通常ペア（開始と終了）で構成され、一部の空タグには終了タグがない
- 属性はタグに追加の設定を提供し、開始タグ内に記述する
- 現在はHTML5を使用しており、意味論的タグ、音声/動画などの新機能が追加されている
📝 練習問題
- 最初のウェブページを作成する： テキストエディター（またはVS Code）を開き、この章の最初のコード例をコピーして
myfirst.htmlとして保存し、ダブルクリックしてブラウザで開いてください。<h1>と<p>タグの中身を変更して自己紹介にし、保存してブラウザを更新して変更を確認してください。 - 実際のウェブページを観察する： 任意のウェブサイト（Wikipediaなど）を開き、右クリックして「ページのソースを表示」を選び、どれだけ多くのタグを認識できるか試してみましょう！