HTML

Webページの構造を作るマークアップ言語

HTMLでできること

📄

文書構造の定義

基本

見出し、段落、リストなどで文書の構造を表現

🔗

ハイパーリンク

基本

他のページやサイトへのリンクを作成

🖼️

画像・メディア

基本

画像、動画、音声を埋め込み

📝

フォーム

重要

ユーザー入力を受け取るフォームを作成

📊

テーブル

基本

表形式でデータを表示

🎯

セマンティクス

重要

意味のあるタグで検索エンジンにも優しく

HTMLとは何か？

HTML（HyperText Markup Language）は、Webページの「骨組み」を作る言語です。ブラウザは HTMLファイルを読み込んで、その指示通りに画面を表示します。

📝

マークアップ言語

テキストに「これは見出し」「これは段落」と意味を付けるための言語

🏗️

構造を定義

「ここがヘッダー」「ここが本文」というページの骨組みを作る

🎨

見た目は別

色やサイズは CSS で指定。HTMLは内容と構造だけを担当

HTMLファイルの基本構造

すべての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>

ページの「メタ情報」を入れる場所。画面には表示されないが、ブラウザや検索エンジンが使う

charset="UTF-8"

文字コードを指定。UTF-8なら日本語が文字化けしない

viewport

スマホ対応の設定。これがないとスマホで極小表示になることがある

<title>

ブラウザのタブに表示されるタイトル。検索結果にも表示される重要な要素

<body>

実際に画面に表示される内容を入れる場所。見える部分はすべてここに書く

💡 なぜこの構造が必要？

ブラウザはこの構造を読み取って「どこが設定でどこが本文か」を判断します。構造が崩れると、文字化けしたり、スマホで正しく表示されなかったりします。

タグの仕組み

<タグ名> 内容 </タグ名>

開始タグ

「ここから始まり」

内容

表示されるテキスト

終了タグ

「ここで終わり」

よく使うタグ

見出し・段落・リンク・画像

html

<!-- h1: 最も重要な見出し（ページに1つだけ） -->
<h1>大見出し</h1>

<!-- h2: 章のタイトルなど（h6まである） -->
<h2>中見出し</h2>

<!-- p: paragraph（段落）本文を囲む -->
<p>段落のテキストです。</p>

<!-- a: anchor（錨）href属性でリンク先を指定 -->
<a href="https://google.com">リンク</a>

<!-- img: 画像。終了タグ不要 -->
<!-- src=画像パス, alt=代替テキスト -->
<img src="photo.jpg" alt="写真">

プレビュー

大見出し

中見出し

段落のテキストです。

リンク

📷 photo.jpg (写真)

実例とプレビュー

見出しと段落

文書の階層構造を作る

html

<!-- 見出しはh1〜h6まで。数字が小さいほど重要 -->
<h1>大見出し</h1>
<h2>中見出し</h2>

<!-- pタグで段落を作る -->
<p>これは段落です。文章を書きます。</p>
<p>複数の段落を作れます。</p>

プレビュー

大見出し

中見出し

これは段落です。文章を書きます。

複数の段落を作れます。

なぜ見出しタグを使う？
・検索エンジンがページの構造を理解できる
・視覚障害者用の読み上げソフトがナビゲーションしやすくなる
・CSSでスタイルを一括適用しやすい

<h3>買い物リスト（順不同）</h3>
<!-- ul: unordered list（順番なしリスト） -->
<ul>
  <!-- li: list item（リストの項目） -->
  <li>りんご</li>
  <li>バナナ</li>
</ul>

<h3>手順（順番あり）</h3>
<!-- ol: ordered list（番号付きリスト） -->
<ol>
  <li>材料を用意</li>
  <li>混ぜる</li>
  <li>焼く</li>
</ol>

プレビュー

買い物リスト（順不同）

りんご
バナナ

手順（順番あり）

材料を用意
混ぜる
焼く

ulとolの違い
・ul（unordered list）：順番が関係ない一覧。買い物リストなど
・ol（ordered list）：順番が重要な一覧。手順や順位など

リンク

他のページへ移動

html

<!-- 外部サイトへのリンク -->
<a href="https://google.com">Googleへ移動</a>

<!-- 同じサイト内のリンク -->
<a href="/about">このサイトについて</a>

<!-- 新しいタブで開く -->
<a href="https://google.com" target="_blank">
  新しいタブで開く
</a>

プレビュー

Googleへ移動このサイトについて

target="_blank"を使う時の注意
セキュリティのため rel="noopener noreferrer" も一緒につけるのが推奨

テーブル（表）

データを表形式で表示

html

<!-- table: 表全体を囲む -->
<table border="1">
  <!-- thead: 表のヘッダー部分 -->
  <thead>
    <!-- tr: table row（行） -->
    <tr>
      <!-- th: table header（見出しセル） -->
      <th>名前</th>
      <th>年齢</th>
    </tr>
  </thead>
  <!-- tbody: 表の本体（データ部分） -->
  <tbody>
    <tr>
      <!-- td: table data（データセル） -->
      <td>田中</td>
      <td>25</td>
    </tr>
    <tr>
      <td>佐藤</td>
      <td>30</td>
    </tr>
  </tbody>
</table>

プレビュー

名前	年齢
田中	25
佐藤	30

テーブルの構造
・thead：表のヘッダー行（列の見出し）
・tbody：表の本体（データ行）
・tr：table row（行）
・th：table header（見出しセル）
・td：table data（データセル）

属性（Attribute）とは

<タグ名属性名="値">内容</タグ名>

属性はタグに追加情報を与える。リンク先URL、画像パス、IDなどを指定する

よく使う属性

html

<a href="https://example.com">リンク</a>
<img src="photo.jpg" alt="説明">
<div id="header">ヘッダー</div>
<p class="highlight">ハイライト</p>
<input type="text" placeholder="入力">

コードの解説

href

hyperlink referenceの略。リンク先のURLを指定

src

sourceの略。画像や動画のファイルパスを指定

alt

alternativeの略。画像が表示できない時の代替テキスト

id

ページ内で一意の識別子。CSSやJSで特定の要素を指定する時に使う

class

複数の要素に同じスタイルを適用したい時に使う。複数のclassを付けられる

type

input要素の種類を指定。text, email, password, checkboxなど多数

まとめ

覚えておくこと

• HTMLは「構造」を作る言語
• タグで内容を囲んで意味を付ける
• head は設定、body は表示内容
• 属性で追加情報を指定

次のステップ

• 要素とタグの種類を覚える
• フォームの作り方を学ぶ
• CSSでスタイルを付ける

次へ：要素とタグ