HTML入門：基礎からタグの使い方まで｜ブログ作成で役立つ書き方解説

HTMLの基礎・主なタグ一覧
セマンティックHTML
フォームとバリデーション
アクセシビリティ
SEOとHTML
最新のHTML仕様
最後に

HTMLの基礎・主なタグ一覧

HTML（ハイパーテキスト・マークアップ・ランゲージ）はウェブページの根幹を成す言語です。オンラインで表示されるコンテンツの構造を規定します。HTML構造のスタイル設定にはCSSを使用し、インタラクティブ性を持たせるにはJavaScriptを使用します。HTMLはウェブサイトの骨組みと考えてください。

HTML文書の基本構造は以下のようになります。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ブログ記事タイトル</title>
</head>
<body>
  <h1>見出しタイトル</h1>
  <p>ここに本文を書きます。</p>
</body>
</html>

主なHTMLタグ一覧

見出しタグ：<h1>〜<h6>
段落タグ：<p>
リストタグ：<ul> / <ol> / <li>
画像タグ：<img>
リンクタグ：<a>
強調タグ：<strong> / <em>

セマンティックHTML

セマンティックHTMLとは、タグの意味を正しく使って構造を表すHTMLのことです。これにより検索エンジンやスクリーンリーダーが内容を理解しやすくなります。

主なセマンティック要素

<header>：ページや記事のヘッダー部分
<nav>：ナビゲーションリンク
<main>：ページのメインコンテンツ
<article>：独立した記事や投稿
<section>：章やセクションのまとまり
<footer>：ページや記事のフッター部分
<aside>：補足情報、広告、関連記事
<details> <summary>：詳細と概要
<figure><figcaption>：図と図のキャプション
<mark>：強調表示されたテキスト
<time>：日付や時刻
<progress>：プログレスバー

それ以外の要素

<div>：特定の意味がないボックス要素
<span>：特定の意味がないインライン要素

フォームとバリデーション

フォームからサーバーへデータを送信する前に、すべての必須フィールドが正しく入力されているかどうかを確認することが重要です。これはクライアントサイドフォーム検証と呼ばれます。これにより、送信されたデータがフォームの想定と一致することが確認され、データ品質とユーザーエクスペリエンスが向上します。HTML5ではJavaScriptを使わなくても簡単な検証ができます。

基本的なフォーム

<form action="send.php" method="post">
        <!-- 名前：必須、文字数制限 -->
        <label for="name">名前（3〜20文字）：</label>
        <input type="text" id="name" name="name" required minlength="3" maxlength="20">

        <!-- メールアドレス：必須、形式チェック -->
        <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要素