HTMLの基礎知識：タグの意味と正しい使い方

HTMLとは何か

HTMLは「HyperText Markup Language」の略称で、Webページを構成するための標準的なマークアップ言語です。すべてのHTML要素は本質的に小さな矩形ブロックであり、ブラウザがこれらのタグを解釈してユーザーに視覚的に表示します。

Webページの構成要素

一般的なWebページは以下の3つの技術で構成されます：

  • HTML（構造）
  • CSS（デザイン）
  • JavaScript（動作）

HTML文書の基本構造

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
</head>
<body>
    <!-- ここにコンテンツを記述 -->
</body>
</html>

DOCTYPE宣言の重要性

DOCTYPE宣言はブラウザに文書タイプを伝え、レンダリングモードを決定します。主に2つのモードがあります：

  • Quirks Mode（互換モード）：古いブラウザ向けのルールでレンダリング
  • Standards Mode（標準モード）：W3C標準に従ったレンダリング

head要素内の設定

文字コード

<meta charset="UTF-8">

ページリフレッシュとリダイレクト

<!-- 5秒ごとにリフレッシュ -->
<meta http-equiv="refresh" content="5">

<!-- 1秒後に指定URLへ遷移 -->
<meta http-equiv="refresh" content="1;url=https://example.com">

キーワード設定（SEO用）

<meta name="keywords" content="HTML, 学習, プログラミング">

ページ説明

<meta name="description" content="HTMLの基本的なタグとその使い方について解説します">

タイトル

<title>HTML基礎講座</title>

スタイルシートの読み込み

<!-- 外部CSS -->
<link rel="stylesheet" href="style.css">

<!-- 内部CSS -->
<style>
.example { color: blue; }
</style>

JavaScriptの読み込み

<!-- 外部JS -->
<script src="script.js"></script>

<!-- 内部JS -->
<script>
console.log("Hello World");
</script>

HTMLタグの分類

ブロックレベル要素

  • 常に新しい行から始まる
  • 幅、高さ、マージンが設定可能
  • デフォルト幅は親要素の100%
  • 例：<div>, <p>, <h1>〜<h6>, <ul>, <table>

インライン要素

  • 同じ行に配置される
  • 幅、高さはコンテンツに依存
  • 例：<span>, <a>, <label>, <img>, <strong>

よく使うHTMLタグ

段落と改行

<p>最初の段落</p>
<p>次の段落</p>
<p>改行を含む<br>テキスト</p>

リンクとアンカー

<!-- 同一タブで開く -->
<a href="https://example.com">リンク</a>

<!-- 新規タブで開く -->
<a href="https://example.com" target="_blank">リンク</a>

<!-- アンカーリンク -->
<a href="#section1">セクション1へ</a>
...
<h2 id="section1">セクション1</h2>

見出しタグ

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

選択ボックス（select）

<!-- 基本 -->
<select>
    <option value="1">東京</option>
    <option value="2" selected>大阪</option>
</select>

<!-- グループ化 -->
<select>
    <optgroup label="関東">
        <option>東京</option>
        <option>埼玉</option>
    </optgroup>
    <optgroup label="関西">
        <option>大阪</option>
        <option>京都</option>
    </optgroup>
</select>

入力フォーム（input）

<!-- テキスト入力 -->
<input type="text" placeholder="名前を入力">

<!-- パスワード -->
<input type="password" placeholder="パスワード">

<!-- チェックボックス -->
<input type="checkbox" id="agree">
<label for="agree">同意する</label>

<!-- ラジオボタン（排他選択） -->
<input type="radio" name="gender" value="male"> 男性
<input type="radio" name="gender" value="female"> 女性

<!-- ボタン -->
<input type="button" value="通常ボタン">
<input type="submit" value="送信">

リスト

<!-- 箇条書き -->
<ul>
    <li>項目1</li>
    <li>項目2</li>
</ul>

<!-- 番号付きリスト -->
<ol>
    <li>ステップ1</li>
    <li>ステップ2</li>
</ol>

<!-- 定義リスト -->
<dl>
    <dt>用語1</dt>
    <dd>説明1</dd>
    <dt>用語2</dt>
    <dd>説明2</dd>
</dl>

テーブル（表）

<table border="1">
    <thead>
        <tr>
            <th>列1</th>
            <th>列2</th>
            <th>列3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>データ1</td>
            <td>データ2</td>
            <td>データ3</td>
        </tr>
    </tbody>
</table>

セルの結合

<table border="1">
    <tr>
        <td colspan="2">横に結合</td>
        <td>通常セル</td>
    </tr>
    <tr>
        <td rowspan="2">縦に結合</td>
        <td>セルA</td>
        <td>セルB</td>
    </tr>
    <tr>
        <td>セルC</td>
        <td>セルD</td>
    </tr>
</table>

fieldsetタグ（グループ化）

<fieldset>
    <legend>利用規約</legend>
    こちらが利用規約の内容です。
</fieldset>

タグ: HTML DOCTYPE Metaタグ ブロックレベル要素 インライン要素

6月18日 20:25 投稿

ホットタグ

©2026 異端開発室