LTech

HTMLリファレンス

HTMLの主要なタグと使用例を確認できます。

HTML基本タグ フォーム関連タグ テーブルタグ セマンティックタグ メタ情報とヘッドタグ

HTML基本タグ

<html>

HTMLドキュメントのルート要素です。

使用例：

<html lang="ja">
  <head>...</head>
  <body>...</body>
</html>

属性：

  • lang - ドキュメントの言語を指定（例: "ja", "en"）

<head>

ドキュメントのメタデータを含む要素です。

使用例：

<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>

ウェブページの表示コンテンツを含む要素です。

使用例：

<body>
  <h1>見出し</h1>
  <p>本文テキスト</p>
</body>

<h1> - <h6>

見出しを表すタグです。h1が最も重要なレベル、h6が最も重要度の低いレベルです。

使用例：

<h1>メインタイトル</h1>
<h2>サブタイトル</h2>
<h3>セクションタイトル</h3>

<p>

段落を表すタグです。

使用例：

<p>これは段落のテキストです。複数行に渡るテキストを表示する場合に使用します。</p>

<a>

ハイパーリンクを作成するタグです。

使用例：

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

主要な属性：

  • href - リンク先のURL
  • target - リンクの開き方（_blank: 新しいタブ、_self: 同じタブ）

フォーム関連タグ

<form>

フォームを作成するためのコンテナ要素です。

使用例：

<form action="/submit" method="post">
  <!-- フォーム要素 -->
  <input type="text" name="username">
  <button type="submit">送信</button>
</form>

主要な属性：

  • action - フォームデータの送信先URL
  • method - フォームの送信方法（get または post）
  • enctype - フォームデータのエンコード方式（特にファイルアップロード時に重要）

<input>

ユーザー入力を受け付けるフォーム要素です。

使用例：

<input type="text" name="username" placeholder="ユーザー名を入力">

主要な属性：

  • type - 入力タイプ（text, password, email, checkbox, radio, file, date, number など）
  • name - 入力フィールドの名前
  • value - 初期値
  • placeholder - 入力例や説明
  • required - 必須項目として指定
  • min, max - 数値や日付の最小値/最大値
  • pattern - 入力値の検証に使用する正規表現

<textarea>

複数行のテキスト入力欄を作成します。

使用例：

<textarea name="message" rows="5" cols="30" placeholder="メッセージを入力してください"></textarea>

主要な属性：

  • name - 入力フィールドの名前
  • rows - 表示する行数
  • cols - 表示する列数（文字数）
  • placeholder - 入力例や説明
  • required - 必須項目として指定

<select>

ドロップダウンリスト（プルダウンメニュー）を作成します。

使用例：

<select name="prefecture">
  <option value="">選択してください</option>
  <option value="tokyo">東京都</option>
  <option value="osaka">大阪府</option>
  <option value="kyoto">京都府</option>
</select>

主要な属性：

  • name - セレクトボックスの名前
  • multiple - 複数選択を許可する
  • size - 一度に表示する項目数
  • required - 必須項目として指定

<option>

セレクトボックス内の選択肢を定義します。

使用例：

<option value="tokyo" selected>東京都</option>

主要な属性：

  • value - 選択肢の値
  • selected - 初期選択状態にする
  • disabled - 選択不可にする

<label>

フォーム要素にラベルを付けます。アクセシビリティ向上に重要です。

使用例：

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

主要な属性：

  • for - 関連付けるフォーム要素のid

<button>

クリック可能なボタンを作成します。

使用例：

<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button" onclick="doSomething()">クリック</button>

主要な属性：

  • type - ボタンの種類（submit, reset, button）
  • disabled - ボタンを無効化

<fieldset>

関連するフォーム要素をグループ化します。

使用例：

<fieldset>
  <legend>個人情報</legend>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name">
  <label for="email">メール:</label>
  <input type="email" id="email" name="email">
</fieldset>

<legend>

fieldsetのキャプション（タイトル）を定義します。

使用例：

<fieldset>
  <legend>配送先情報</legend>
  <!-- フォーム要素 -->
</fieldset>

テーブルタグ

<table>

表（テーブル）を作成するためのコンテナ要素です。

使用例：

<table>
  <thead>
    <tr>
      <th>見出し1</th>
      <th>見出し2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </tbody>
</table>

<tr>

テーブルの行（Table Row）を定義します。

使用例：

<tr>
  <td>セル1</td>
  <td>セル2</td>
</tr>

<th>

テーブルの見出しセル（Table Header）を定義します。

使用例：

<th>見出し</th>

主要な属性：

  • colspan - セルが横方向に占める列数
  • rowspan - セルが縦方向に占める行数
  • scope - 見出しが関連付けられる方向（row または col）

<td>

テーブルのデータセル（Table Data）を定義します。

使用例：

<td>データ</td>

主要な属性：

  • colspan - セルが横方向に占める列数
  • rowspan - セルが縦方向に占める行数

セマンティックタグ

<header>

ページやセクションのヘッダー部分を表します。

使用例：

<header>
  <h1>ウェブサイトのタイトル</h1>
  <nav>
    <ul>
      <li><a href="#">ホーム</a></li>
      <li><a href="#">商品</a></li>
    </ul>
  </nav>
</header>

<nav>

ナビゲーションリンクのセクションを表します。

使用例：

<nav>
  <ul>
    <li><a href="/">ホーム</a></li>
    <li><a href="/about">会社概要</a></li>
    <li><a href="/contact">お問い合わせ</a></li>
  </ul>
</nav>

<main>

ドキュメントの主要なコンテンツを表します。

使用例：

<main>
  <article>
    <h1>記事のタイトル</h1>
    <p>記事の本文...</p>
  </article>
</main>

<article>

独立した記事やコンテンツを表します。

使用例：

<article>
  <h2>ブログ記事のタイトル</h2>
  <p>投稿日: 2025年5月1日</p>
  <p>記事の本文...</p>
</article>

<footer>

ページやセクションのフッター部分を表します。

使用例：

<footer>
  <p>© 2025 サンプルサイト. All rights reserved.</p>
  <address>
    連絡先: info@example.com
  </address>
</footer>

ポイント：

  • <footer> はページ全体の最後だけでなく、各セクションや <article> の末尾にも使えます
  • 著作権情報、連絡先、SNSリンクなどをまとめるのに適しています

<section>

1つの意味的なまとまり（トピック）を表します。

使用例：

<section>
  <h2>最新のお知らせ</h2>
  <p>イベント情報を更新しました。</p>
</section>

ポイント：

  • 見出し（<h2> など）と一緒に使うのが基本です
  • ニュース、プロフィール、サービス紹介などの特定のトピックを持つコンテンツをグループ化します
  • 単なるスタイリングのためのグループ化には <div> を使用しましょう

<aside>

メイン内容とは少し離れた「補足情報・関連記事・広告など」を表します。

使用例：

<aside>
  <h3>関連記事</h3>
  <ul>
    <li><a href="#">おすすめ記事1</a></li>
    <li><a href="#">人気の投稿</a></li>
  </ul>
</aside>

ポイント：

  • ページの横や下によくあるサブコンテンツに最適です
  • 広告、関連リンク、サイドバー情報などに使用します
  • メインコンテンツを理解するのに必須ではない補足的な情報を表します

<div>

意味（セマンティクス）を持たない「汎用のコンテナ（箱）」です。

使用例：

<div class="container">
  <h2>お知らせ</h2>
  <p>GWは全館休業です。</p>
</div>

ポイント：

タグ名 意味のある構造？ 用途
<div> ❌ 意味なし グループ化（CSS/JS）用
<section> ✅ ある 特定の主題を持つまとまり
<article> ✅ ある 独立した情報ブロック
よくある用途：
  • CSSレイアウトの枠組み（例：カラム分け）
  • JavaScriptで動かす要素のグループ化
  • 意味を持たないが見た目のまとまりが必要なとき

HTMLのメタ情報とヘッドタグ

<head>

ドキュメントのメタデータを含む要素です。ブラウザには表示されませんが、ページの設定や外部リソースの読み込みなどに必要です。

使用例：

<head>
  <meta charset="UTF-8">
  <title>ページタイトル</title>
  <meta name="description" content="ページの説明">
  <link rel="stylesheet" href="style.css">
</head>

<title>

ブラウザのタブやブックマークに表示されるページのタイトルを定義します。SEOにも重要です。

使用例：

<title>HTMLリファレンス - LTech</title>

ポイント：

  • <head>内に必ず1つ含める必要があります
  • 検索結果で表示されるので、ページ内容を適切に表すタイトルにしましょう

<meta>

ページに関するメタデータを定義します。文字コード、ビューポート設定、説明文、キーワードなど多様な情報を設定できます。

使用例：

<!-- 文字コードの設定 -->
<meta charset="UTF-8">

<!-- ビューポート（モバイル対応）設定 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<!-- ページの説明 (SEO用) -->
<meta name="description" content="HTMLタグと使用例を解説するリファレンスページ">

<!-- OGP (Open Graph Protocol) - SNSでシェアされる情報 -->
<meta property="og:title" content="HTMLリファレンス">
<meta property="og:description" content="HTMLタグと使用例を解説">
<meta property="og:image" content="https://example.com/image.jpg">

主要な属性：

  • charset - ページの文字コードを指定（例: "UTF-8"）
  • name - メタデータの種類（"description", "viewport", "keywords"など）
  • content - メタデータの値
  • property - OGPなどのソーシャルメディア用メタデータのプロパティ

<link>

外部リソース（CSSファイル、ファビコン、フォントなど）をページに読み込むために使用します。

使用例：

<!-- CSSファイルの読み込み -->
<link rel="stylesheet" href="styles.css">

<!-- ファビコンの設定 -->
<link rel="icon" href="favicon.ico" type="image/x-icon">

<!-- Web フォントの読み込み -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

主要な属性：

  • rel - リンクされるリソースとの関係（"stylesheet", "icon", "preconnect"など）
  • href - リソースのURL
  • type - リンクされるリソースのMIMEタイプ
  • media - リソースを適用するメディア/デバイス条件

<script>

JavaScriptをHTMLページに埋め込むか、外部JavaScriptファイルを読み込むために使用します。

使用例：

<!-- 外部JavaScriptファイルの読み込み -->
<script src="script.js"></script>

<!-- インラインJavaScript -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    console.log('ページが読み込まれました');
  });
</script>

主要な属性：

  • src - 外部JavaScriptファイルのURL
  • async - スクリプトを非同期で実行（ページの読み込みをブロックしない）
  • defer - HTMLの解析完了後にスクリプトを実行
  • type - スクリプトのタイプ（通常は"text/javascript"、省略可）

<style>

ページ内にCSSスタイルを直接記述するために使用します。

使用例：

<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
  }
  h1 {
    color: navy;
  }
</style>

主要な属性：

  • media - スタイルを適用するメディア/デバイス条件
  • type - スタイルシートの言語（通常は"text/css"、省略可）

HTML5ページの基本構造

セマンティックタグを使用した一般的なHTML5ページの構造は以下のようになります：

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ページタイトル</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

  <header>
    <h1>ウェブサイトのタイトル</h1>
    <nav>
      <ul>
        <li><a href="/">ホーム</a></li>
        <li><a href="/about">会社概要</a></li>
        <li><a href="/contact">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section>
      <h2>サービス紹介</h2>
      <p>当社のサービスについての説明...</p>
    </section>

    <article>
      <h2>最新情報</h2>
      <p>新サービスをリリースしました！</p>
    </article>

    <aside>
      <h3>関連リンク</h3>
      <ul>
        <li><a href="#">関連サービス1</a></li>
        <li><a href="#">関連サービス2</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <p>© 2025 サンプルサイト. All rights reserved.</p>
  </footer>

</body>
</html>

この構造は、コンテンツの役割や意味を明確に伝えるのに役立ちます。また、検索エンジンのクローラーやスクリーンリーダーなどの支援技術にもウェブページの構造を理解しやすくします。