目次
HTMLとは？
HTML（HyperText Markup Language）とは、Webページの「骨格」を作るための言語です。プログラミング言語ではなく、マークアップ言語と呼ばれる種類に属します。
「マークアップ」とは、文章に「これは見出しです」「これはリンクです」といった意味づけ（タグ）をつけることを指します。ブラウザはHTMLのタグを読み取り、画面上に文字・画像・リンクなどを表示します。
ポイント: HTMLはWebページの「内容と構造」を定義します。見た目（色・フォント・レイアウト）はCSSが担当します。
HTMLはどこで使われている？
あなたが今見ているこのページも、すべてHTMLで作られています。ブラウザで「右クリック → ページのソースを表示」すると、HTMLのコードを確認できます。
- Webサイト・ブログ：コーポレートサイト、ECサイト、個人ブログ
- Webアプリ：Gmail、YouTube、SNS
- メールマガジン：HTMLメールの本文
HTMLとCSSとJavaScriptの違い
Webページは3つの言語で構成されています。
| 言語 | 役割 | たとえ |
|---|---|---|
| HTML | ページの構造・内容 | 家の骨格・間取り |
| CSS | 見た目・デザイン | 内装・壁紙・色 |
| JavaScript | 動き・機能 | 電気・自動ドア |
HTMLだけでも表示できますが、CSSなしでは無骨な白黒ページになります。
HTMLの基本構造
HTMLファイルの最低限の構造は以下のとおりです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
</head>
<body>
<h1>見出し</h1>
<p>段落テキスト</p>
</body>
</html>
各部分の意味
| 要素 | 説明 |
|---|---|
<!DOCTYPE html> |
HTML5文書であることをブラウザに伝える宣言 |
<html lang="ja"> |
HTML文書全体を囲む。lang="ja"で日本語と指定 |
<head> |
ブラウザに伝える情報（タイトル・文字コードなど）。画面には表示されない |
<meta charset="UTF-8"> |
文字コードの指定。日本語を正しく表示するために必須 |
<title> |
ブラウザのタブやGoogle検索結果に表示されるタイトル |
<body> |
実際にブラウザに表示される内容をここに書く |
HTMLタグとは？
HTMLはすべてタグで構成されています。タグは<と>で囲んで書き、多くの場合開始タグと終了タグがセットになります。
<p>これは段落です。</p>
<p>：開始タグ</p>：終了タグ（/がつく）- 開始〜終了タグの間が「内容」
自己終了タグ（単独タグ）
終了タグが不要なタグもあります。
<br> <!-- 改行 -->
<img src="photo.jpg" alt="写真"> <!-- 画像 -->
<hr> <!-- 水平線 -->
よく使うHTMLタグ一覧
文章・見出し
<h1>最大見出し（ページに1つ）</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<p>段落テキスト</p>
<strong>強調（太字）</strong>
<em>強調（斜体）</em>
リンク・画像
<!-- リンク -->
<a href="https://example.com">リンクテキスト</a>
<!-- 別タブで開く -->
<a href="https://example.com" target="_blank" rel="noopener">外部リンク</a>
<!-- 画像 -->
<img src="image.jpg" alt="画像の説明">
リスト
<!-- 箇条書き -->
<ul>
<li>項目1</li>
<li>項目2</li>
</ul>
<!-- 番号付きリスト -->
<ol>
<li>手順1</li>
<li>手順2</li>
</ol>
構造タグ（セクション）
<header>ヘッダー</header>
<nav>ナビゲーション</nav>
<main>メインコンテンツ</main>
<article>記事コンテンツ</article>
<section>セクション</section>
<aside>サイドバー</aside>
<footer>フッター</footer>
属性とは？
タグに追加情報を付け加えるものが属性（attribute）です。
<a href="https://example.com" target="_blank">リンク</a>
href="..."：リンク先URL（hrefが属性名、URLが属性値）target="_blank"：別タブで開く
<img src="photo.jpg" alt="自然の風景">
src="..."：画像ファイルのパスalt="..."：画像が表示されないときの代替テキスト（SEO・アクセシビリティに重要）
HTMLを書いてみよう
テキストエディタ（VSCodeなど）を開き、以下を貼り付けてindex.htmlとして保存し、ブラウザで開いてみてください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>はじめてのHTML</title>
</head>
<body>
<h1>こんにちは！</h1>
<p>これは私の最初のHTMLページです。</p>
<a href="https://awcs.org">Webサイト制作ノートへ</a>
</body>
</html>
ブラウザに「こんにちは！」と表示されれば成功です。
HTMLを学ぶ順番
- 基本構造（
html/head/body） - テキスト系タグ（
h1〜h6/p/strong） - リンク・画像（
a/img） - リスト・テーブル（
ul/ol/table） - フォーム（
form/input/button） - セクション構造（
header/main/footer） - CSSと組み合わせる
基本タグを20個覚えればWebページは作れます。焦らず一つひとつ試してみましょう。
まとめ
- HTMLとはWebページの構造と内容を定義するマークアップ言語
- タグで文章に意味をつけることで、ブラウザが正しく表示できる
- CSS（見た目）・JavaScript（動き）と組み合わせてWebページが完成する
- 基本構造は
<!DOCTYPE html>→html→head・bodyの入れ子
HTMLの基本を理解したら、次はよく使うHTMLタグ一覧も確認してみてください。
