見出しタグの構造化利用

HTMLでは文書構造を定義するために6段階の見出しタグが用意されています。<h1>から<h6>まであり、それぞれ異なる重要度レベルを表します。

<h1>メインタイトル</h1>
<h2>サブセクション</h2>
<h3>詳細項目</h3>
<h4>小項目</h4>
<h5>補足説明</h5>
<h6>最小単位</h6>

見出しタグは視覚的なスタイルだけでなく、SEOやアクセシビリティにおいても重要な役割を果たします。

段落と改行の適切な使用方法

テキストコンテンツを構造化するためには<p>タグを使用します。段落間には自動的に余白が挿入されます。

<p>最初の段落テキストです。</p>
<p>次の段落がここから始まります。</p>

強制改行が必要な場合は<br>タグを使用しますが、レイアウト目的での多用は避けるべきです。

<p>一行目のテキスト<br>
二行目に移動</p>

リスト要素の実装パターン

HTMLでは順序なしリスト、順序付きリスト、説明リストの3種類をサポートしています。

順序なしリスト

<ul>
    <li>項目A</li>
    <li>項目B</li>
    <li>項目C</li>
</ul>

順序付きリスト

<ol>
    <li>最初のステップ</li>
    <li>次のステップ</li>
    <li>最後のステップ</li>
</ol>

説明リスト

<dl>
    <dt>用語A</dt>
    <dd>用語Aの詳細説明</dd>
    <dt>用語B</dt>
    <dd>用語Bの詳細説明</dd>
</dl>

ハイパーリンクの実装方法

<a>タグを使用して外部・内部リンクを作成できます。

<a href="https://example.com" target="_blank">外部サイトへ</a>
<a href="about.html">内部ページへ</a>
<a href="#section1">ページ内ジャンプ</a>

メディア要素の埋め込み

画像、音声、動画を埋め込むための専用タグが提供されています。

画像表示

<img src="sample.jpg" alt="サンプル画像" width="400" height="300">

音声再生

<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    対応していないブラウザです
</audio>

動画再生

<video width="640" height="360" controls>
    <source src="video.mp4" type="video/mp4">
    対応していないブラウザです
</video>

テーブル構造の作成

データを表形式で表示するためのテーブル関連タグです。

<table>
    <caption>製品一覧</caption>
    <thead>
        <tr>
            <th>製品名</th>
            <th>価格</th>
            <th>在庫</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>商品A</td>
            <td>1,000円</td>
            <td>50</td>
        </tr>
    </tbody>
</table>

フォーム要素の構築

ユーザー入力を受け付けるための各種フォームコントロールです。

<form action="/submit" method="post">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">メール:</label>
    <input type="email" id="email" name="email">
    
    <textarea name="message" rows="4">メッセージ</textarea>
    
    <select name="category">
        <option value="1">カテゴリ1</option>
        <option value="2">カテゴリ2</option>
    </select>
    
    <button type="submit">送信</button>
</form>

レイアウト関連のセマンティックタグ

HTML5で導入された意味的な構造を表現するタグ群です。

<header>
    <nav>
        <ul>
            <li><a href="#top">トップ</a></li>
        </ul>
    </nav>
</header>

<main>
    <article>
        <section>
            <h2>記事セクション</h2>
            <p>コンテンツ本文</p>
        </section>
    </article>
    
    <aside>
        <p>補足情報</p>
    </aside>
</main>

<footer>
    <p>フッターコンテンツ</p>
</footer>