HTMLの基礎 - 完全ガイド

Posted at 2025-10-12

第1章: HTMLの基礎知識

HTMLとは

HTMLは「HyperText Markup Language」の略で、Webページを作成するための標準的なマークアップ言語です。もともとは1989年に学術論文を保存・共有するために開発されましたが、現在ではインターネット上のほぼすべてのWebページで使われています。

HTMLの役割は、文書の構造や意味を定義することです。これにより、ブラウザが内容を正しく理解して表示できるようになります。例えば、「これは見出しです」「これは段落です」「これはリンクです」といった情報をHTMLで記述することで、ブラウザはそれぞれを適切に表示してくれるんですね。

HTMLファイルを作成する

HTMLファイルは、拡張子が .html または .htm のテキストファイルです。メモ帳やテキストエディタで作成でき、特別なソフトウェアは必要ありません。ファイルを .html という拡張子で保存するだけで、ブラウザがHTMLファイルとして認識してくれます。

実際にこの記事を読むときにはHTMLファイルを編集しながら手を動かすとよいです：

テキストエディタ（メモ帳、VSCodeなど）を開く
HTMLコードを記述する
ファイル名を index.html などで保存する
保存したファイルをブラウザで開く

MDNとは

MDN（Mozilla Developer Network）は、Web技術に関する包括的なドキュメントを提供しているサイトです。HTMLをはじめ、CSS、JavaScriptなどの信頼性の高いリファレンスとして、世界中の開発者に広く利用されています。

MDNの特徴は以下の通りです：

正確で最新の情報が提供されている
日本語を含む多言語対応
初心者から上級者まで対応した説明
豊富なコード例とデモ

公式サイト: https://developer.mozilla.org/ja/docs/Web

わからないことがあったら、まずMDNで調べる習慣をつけると良いでしょう。

第2章: HTMLの構造を理解する

HTML文書の全体構造

HTML文書は階層構造になっています。以下の図で、HTML文書がどのように構成されているか見てみましょう。

この構造は、すべてのHTML文書に共通する基本的な骨組みです。それぞれの要素について詳しく見ていきましょう。

DOCTYPE宣言

<!DOCTYPE html>

DOCTYPE宣言は、HTML文書の最初に必ず記述する宣言文です。これは「この文書はHTML5で書かれています」ということをブラウザに伝える役割があります。

なぜ必要なのか？ブラウザは複数のHTMLバージョンに対応しているため、どのバージョンで解釈すべきか明示する必要があるんですね。DOCTYPE宣言がないと、ブラウザが古い表示モード（互換モード）で動作してしまい、意図しない表示になることがあります。

HTML5では、DOCTYPE宣言は非常にシンプルになりました。昔のHTMLでは長く複雑な宣言が必要でしたが、今は <!DOCTYPE html> だけで済みます。

html要素

<html lang="ja">
  <!-- ここに他の要素が入る -->
</html>

html要素は、HTML文書全体を囲む最上位の要素です。すべてのHTML要素は、この <html> タグの中に配置されます。

lang="ja" という属性は、このページが日本語で書かれていることを示しています。これにより以下のメリットがあります：

検索エンジンが言語を正しく認識できる
音声読み上げソフトが適切な発音で読み上げられる
ブラウザが適切なフォントを選択できる

英語のページなら lang="en"、中国語なら lang="zh" のように指定します。

head要素

head要素は、文書のメタデータ（データについてのデータ）を含む部分です。ここに記述された内容は、基本的にブラウザの画面には直接表示されませんが、ページの設定や情報を定義する重要な役割があります。

meta charset

<meta charset="UTF-8" />

文字エンコーディングをUTF-8に設定しています。エンコーディングとは、文字をコンピュータが理解できる形式に変換する方法のことです。

UTF-8を指定することで、日本語、英語、中国語、アラビア語など、世界中のあらゆる言語を正しく表示できます。この設定がないと、日本語が文字化けしてしまうことがあるため、必ず記述しましょう。

meta viewport

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

この設定は、レスポンシブデザイン（画面サイズに応じて表示を最適化する仕組み）のために必要です。

各パラメータの意味：

width=device-width: 表示幅をデバイスの幅に合わせる
initial-scale=1.0: 初期表示倍率を100%にする

これにより、スマートフォン、タブレット、PCなど、様々な画面サイズのデバイスで適切に表示されるようになります。

title要素

<title>ニワトリ</title>

title要素は、ページのタイトルを定義します。このタイトルは以下の場所に表示されます：

ブラウザのタブ
ブックマークのタイトル
検索エンジンの検索結果

SEO（検索エンジン最適化）の観点からも重要な要素なので、ページの内容を適切に表すタイトルをつけましょう。

body要素

<body>
  <!-- 実際にブラウザ画面に表示されるコンテンツ -->
</body>

body要素には、実際にブラウザの画面に表示されるすべてのコンテンツを記述します。見出し、段落、画像、リンクなど、ユーザーが目にするすべての要素がここに配置されます。

HTML5について

HTML5は、HTMLの最新の主要バージョンです。2014年に正式勧告され、現在のWeb標準として広く採用されています。

HTML5の主な特徴：

シンプルで覚えやすい構文
新しいセマンティック要素の追加（後述）
動画や音声を直接埋め込める機能
グラフィックを描画する機能

ブラウザは、このHTML5の標準仕様に従って実装されています。そのため、標準に沿ったHTMLを書けば、どのブラウザでも同じように表示されるんですね。

第3章: 基本的な要素

HTMLタグの基本

HTMLタグは、要素を定義するために使用します。タグは開始タグと終了タグのペアで構成され、その間にコンテンツを挟みます。

<タグ名>コンテンツ</タグ名>

代表的なタグを見ていきましょう。

b要素

b要素は、テキストを太字にするための要素です。ただし、これは見た目を変更するだけで、特別な意味は持ちません。

<b>この文字は太字になります</b>

重要な内容を強調したい場合は、後述する <strong> 要素の使用を検討しましょう。

p要素

p要素は、段落（paragraph）を表すための要素です。文章のまとまりを示すために使用します。

<p>これは1つの段落です。</p>
<p>これは別の段落です。</p>

p要素を使うことで、段落間に適切な余白が自動的に入り、読みやすい文章になります。

見出し要素

見出し要素は、文章の構成を定義するための重要な要素です。h1からh6まで6段階の見出しがあり、数字が小さいほど重要度が高くなります。

<h1>最も重要な見出し（ページタイトル）</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
<h5>さらに小さい見出し</h5>
<h6>最も小さい見出し</h6>

見出しの階層構造を図で表すと、以下のようになります：

重要なポイント：

h1はページに1つだけ使用することが推奨されます
見出しレベルを飛ばさない（h1の次にh3を使うなど）
見出しの階層を論理的に構成する

リスト要素

リストには、順序なしリスト（ul）と順序付きリスト（ol）の2種類があります。

ul（順序なしリスト）

順序なしリストは、項目の順番に意味がない場合に使用します。箇条書きで表示されます。

<ul>
  <li>りんご</li>
  <li>バナナ</li>
  <li>オレンジ</li>
</ul>

表示結果：

りんご
バナナ
オレンジ

ol（順序付きリスト）

順序付きリストは、手順や順位など、順番が重要な場合に使用します。番号付きで表示されます。

<ol>
  <li>材料を準備する</li>
  <li>材料を切る</li>
  <li>炒める</li>
</ol>

表示結果：

材料を準備する
材料を切る
炒める

使い分けの基準：

順番に意味がある → <ol> を使う
順番に意味がない → <ul> を使う

アンカー要素（リンク）

アンカー要素は、他のページやリソースへのリンクを作成するための要素です。<a> タグを使用し、href 属性でリンク先のURLを指定します。

<a href="https://example.com">リンクテキスト</a>

実用例：

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

<!-- 同じサイト内の別ページへのリンク -->
<a href="about.html">このサイトについて</a>

<!-- ページ内の特定の場所へのリンク -->
<a href="#section1">セクション1へ移動</a>

リンクはWebページの「ハイパーテキスト」としての性質を実現する最も重要な要素です。複数のページを相互に結びつけることで、Webサイト全体が構築されます。

画像埋め込み要素

画像を表示するには <img> 要素を使用します。この要素には終了タグがなく、自己完結型の要素です。

<img src="画像のパス" alt="画像の説明" />

重要な属性：

src属性: 画像ファイルのパスを指定します。相対パスまたは絶対パスで指定できます。

<!-- 相対パス -->
<img src="images/cat.jpg" alt="猫の写真" />

<!-- 絶対パス -->
<img src="https://example.com/images/cat.jpg" alt="猫の写真" />

alt属性: 画像が表示されない場合の代替テキストです。この属性は非常に重要で、以下の役割があります：

画像が読み込めない場合にテキストが表示される
スクリーンリーダー（視覚障害のある方が使う音声読み上げソフト）が内容を読み上げる
検索エンジンが画像の内容を理解する

alt属性は必ず指定しましょう。アクセシビリティとSEOの両面で重要です。

その他のテキスト関連要素

hr要素

水平線（horizontal rule）を作成するための要素です。セクションの区切りなどに使用します。

<p>最初のセクション</p>
<hr />
<p>次のセクション</p>

br要素

改行（break）を挿入するための要素です。

<p>
  1行目<br />
  2行目<br />
  3行目
</p>

重要な注意点：段落を分けるために <br> を使うのは適切ではありません。段落を分けたい場合は、複数の <p> 要素を使いましょう。

<!-- 悪い例 -->
<p>
  段落1<br /><br />
  段落2
</p>

<!-- 良い例 -->
<p>段落1</p>
<p>段落2</p>

sup要素とsub要素

sup要素は上付き文字を表示します。数式の指数や序数などに使用します。

<p>2の3乗は2<sup>3</sup> = 8です</p>
<p>1<sup>st</sup> place（1位）</p>

sub要素は下付き文字を表示します。化学式などに使用します。

<p>水の化学式はH<sub>2</sub>Oです</p>

HTMLエンティティ

HTMLでは、特定の文字が特別な意味を持つため、そのまま記述できない場合があります。そのような文字を表示するために、HTMLエンティティを使用します。

主なHTMLエンティティ：

表示したい文字	エンティティ	説明
<	`<`	小なり記号（less than）
>	`>`	大なり記号（greater than）
&	`&`	アンパサンド
"	`"`	ダブルクォート
'	`'`	シングルクォート
（空白）	` `	ノーブレークスペース
©	`©`	コピーライト記号

使用例：

<p>HTMLタグは &lt;タグ名&gt; のように書きます</p>
<p>&copy; 2025 会社名</p>

HTMLエンティティは、予約済み文字や、キーボードから入力しにくい特殊文字を表現するときに使います。

第4章: 要素の分類と使い分け

インライン要素とブロック要素

HTML要素は、表示の仕方によって大きく2つのカテゴリに分類されます。この違いを理解することは、HTMLでレイアウトを組む上で非常に重要です。

ブロック要素

ブロック要素は、新しい行から始まり、利用可能な幅全体を占めます。前後の要素とは別の行に表示されます。

主なブロック要素：

<div> - 汎用的なコンテナ
<p> - 段落
<h1> 〜 <h6> - 見出し
<ul>, <ol>, <li> - リスト
<table> - テーブル
<header>, <footer>, <section> - セマンティック要素

インライン要素

インライン要素は、テキストの一部として表示され、他の要素と同じ行に配置されます。必要な幅のみを占めます。

主なインライン要素：

<a> - リンク
<span> - 汎用的なインライン要素
<strong> - 重要な強調
<em> - 強調
<img> - 画像
<b>, <i> - 見た目の変更

視覚的な違いを例で見てみましょう：

<!-- ブロック要素の例 -->
<p>これは段落1です</p>
<p>これは段落2です</p>
<!-- 各段落は新しい行から始まります -->

<!-- インライン要素の例 -->
<p>これは<strong>重要な</strong>テキストで、<a href="#">リンク</a>もあります</p>
<!-- strong と a は同じ行に表示されます -->

div要素

div要素は、「コンテンツ分割要素」と呼ばれる汎用的なブロック要素です。複数の要素をグループ化するために使用します。

<div>
  <h2>セクションタイトル</h2>
  <p>セクションの内容</p>
  <p>もう一つの段落</p>
</div>

div要素の主な用途：

複数の要素をグループ化してCSSでスタイルを適用する
JavaScriptで操作する対象をまとめる
レイアウトの構造を作る

ただし、意味のある要素（後述するセマンティック要素）が存在する場合は、そちらを優先して使いましょう。

span要素

span要素は、インライン要素をグループ化するための汎用的な要素です。文書内の特定の部分にスタイルを適用したい場合などに使用します。

<p>この文章の<span style="color: red;">この部分だけ</span>赤色にしたい</p>

span要素の使用例：

テキストの一部だけ色を変える
特定の単語にクラスを付けてCSSで装飾する
JavaScriptで特定の文字列を操作する

第5章: セマンティックHTML

セマンティックHTMLとは

セマンティック（semantic）とは「意味的な」という意味です。セマンティックHTMLとは、要素に意味を持たせることで、文書の構造を明確にするアプローチです。

例を見てみましょう：

<!-- 非セマンティックな書き方 -->
<div id="header">
  <div id="nav">...</div>
</div>
<div id="content">...</div>
<div id="sidebar">...</div>
<div id="footer">...</div>

<!-- セマンティックな書き方 -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<aside>...</aside>
<footer>...</footer>

なぜセマンティックHTMLが重要なのか

セマンティックHTMLには、以下のような利点があります：

1. 可読性の向上

コードを見ただけで、どの部分が何を表しているか理解しやすくなります。<div id="header"> よりも <header> の方が、その役割が一目瞭然ですね。

2. SEOへの好影響

検索エンジンのクローラーは、セマンティック要素を使うことでページの構造を正しく理解できます。例えば、<main> 要素で囲まれた部分を「このページの主要なコンテンツ」と認識し、検索結果に適切に反映してくれます。

3. アクセシビリティの向上

スクリーンリーダーなどの支援技術が、ページの構造を正しく解釈できるようになります。視覚障害のあるユーザーも、ページのナビゲーションやコンテンツの理解がしやすくなります。

4. メンテナンス性の向上

チーム開発や、後から自分でコードを見返す際に、構造が理解しやすくなります。

主要なセマンティック要素

header要素

ページやセクションのヘッダー部分（上部の領域）を表します。通常、サイトのロゴ、タイトル、ナビゲーションなどを含みます。

<header>
  <h1>サイト名</h1>
  <nav>
    <ul>
      <li><a href="/">ホーム</a></li>
      <li><a href="/about">会社概要</a></li>
    </ul>
  </nav>
</header>

nav要素

ナビゲーションリンクのセクションを表します。サイト内の主要なページへのリンクや、目次などに使用します。

<nav>
  <ul>
    <li><a href="#section1">セクション1</a></li>
    <li><a href="#section2">セクション2</a></li>
    <li><a href="#section3">セクション3</a></li>
  </ul>
</nav>

すべてのリンクのグループをnavで囲む必要はありません。主要なナビゲーションに使用しましょう。

main要素

ページの主要なコンテンツを表します。ページに1つだけ配置し、header、footer、aside、navなどの繰り返し表示される要素は含めません。

<main>
  <h1>ページタイトル</h1>
  <p>メインコンテンツ</p>
</main>

main要素で主要コンテンツを明示することで、検索エンジンやスクリーンリーダーが重要な部分を特定しやすくなります。

article要素

独立した自己完結型のコンテンツを表します。ブログ記事、ニュース記事、フォーラムの投稿など、それ単体で意味が通じるコンテンツに使用します。

<article>
  <h2>記事タイトル</h2>
  <p>記事の内容...</p>
  <footer>投稿日: 2025年10月12日</footer>
</article>

section要素

文書内の一般的なセクションを表します。他のより具体的なセマンティック要素（article、nav、asideなど）が当てはまらない場合に使用します。

<section>
  <h2>セクションタイトル</h2>
  <p>セクションの内容...</p>
</section>

aside要素

メインコンテンツとは間接的な関連のある補足情報を表します。サイドバー、関連記事、広告などに使用します。

<aside>
  <h3>関連記事</h3>
  <ul>
    <li><a href="#">関連記事1</a></li>
    <li><a href="#">関連記事2</a></li>
  </ul>
</aside>

footer要素

ページやセクションのフッター部分（下部の領域）を表します。著作権情報、連絡先、サイトマップなどを含みます。

<footer>
  <p>&copy; 2025 会社名. All rights reserved.</p>
  <nav>
    <a href="/privacy">プライバシーポリシー</a>
    <a href="/terms">利用規約</a>
  </nav>
</footer>

time要素

日付や時間を機械可読な形式で表します。

<time datetime="2025-10-12">2025年10月12日</time>
<time datetime="2025-10-12T14:30">2025年10月12日 14:30</time>

datetime属性に機械可読な形式を指定することで、検索エンジンやブラウザが日付を正しく認識できます。

figure要素

画像、図表、コードスニペットなど、メインコンテンツから参照される自己完結型のコンテンツを表します。

<figure>
  <img src="chart.png" alt="売上推移グラフ" />
  <figcaption>図1: 2025年の売上推移</figcaption>
</figure>

典型的なページ構造

セマンティック要素を使った典型的なページ構造は以下のようになります：

<!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>
  <header>
    <h1>サイト名</h1>
    <nav>
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社概要</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <h2>記事タイトル</h2>
      <section>
        <h3>セクション1</h3>
        <p>内容...</p>
      </section>
      <section>
        <h3>セクション2</h3>
        <p>内容...</p>
      </section>
    </article>

    <aside>
      <h3>関連情報</h3>
      <p>補足情報...</p>
    </aside>
  </main>

  <footer>
    <p>&copy; 2025 会社名</p>
  </footer>
</body>
</html>

divばかり使っているHTMLを書かない

初心者の方がやりがちなのは、すべての要素をdivで囲んでしまうことです。

<!-- 悪い例 -->
<div class="header">
  <div class="nav">...</div>
</div>
<div class="main">...</div>
<div class="footer">...</div>

<!-- 良い例 -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

適切なセマンティック要素を使うことで、コードの品質が大きく向上します。最初は慣れないかもしれませんが、意識して使っていくうちに自然と身につきますよ。

第6章: テーブルとフォーム

HTMLテーブルとは

テーブルは、構造化されたデータをわかりやすく表示するための要素です。表形式でデータを整理することで、情報の比較や理解が容易になります。

テーブルの構造を図で見てみましょう：

テーブルを構成する要素

tr要素（Table Row）

テーブルの行（横の列）を定義します。すべてのセルは、tr要素の中に配置されます。

<table>
  <tr>
    <!-- この中にセルを配置 -->
  </tr>
</table>

th要素（Table Header）

テーブルのヘッダーセル（見出し）を定義します。

特徴：

デフォルトで太字表示される
デフォルトで中央揃えになる
スクリーンリーダーがヘッダーとして認識する

<tr>
  <th>名前</th>
  <th>年齢</th>
  <th>職業</th>
</tr>

td要素（Table Data）

テーブルの通常のデータセルを定義します。

特徴：

デフォルトで通常の太さで表示される
デフォルトで左揃えになる
実際のデータを格納する

<tr>
  <td>田中太郎</td>
  <td>25</td>
  <td>エンジニア</td>
</tr>

テーブルのグループ化要素

thead要素（Table Head）

テーブルのヘッダー行をグループ化します。列の見出しを含む部分です。

メリット：

長いテーブルを印刷する際、各ページにヘッダーを繰り返し表示できる
スクリーンリーダーでの読み上げが改善される
CSSでスタイリングしやすくなる

<thead>
  <tr>
    <th>商品名</th>
    <th>価格</th>
    <th>在庫</th>
  </tr>
</thead>

tbody要素（Table Body）

テーブルのメインデータ行をグループ化します。実際のデータを含む部分です。

メリット：

データ部分を明確に区別できる
大きなテーブルでスクロール処理が可能になる
CSSで行ごとに異なるスタイルを適用しやすい

<tbody>
  <tr>
    <td>りんご</td>
    <td>100円</td>
    <td>50個</td>
  </tr>
  <tr>
    <td>バナナ</td>
    <td>150円</td>
    <td>30個</td>
  </tr>
</tbody>

tfoot要素（Table Footer）

テーブルの集計行や注釈をグループ化します。合計値、平均値、注意事項などを含めます。

<tfoot>
  <tr>
    <td>合計</td>
    <td>250円</td>
    <td>80個</td>
  </tr>
</tfoot>

完全なテーブルの例

すべての要素を組み合わせた実用的な例を見てみましょう：

<table>
  <thead>
    <tr>
      <th>商品名</th>
      <th>単価</th>
      <th>数量</th>
      <th>小計</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>りんご</td>
      <td>100円</td>
      <td>3個</td>
      <td>300円</td>
    </tr>
    <tr>
      <td>バナナ</td>
      <td>150円</td>
      <td>2個</td>
      <td>300円</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="3">合計</td>
      <td>600円</td>
    </tr>
  </tfoot>
</table>

注目ポイント：colspan="3" という属性を使うことで、セルを3列分結合しています。これにより、「合計」のセルが3列分の幅を占めるようになります。

テーブルのメリット

コードの可読性向上 - ヘッダー、データ、フッターが明確に区別される
セマンティック - テーブルの各部分の意味が明確になる
アクセシビリティ - スクリーンリーダーでの理解が向上する
スタイリング - CSSでの装飾が柔軟にできる
メンテナンス性 - コードの構造が整理され、編集しやすい

テーブルを構成する要素は多いですが、すべて覚える必要はありません。基本的な構造を理解し、必要に応じてMDNなどで調べながら使っていけば大丈夫です。

HTMLフォームとは

フォームは、ユーザーから情報を収集するためのインターフェースを提供する重要な要素です。検索ボックス、ログインフォーム、アンケート、お問い合わせフォームなど、Webサイトの様々な場面で利用されます。

フォームの最も重要な役割は、入力されたデータをどこに送信するか指定できることです。

action属性

action属性は、フォームが送信されたときにデータを送信する先のURLを指定します。

<form action="https://www.google.com/search" method="GET">
  <input type="text" name="q" />
  <button type="submit">検索</button>
</form>

この例では、フォームを送信すると入力内容がGoogleの検索ページに送られ、検索結果が表示されます。method属性でGETを指定しているので、検索クエリがURLに含まれる形で送信されます。

label要素の重要性

label要素は、フォーム入力フィールドにラベル（説明）を関連付けるための要素です。これにはいくつかの重要なメリットがあります：

アクセシビリティの向上 - スクリーンリーダーが入力フィールドの目的を読み上げる
使いやすさの向上 - ラベルをクリックしても対応する入力フィールドにフォーカスが移動する
視覚的な明確さ - 各入力フィールドの目的が明確になる

<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username" />

for 属性と id 属性を一致させることで、labelと入力フィールドが関連付けられます。これは「このラベルは、このIDを持つ要素のためのものです」という意味になります。

button要素

button要素は、フォームの送信やリセットを行うためのボタンを作成します。

<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button">通常のボタン</button>

type属性の種類：

submit - フォームを送信する（フォーム内のbuttonのデフォルト）
reset - フォームの入力内容をリセットする
button - 特別な動作をしない通常のボタン（JavaScriptで制御）

選択肢を提供する要素

チェックボックス

チェックボックスは、複数の項目を選択できるようにするための要素です。

<label>
  <input type="checkbox" name="hobby" value="reading" />
  読書
</label>
<label>
  <input type="checkbox" name="hobby" value="music" />
  音楽
</label>
<label>
  <input type="checkbox" name="hobby" value="sports" />
  スポーツ
</label>

チェックボックスの特徴：

複数選択が可能
チェックされた項目のみが送信される
同じname属性を持つ複数のチェックボックスで、複数の値を送信できる

ラジオボタン

ラジオボタンは、複数の選択肢から1つだけ選択できるようにするための要素です。

<label>
  <input type="radio" name="gender" value="male" />
  男性
</label>
<label>
  <input type="radio" name="gender" value="female" />
  女性
</label>
<label>
  <input type="radio" name="gender" value="other" />
  その他
</label>

ラジオボタンの特徴：

同じname属性を持つグループの中で、1つだけ選択できる
一度選択すると、必ずどれか1つが選ばれた状態になる

セレクトボックス（ドロップダウン）

セレクトボックスは、ドロップダウンメニューで選択肢を表示します。選択肢が多い場合に便利です。

<label for="country">国を選択:</label>
<select id="country" name="country">
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
  <option value="fr">フランス</option>
</select>

セレクトボックスの特徴：

選択肢が多くてもスペースを取らない
デフォルトで最初のoptionが選択される
selected 属性で初期選択を設定できる

name属性の役割

name属性は、フォームデータのキー（名前）として使用されます。サーバーに送信されるデータは、「name属性の値 = 入力された値」という形式になります。

<form action="/submit" method="POST">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username" />
  
  <label for="password">パスワード:</label>
  <input type="password" id="password" name="password" />
  
  <button type="submit">ログイン</button>
</form>

このフォームを送信すると、以下のようなデータがサーバーに送られます：

username=入力されたユーザー名&password=入力されたパスワード

name属性がないと、データが送信されないので注意しましょう。

range要素

range要素は、数値の範囲を選択するためのスライダーを提供します。

<label for="volume">音量:</label>
<input type="range" id="volume" name="volume" min="0" max="100" step="1" />

属性の説明：

min - 最小値
max - 最大値
step - 値を変更する際の刻み幅（この例では1ずつ変化）

スライダーは視覚的に分かりやすく、直感的に操作できるため、音量調整、明るさ調整、評価（1〜5など）といった用途に適しています。

実用的なフォームの例

これまで学んだ要素を組み合わせて、実用的なお問い合わせフォームを作ってみましょう：

<form action="/contact" method="POST">
  <h2>お問い合わせフォーム</h2>
  
  <label for="name">お名前:</label>
  <input type="text" id="name" name="name" required />
  
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" required />
  
  <label for="category">お問い合わせ種別:</label>
  <select id="category" name="category">
    <option value="product">製品について</option>
    <option value="support">サポート</option>
    <option value="other">その他</option>
  </select>
  
  <label for="message">メッセージ:</label>
  <textarea id="message" name="message" rows="5" required></textarea>
  
  <button type="submit">送信</button>
</form>

フォームは、Webサイトとユーザーのインタラクションの中心となる重要な要素です。適切にラベルを設定し、使いやすいフォームを作ることを心がけましょう。

まとめ

この記事では、HTMLの基礎から実用的な要素まで、幅広く解説してきました。HTMLは、Webページを作るための基盤となる技術です。

重要なポイントを振り返りましょう：

HTMLの構造 - DOCTYPE、html、head、bodyという基本構造を理解する
セマンティックHTML - 意味のある要素を使って、構造を明確にする
アクセシビリティ - すべてのユーザーが利用できるHTMLを書く
適切な要素選択 - それぞれの要素の意味を理解し、適切に使い分ける

HTMLは奥が深い技術ですが、基本をしっかり押さえれば、あとは実践を通じて自然と身についていきます。分からないことがあれば、MDNを参照しながら、一つずつ学んでいきましょう。

それでは、HTMLを使った素晴らしいWebページ作りを楽しんでください！

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up