HTMLの基本【初心者向け｜アクセシビリティ＆SEO対応】
login_userHTMLの基本【初心者向け｜アクセシビリティ＆SEO対応】
HTMLはWebページを作るための言語です。文章や画像、リンク、表などを構造化して表示できます。ここでは、初心者向けにHTMLの基本構造とよく使うタグ、さらにアクセシビリティ（a11y）とSEOを意識したポイントも解説します。
1 HTML文書の基本構造
<!DOCTYPE html>
<html lang="ja"> <!-- ページの言語を指定 -->
<head>
<meta charset="UTF-8"> <!-- 文字コード指定 -->
<title>HTMLの基本【初心者向け｜アクセシビリティ＆SEO対応】</title> <!-- SEOで重要 -->
<meta name="description" content="初心者向けHTMLの基本構造とアクセシビリティ・SEOのポイント解説">
</head>
<body>
<!-- ページの本文 -->
</body>
</html>
2 よく使うHTMLタグとアクセシビリティ・SEOのポイント
| タグ | 用途 | アクセシビリティ／SEOのポイント |
|---|---|---|
| <h1>〜<h6> | 見出し（Heading） | ページの構造を示すため、順番通りに使用。SEOで重要なキーワードは <h1> や <h2> に含める |
| <p> | 段落（Paragraph） | 文章を論理的に分けることでスクリーンリーダーでも読みやすくなる |
| <a> | リンク（Anchor） | リンクテキストは内容が分かるものにする。空リンクは避ける |
| <img> | 画像 | 必ず alt 属性を付け、画像の内容を説明。SEOでも重要 |
| <ul>, <ol>, <li> | リスト（順不同 / 順序付き / 項目） | 論理的なリストにすることでスクリーンリーダーで正しく読み上げられる |
| <table>, <thead>, <tbody>, <tr>, <th>, <td> | 表（Table） | <caption> や scope="col"/scope="row" を使うとアクセシブル。複雑な結合セルは避ける |
| <div> | ブロック要素のグループ化 | 装飾やレイアウト用。意味を持たせたい場合は <section> や <article> の使用も検討 |
| <span> | インライン要素のグループ化 | 文字装飾用。意味のあるテキストには <strong> や <em> を使う |
3 HTMLを書くときのアクセシビリティとSEOのポイント
- 文書の構造を論理的に作る（見出し順序、段落、リスト）
- 画像には
altを必ず付ける - リンクテキストは「ここをクリック」のような曖昧な表現は避ける
- テーブルには
<caption>とscope属性を活用 - フォームには
<label>を使い、入力項目と説明を紐付ける - metaタグやタイトルタグでページの内容を簡潔に説明（SEO）
4 まとめ
HTMLの基本を押さえることで、誰でも見やすくアクセスしやすいWebページを作れます。アクセシビリティを意識すると、スクリーンリーダーでも読みやすくなり、SEOの評価にもつながります。まずは本文に見出し、段落、画像、リンクを組み合わせ、慣れてきたら表やフォームも使ってみましょう。
