HTML入門｜ロードマップに沿ったHTML解説

    <!-- メールアドレス：必須、形式チェック -->
    <label for="email">メールアドレス：</label>
    <input type="email" id="email" name="email" required>

    <!-- パスワード：必須、正規表現（英数字8文字以上） -->
    <label for="password">パスワード（英数字8文字以上）：</label>
    <input type="password" id="password" name="password" required pattern="\[A-Za-z0-9\]{8,}">

    <!-- 年齢：数値、範囲指定 -->
    <label for="age">年齢（18〜99歳）：</label>
    <input type="number" id="age" name="age" required min="18" max="99">

    <!-- 身長：小数対応、ステップ指定 -->
    <label for="height">身長（cm、0.1刻み）：</label>
    <input type="number" id="height" name="height" required min="100" max="250" step="0.1">

    <!-- 郵便番号：正規表現（日本の郵便番号形式） -->
    <label for="postal">郵便番号（例: 123-4567）：</label>
    <input type="text" id="postal" name="postal" required pattern="\\d{3}-\\d{4}">

    <input type="submit" value="送信">
</form>

フォームの仕様

• required：フォームを送信する前にフォーム フィールドに入力する必要があるかどうかを指定します。
• type：データが数値、電子メール アドレス、またはその他の特定のプリセットであるかの検証
• pattern属性：正規表現による入力パターン指定
• minlength/maxlength：テキスト データ (文字列) の最小長と最大長を指定
• min/max：数値入力タイプの最小値と最大値
• step：最小値から始まる値の増分またはステップを指定

アクセシビリティ

ウェブサイトのアクセシビリティとは、障がいのある方を含め、誰もがサイトを利用できるようにすることです。これには、画像の代わりにテキストを表示すること、キーボード操作、適切な色彩コントラスト、キャプションなど、明確なデザインが含まれます。アクセシビリティのルールに従うことは、障がいのある方だけでなく、すべてのユーザーにとって有益であり、法令遵守やより多くの人々へのリーチにも役立ちます。

基本の実装方法

• 画像には必ずalt属性をつける
• フォーム要素には<label>を関連付ける
• 色だけに頼らない情報伝達（色覚バリアフリー）
• 見出し構造を正しく設定（<h1>→<h2>→<h3>…）

SEOとHTML

SEO（検索エンジン最適化）は、ウェブサイトを検索結果の上位に表示させるのに役立ちます。具体的には、適切なキーワードの使用、質の高いコンテンツの作成、サイトの高速化とモバイルフレンドリー化、そして信頼できる他のサイトからのリンク獲得などが挙げられます。優れたナビゲーションとデザインもSEO対策に役立ちます。サイトマップや安全なHTTPSといった技術的な要素も重要です。SEOは、ウェブサイトをページ内と技術面の両方で改善することで、検索エンジンからの訪問者を増やすことを目指せます。

重要なHTML要素

• <title>：ページタイトル（検索結果に表示）
• <meta name="description">：ページの概要文
• 見出しタグ（<h1>は1回、<h2>〜<h6>は階層的に）
• 構造化データ（JSON-LDなど）で検索エンジンに意味を伝える

お役立ちツール

• Search Console
• Google Trends
• Google Analytics
• Googleキーワードプランナー
• ラッコキーワード

最新のHTML仕様

2025年現在、HTML Living Standard がHTMLの仕様となっています。

https://html.spec.whatwg.org

HTML Living Standardは、HTMLの仕様を常に最新の状態で維持し続けるための標準です。 W3C（World Wide Web Consortium）ではなく、Apple・Mozilla・Operaの開発者によって設立されたWHATWGという組織が策定しています。

これまでのHTMLは、

• HTML4
• XHTML 1.0
• HTML5（2014年に勧告）

のようにバージョンごとに固定された仕様でしたが、 Living Standardでは「HTML5.1」「HTML5.2」などのようにバージョンを区切らず、常に更新され続ける1つの仕様として扱われます。

最後に

TMLは一度覚えれば終わりというものではありません。 毎年のように仕様がアップデートされ、新しいタグや属性が追加されたり、古い書き方が非推奨になったりします。 特にHTML5以降は、レスポンシブ対応やアクセシビリティ向上など、時代に合わせた改良が続いています。

つまり、「今の知識」はゴールではなくスタート地点です。 最新の仕様やベストプラクティスを学び続けることで、常に正しい、そしてユーザーや検索エンジンに評価されるコードを書けるようになります。 学びを止めず、HTMLをあなたの武器として進化させていきましょう。