tkrd-stack

学習ノート

自分の理解を深めるための技術メモ

← 一覧に戻る

HTML基礎ガイド

📚 参考リンク

目次

HTMLとは

HTML（HyperText Markup Language）は、ウェブサイトのコンテンツ構造を作成するためのマークアップ言語です。

HTMLの主な特徴：

  • コンテンツを段落、リスト、画像、テーブルなどの要素で構成
  • 「要素」という部品を使ってコンテンツを囲み、特定の見た目や機能を付与
  • タグを使用してテキストの装飾やリンクの作成が可能

HTML要素の基本

1. 基本構造

HTML要素は開始タグと終了タグで囲まれた形式をとります：

<p>ここに段落のテキストが入ります。</p>
  • 開始タグ: 
    <p>
  • コンテンツ: テキスト内容
  • 終了タグ: 
    </p>

2. 空要素（Self-closing Elements）

一部の要素はコンテンツを持たない空要素です：

<img src="image.jpg" alt="画像の説明" />
<br />
<hr />

3. 入れ子構造（ネスト）

要素を他の要素の中に入れることができます：

<p>HTMLは <strong>とても重要な</strong> 技術です。</p>

4. セマンティック構造

HTML5のセマンティック要素により、ページの構造を意味に基づいて整理：

<article>
  <header>
    <h1>記事のタイトル</h1>
    <p>公開日: 2024年11月</p>
  </header>
  <section>
    <p>記事の本文内容</p>
  </section>
  <footer>
    <p>著者: John Doe</p>
  </footer>
</article>

5. 属性（Attributes）

要素の特性を指定する追加情報：

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

6. コメント

ブラウザに表示されないメモや説明：

<!-- これはコメントです -->
<p>HTMLについて学びましょう。</p>

HTMLタグの構造

基本的なタグの形式

<!-- 通常の要素 -->
<タグ名>コンテンツ</タグ名>

<!-- 空要素 -->
<タグ名 />

属性付きタグ

<img src="image.jpg" alt="画像の説明" />

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>
    <!-- ページのメインコンテンツ -->
  </body>
</html>

各要素の説明

  • <!DOCTYPE html>
    : HTML5ドキュメントの宣言
  • <html>
    : HTMLドキュメントのルート要素
  • <head>
    : メタ情報を含む部分
  • <body>
    : 表示されるメインコンテンツ

主なHTML要素

見出し要素

<h1>メインタイトル</h1>
<h2>サブタイトル</h2>
<h3>小見出し</h3>
<!-- h4, h5, h6も利用可能 -->

テキスト要素

<p>段落のテキスト</p>
<strong>強調テキスト</strong>
<em>イタリック体</em>

リンク要素

<a href="https://example.com">外部リンク</a>
<a href="#section1">ページ内リンク</a>

画像要素

<img src="image.jpg" alt="画像の説明" width="300" height="200" />

リスト要素

<!-- 順序なしリスト -->
<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
</ul>

<!-- 順序付きリスト -->
<ol>
  <li>第一項目</li>
  <li>第二項目</li>
  <li>第三項目</li>
</ol>

テーブル要素

<table>
  <thead>
    <tr>
      <th>ヘッダー1</th>
      <th>ヘッダー2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>データ1</td>
      <td>データ2</td>
    </tr>
  </tbody>
</table>

HTML属性

共通属性

属性説明例
id
一意の識別子
<div id="main-content">
class
CSS クラス名
<p class="highlight">
style
インラインスタイル
<p style="color: red;">
title
ツールチップテキスト
<span title="説明">

よく使用される属性

<!-- リンク要素 -->
<a href="URL" target="_blank" title="リンクの説明">
  <!-- 画像要素 -->
  <img src="画像パス" alt="代替テキスト" width="幅" height="高さ" />

  <!-- フォーム要素 -->
  <input type="text" name="username" placeholder="ユーザー名を入力"
/></a>

コンテンツモデル

主要なコンテンツモデル

  1. フローコンテンツ: ページの主要構成要素

    • <div>
    • <p>
    • <header>
    • <section> など

  2. セクショニングコンテンツ: 文書のアウトライン定義

    • <article>
      , 
      <section>
      , 
      <nav>
      , 
      <aside>

  3. ヘディングコンテンツ: 見出し要素

    • <h1>
      ～ 
      <h6>

  4. フレージングコンテンツ: インライン要素

    • <span>
      , 
      <a>
      , 
      <strong>
      , 
      <em>

  5. 埋め込みコンテンツ: 外部リソース

    • <img>
      , 
      <video>
      , 
      <audio>
      , 
      <iframe>

  6. インタラクティブコンテンツ: 操作可能要素

    • <a>
      , 
      <button>
      , 
      <input>
      , 
      <select>

セマンティックタグ

HTML5で追加された意味を持つタグ：

<header>
  <nav>
    <ul>
      <li><a href="#home">ホーム</a></li>
      <li><a href="#about">概要</a></li>
    </ul>
  </nav>
</header>

<main>
  <article>
    <header>
      <h1>記事タイトル</h1>
      <time datetime="2024-01-01">2024年1月1日</time>
    </header>
    <section>
      <p>記事の内容</p>
    </section>
  </article>

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

<footer>
  <p>&copy; 2024 サイト名</p>
</footer>

セマンティックタグの利点

  • SEO改善: 検索エンジンが内容を理解しやすい
  • アクセシビリティ向上: スクリーンリーダーなどの支援技術に対応
  • 保守性向上: コードの意味が明確

フォームの基本

基本的なフォーム構造

<form action="/submit" method="POST">
  <fieldset>
    <legend>ユーザー情報</legend>

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

    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email" required />

    <label for="password">パスワード:</label>
    <input type="password" id="password" name="password" required />

    <button type="submit">送信</button>
    <button type="reset">リセット</button>
  </fieldset>
</form>

input要素のtype属性

タイプ説明例
text
テキスト入力
<input type="text">
email
メールアドレス
<input type="email">
password
パスワード
<input type="password">
number
数値入力
<input type="number">
date
日付選択
<input type="date">
checkbox
チェックボックス
<input type="checkbox">
radio
ラジオボタン
<input type="radio">
file
ファイル选择
<input type="file">
submit
送信ボタン
<input type="submit">
reset
リセットボタン
<input type="reset">

フォーム属性

action属性

<form action="/api/submit" method="POST">
  <!-- フォームデータの送信先URL -->
</form>

method属性

<!-- GET: URLパラメータでデータ送信 -->
<form method="GET">
  <!-- POST: リクエストボディでデータ送信 -->
  <form method="POST"></form>
</form>

フォームバリデーション

<input type="email" required pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
<input type="text" minlength="3" maxlength="20" />
<input type="number" min="0" max="100" />

まとめ

HTMLは：

  • ウェブページの構造を定義するマークアップ言語
  • セマンティックな要素を使用して意味のある構造を作成
  • アクセシビリティとSEOを向上させる重要な技術
  • 適切なコンテンツモデルに従って論理的な文書構造を構築

HTMLをマスターすることで、構造化され、アクセシブルで、検索エンジンに優しいウェブページを作成できます。