HTMLを適当に書いてませんか？マークアップはとても大事です！

HTMLのマークアップとは？

HTML（Hypertext Markup Language）は、Webページの構造や内容を定義するためのマークアップ言語です。<h1>や<p>、<div>などのタグを使って、Webページの構成をブラウザに伝えます。正しいマークアップを施すことで、ブラウザや検索エンジン、アクセシビリティツールがコンテンツを正確に解釈できます。

適当なマークアップが引き起こす問題

HTMLを適当に書くと、さまざまな問題が発生します。

• SEO（検索エンジン最適化）
  正しいマークアップを使わないと、検索エンジンがページの内容を適切に評価できなくなります。特に見出しタグ（<h1>〜<h6>）を適切に使わないと、検索エンジンにとって何が重要な情報なのかが分かりづらくなり、検索順位が下がる可能性があります。
• アクセシビリティ
  画面リーダーなどの支援技術を使っているユーザーが、ページの内容をうまく理解できなくなります。たとえば、画像にalt属性を設定していないと、視覚障害者は画像の内容を知る手段がなくなってしまいます。
• メンテナンス性の低下
  適当にマークアップが施されたHTMLは、コードが複雑化してしまい、後から見直したり、修正するのが難しくなります。コードがシンプルで論理的に書かれていると、チームメンバーや後任者も理解しやすくなり、開発効率が向上します。

HTMLマークアップの基本的なガイドライン

適切なHTMLのマークアップのために、次の基本的なガイドラインが必要です。

• セマンティックなタグを使う
  例えば、<div>ではなく、見出しには<h1>〜<h6>、段落には<p>、リストには<ul>や<ol>など、意味に合ったタグを使いましょう。
• alt属性を設定する
  画像には必ずalt属性をつけ、視覚障害者のユーザーや、画像が表示されない環境でも内容が伝わるようにします。
• HTMLの構造をシンプルに保つ
  必要のない<div>や<span>タグを乱用せず、コードの構造をシンプルに保ちましょう。
• ランディングページのテキスト要素をまとめる
  長いテキストがある場合、適切に段落や見出しを配置し、読みやすい構成にします。

上記のよくない点

1. セマンティックなタグの欠如
   すべての要素に<div>タグが使われており、どの部分が「見出し」なのか「内容」なのかが分かりづらくなっています。これでは、検索エンジンや支援技術がページ構造を正しく理解できません。
2. 見出しタグの不使用
   「会社概要」や「サービス」は見出しとして機能するべき箇所ですが、適切な<h1>〜<h6>タグが使われていません。

<header>

• ページやセクションのヘッダーを定義。
• 通常、ロゴ、ナビゲーション、見出しなどが含まれる。

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

<nav>

• ナビゲーションリンクのグループを定義。
• サイト全体やセクション間を移動するリンクを含む。
• <header>や<footer>内に入る場合もある。

<nav>
    <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#services">Services</a></li>
    </ul>
</nav>

<main>

• ページの主要な内容を定義。
• 同じページ内で重複しない唯一の要素として使用。

<main>
    <article>
        <h2>記事タイトル</h2>
        <p>この記事の内容...</p>
    </article>
</main>

<section>

• トピックごとのセクションを定義。
• 通常、セクションには見出し<h2>が含まれる。

<section>
    <h2>セクションタイトル</h2>
    <p>このセクションの説明...</p>
</section>

<article>

• 独立したコンテンツや再利用可能な内容を定義。
• 一般的に、<header>や<h1>が入ることが可能。
• 例: ブログ記事、ニュース、製品情報など。

<article>
    <h2>記事タイトル</h2>
    <p>この記事の内容...</p>
</article>

<aside>

• 補足情報やサイドバーを定義。
• 主な内容に関連した情報（例：広告、リンク、参考資料）を表示。

<aside>
    <h3>関連リンク</h3>
    <ul>
        <li><a href="#">関連ページ1</a></li>
    </ul>
</aside>

<footer>

• セクションやページのフッターを定義。
• 著作権情報や連絡先、サイトマップなどが含まれる。

<footer>
    <p>© 2024 ウェブサイト名</p>
</footer>

バリデーションサービス

バリデーションサービスは、HTMLやCSSなどのウェブサイトのコードが、Web標準（W3C標準など）に準拠しているかどうかをチェックするツールやサービスのことを指します。このサービスを利用することで、正しい構文で書かれているか、閉じるべきタグが抜けていないか？スペルミスなどの誤りがないかを確認でき、ウェブサイトの品質向上や互換性の確保に役立ちます。