「HTMLタグっていっぱいありすぎて覚えられない…」
「とりあえずどんなタグがあるのか、ざっと見たい！」
「実際にどう使うのか、具体例を見ながら理解したい」
HTML（HyperText Markup Language）を学び始めたばかりの方にとって、膨大な数のタグを覚えるのは大変な作業です。しかし、実際のWeb開発でよく使われるタグは限られており、それらを理解すれば基本的なWebページは十分に作成できます。
HTMLはWebページを作る土台となる言語で、タグ（要素）を使って文字や画像、リンクなどの構造や意味を決めています。
適切なタグを使うことで、検索エンジンにも理解しやすく、アクセシビリティに優れたWebページを作ることができます。
この記事では、HTMLの主要タグを一覧形式で紹介し、それぞれの用途と実用的な例を添えて詳しく解説します。
HTMLの基本概念
HTMLとは何か
マークアップ言語の役割
HTMLは「HyperText Markup Language」の略で、Webページの構造と内容を定義するマークアップ言語です。プログラミング言語とは異なり、主にコンテンツの意味付けと構造化を行います。
タグの基本構造
HTMLでは、以下のような構造でコンテンツをマークアップします：
<タグ名 属性="値">コンテンツ</タグ名>
例：
<h1>これは見出しです</h1>
<p class="important">これは重要な段落です</p>
<img src="image.jpg" alt="画像の説明">
開始タグと終了タグ
一般的なタグ
ほとんどのタグは開始タグと終了タグのペアで使用します：
<p>ここに段落の内容を書きます</p>
<strong>ここに強調したい文字を書きます</strong>
自己終了タグ（空要素）
一部のタグは終了タグが不要です：
<br> <!-- 改行 -->
<img src="photo.jpg" alt="写真"> <!-- 画像 -->
<input type="text"> <!-- 入力フィールド -->
<hr> <!-- 水平線 -->
HTML文書の基本構造
すべてのHTML文書は、以下の基本的な構造を持ちます：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
</head>
<body>
<p>ここにページの内容を書きます</p>
</body>
</html>
各部分の説明
<!DOCTYPE html>: HTML5文書であることを宣言<html>: HTML文書全体を囲む要素<head>: ページの設定情報（メタデータ）<body>: ページの実際の内容
文書構造タグ
基本的な文書構造
必須の構造タグ
| タグ | 用途 | 例 |
|---|---|---|
<!DOCTYPE html> | HTML5文書宣言 | <!DOCTYPE html> |
<html> | HTML文書の開始 | <html lang="ja"> |
<head> | メタデータセクション | <head>...</head> |
<body> | コンテンツセクション | <body>...</body> |
メタデータタグ
| タグ | 用途 | 例 |
|---|---|---|
<title> | ページタイトル | <title>私のWebサイト</title> |
<meta> | メタ情報 | <meta charset="UTF-8"> |
<link> | 外部リソース | <link rel="stylesheet" href="style.css"> |
<script> | JavaScript | <script src="script.js"></script> |
セマンティック構造タグ
HTML5で導入された、意味的に明確な構造を表すタグ：
ページレイアウト用タグ
<header>
<h1>サイトのタイトル</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>記事のタイトル</h2>
<time datetime="2024-01-15">2024年1月15日</time>
</header>
<section>
<h3>セクションの見出し</h3>
<p>記事の内容...</p>
</section>
</article>
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="/article1">記事1</a></li>
<li><a href="/article2">記事2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 私の会社</p>
</footer>
セマンティックタグの詳細
| タグ | 用途 | 使用場面 |
|---|---|---|
<header> | ヘッダー | ページやセクションの冒頭部分 |
<nav> | ナビゲーション | メニュー、目次 |
<main> | メインコンテンツ | ページの主要内容（1つだけ） |
<article> | 独立した記事 | ブログ記事、ニュース記事 |
<section> | セクション | 章、節の区切り |
<aside> | サイドコンテンツ | サイドバー、関連情報 |
<footer> | フッター | ページやセクションの末尾 |
テキスト関連タグ
見出しタグ
見出しの階層構造
<h1>最重要見出し（ページタイトル）</h1>
<h2>大見出し（章）</h2>
<h3>中見出し（節）</h3>
<h4>小見出し（項）</h4>
<h5>より小さい見出し</h5>
<h6>最小見出し</h6>
見出しタグの使い方のポイント
- h1は1ページに1つまで（SEO的に重要）
- 階層を飛ばさない（h1の次はh2）
- 見た目ではなく、意味で選ぶ
段落と改行
基本的なテキストタグ
| タグ | 用途 | 例 |
|---|---|---|
<p> | 段落 | <p>これは一つの段落です。</p> |
<br> | 改行 | 1行目<br>2行目 |
<hr> | 水平線（区切り） | <hr> |
実用的な例
<p>これは最初の段落です。関連する文章をまとめて一つの段落にします。</p>
<p>これは二番目の段落です。<br>
段落内で改行したい場合はbrタグを使います。</p>
<hr>
<p>水平線で区切った後の段落です。</p>
テキストの装飾・強調
強調とマーキング
| タグ | 用途 | 表示 | 例 |
|---|---|---|---|
<strong> | 重要性の強調 | 太字 | <strong>重要</strong>な情報 |
<em> | 語調の強調 | 斜体 | <em>強調</em>したい部分 |
<mark> | ハイライト | <mark>黄色背景</mark> | <mark>注目</mark>してください |
<small> | 小さいテキスト | 小さく | <small>※注意事項</small> |
引用タグ
<!-- 短い引用 -->
<p>彼は<q>明日行きます</q>と言いました。</p>
<!-- 長い引用 -->
<blockquote cite="https://example.com">
<p>これは引用された文章です。通常はインデントされて表示されます。</p>
<footer>— <cite>引用元の名前</cite></footer>
</blockquote>
その他のテキストタグ
| タグ | 用途 | 例 |
|---|---|---|
<code> | インラインコード | <code>console.log()</code> |
<pre> | 整形済みテキスト | コードブロックなど |
<kbd> | キーボード入力 | <kbd>Ctrl</kbd>+<kbd>C</kbd> |
<samp> | サンプル出力 | <samp>Hello World</samp> |
<var> | 変数 | <var>x</var> = 10 |
リスト関連タグ
順序なしリスト（箇条書き）
基本的な使い方
<ul>
<li>項目1</li>
<li>項目2</li>
<li>項目3</li>
</ul>
入れ子のリスト
<ul>
<li>フルーツ
<ul>
<li>りんご</li>
<li>バナナ</li>
<li>オレンジ</li>
</ul>
</li>
<li>野菜
<ul>
<li>にんじん</li>
<li>ブロッコリー</li>
</ul>
</li>
</ul>
順序付きリスト（番号付き）
基本的な使い方
<ol>
<li>最初のステップ</li>
<li>次のステップ</li>
<li>最後のステップ</li>
</ol>
番号の種類を指定
<!-- ローマ数字 -->
<ol type="I">
<li>第一章</li>
<li>第二章</li>
</ol>
<!-- アルファベット -->
<ol type="A">
<li>項目A</li>
<li>項目B</li>
</ol>
<!-- 開始番号を指定 -->
<ol start="5">
<li>5番目</li>
<li>6番目</li>
</ol>
定義リスト
用語とその説明をペアで表示するリスト：
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Languageの略。Webページの構造を定義する言語。</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheetsの略。Webページの見た目を定義する言語。</dd>
<dt>JavaScript</dt>
<dd>Webページに動的な機能を追加するプログラミング言語。</dd>
</dl>
リンクと画像
リンクタグ（<a>）
基本的なリンク
<!-- 外部サイトへのリンク -->
<a href="https://www.google.com">Googleで検索</a>
<!-- 同一サイト内のページへのリンク -->
<a href="/about.html">会社概要</a>
<!-- 同一ページ内のアンカーリンク -->
<a href="#section1">セクション1へジャンプ</a>
<!-- メールアドレスへのリンク -->
<a href="mailto:contact@example.com">お問い合わせ</a>
<!-- 電話番号へのリンク -->
<a href="tel:03-1234-5678">電話をかける</a>
リンクの属性
| 属性 | 用途 | 例 |
|---|---|---|
href | リンク先URL | href="https://example.com" |
target | 開き方 | target="_blank"（新しいタブ） |
rel | 関係性 | rel="noopener"（セキュリティ） |
download | ダウンロード | download="filename.pdf" |
実用的なリンク例
<!-- 新しいタブで開く外部リンク -->
<a href="https://example.com" target="_blank" rel="noopener">
外部サイト
</a>
<!-- ファイルダウンロード -->
<a href="/files/document.pdf" download="資料.pdf">
資料をダウンロード
</a>
画像タグ（<img>）
基本的な画像表示
<img src="photo.jpg" alt="美しい風景の写真">
画像の属性
| 属性 | 用途 | 必須 | 例 |
|---|---|---|---|
src | 画像ファイルのパス | ○ | src="images/photo.jpg" |
alt | 代替テキスト | ○ | alt="商品の写真" |
width | 幅の指定 | – | width="300" |
height | 高さの指定 | – | height="200" |
loading | 読み込み方法 | – | loading="lazy" |
レスポンシブ画像
<!-- 画面サイズに応じて異なる画像を表示 -->
<picture>
<source media="(max-width: 768px)" srcset="mobile.jpg">
<source media="(max-width: 1024px)" srcset="tablet.jpg">
<img src="desktop.jpg" alt="レスポンシブ画像">
</picture>
<!-- 高解像度対応 -->
<img src="photo.jpg"
srcset="photo.jpg 1x, photo-2x.jpg 2x"
alt="高解像度対応画像">
その他のメディアタグ
動画の埋め込み
<video controls width="640" height="480">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<p>お使いのブラウザは動画タグに対応していません。</p>
</video>
音声の埋め込み
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>お使いのブラウザは音声タグに対応していません。</p>
</audio>
テーブル（表）タグ
基本的なテーブル構造
<table>
<caption>売上実績表</caption>
<thead>
<tr>
<th>年月</th>
<th>売上（万円）</th>
<th>前年比</th>
</tr>
</thead>
<tbody>
<tr>
<td>2024年1月</td>
<td>1,200</td>
<td>+15%</td>
</tr>
<tr>
<td>2024年2月</td>
<td>1,350</td>
<td>+8%</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>合計</td>
<td>2,550</td>
<td>+11%</td>
</tr>
</tfoot>
</table>
テーブル関連タグ一覧
| タグ | 用途 | 説明 |
|---|---|---|
<table> | テーブル全体 | 表の外枠 |
<caption> | テーブルのキャプション | 表のタイトル |
<thead> | ヘッダー部分 | 見出し行をグループ化 |
<tbody> | ボディ部分 | データ行をグループ化 |
<tfoot> | フッター部分 | 合計行など |
<tr> | テーブル行 | 1つの行 |
<th> | ヘッダーセル | 見出しセル（太字） |
<td> | データセル | 通常のデータセル |
高度なテーブル機能
セルの結合
<table>
<tr>
<th rowspan="2">項目</th>
<th colspan="2">2024年</th>
</tr>
<tr>
<th>1月</th>
<th>2月</th>
</tr>
<tr>
<td>売上</td>
<td>100万円</td>
<td>120万円</td>
</tr>
</table>
アクセシブルなテーブル
<table>
<thead>
<tr>
<th scope="col">商品名</th>
<th scope="col">価格</th>
<th scope="col">在庫</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">ノートパソコン</th>
<td>98,000円</td>
<td>15台</td>
</tr>
</tbody>
</table>
フォーム関連タグ
基本的なフォーム構造
<form action="/submit" method="post">
<fieldset>
<legend>お問い合わせフォーム</legend>
<div>
<label for="name">お名前（必須）</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">メールアドレス</label>
<input type="email" id="email" name="email">
</div>
<div>
<label for="message">メッセージ</label>
<textarea id="message" name="message" rows="5"></textarea>
</div>
<button type="submit">送信</button>
</fieldset>
</form>
入力タイプ別一覧
テキスト入力系
| タイプ | 用途 | 例 |
|---|---|---|
text | 一般的なテキスト | <input type="text"> |
email | メールアドレス | <input type="email"> |
password | パスワード | <input type="password"> |
tel | 電話番号 | <input type="tel"> |
url | URL | <input type="url"> |
search | 検索 | <input type="search"> |
数値・日付系
<!-- 数値入力 -->
<input type="number" min="0" max="100" step="1">
<!-- 日付入力 -->
<input type="date">
<!-- 時刻入力 -->
<input type="time">
<!-- 日時入力 -->
<input type="datetime-local">
<!-- 範囲選択 -->
<input type="range" min="0" max="100" value="50">
選択系
<!-- チェックボックス -->
<input type="checkbox" id="agree" name="agree">
<label for="agree">利用規約に同意する</label>
<!-- ラジオボタン -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>
<!-- セレクトボックス -->
<select name="prefecture">
<option value="">都道府県を選択</option>
<option value="tokyo">東京都</option>
<option value="osaka">大阪府</option>
</select>
ファイル・その他
<!-- ファイル選択 -->
<input type="file" accept=".jpg,.png,.pdf">
<!-- 隠しフィールド -->
<input type="hidden" name="csrf_token" value="abc123">
<!-- 色選択 -->
<input type="color">
フォーム関連タグ詳細
| タグ | 用途 | 例 |
|---|---|---|
<form> | フォーム全体 | <form action="/submit" method="post"> |
<fieldset> | フィールドをグループ化 | フォームの論理的な区切り |
<legend> | フィールドセットの見出し | <legend>個人情報</legend> |
<label> | 入力項目のラベル | <label for="name">名前</label> |
<input> | 入力フィールド | 様々なタイプあり |
<textarea> | 複数行テキスト | <textarea rows="5"></textarea> |
<select> | 選択リスト | ドロップダウンメニュー |
<option> | 選択肢 | <option value="1">選択肢1</option> |
<button> | ボタン | <button type="submit">送信</button> |
コンテナ・レイアウトタグ
汎用コンテナタグ
divとspanの違い
<!-- div: ブロックレベル要素（改行される） -->
<div class="container">
<div class="header">ヘッダー部分</div>
<div class="content">メインコンテンツ</div>
</div>
<!-- span: インライン要素（改行されない） -->
<p>この文章の<span class="highlight">この部分だけ</span>ハイライトします。</p>
使い分けのポイント
<div>: レイアウトの区切り、セクション分け<span>: 文章の一部を装飾、特定の文字に意味付け
HTML5セマンティック要素
意味的に正しいマークアップ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ブログサイト</title>
</head>
<body>
<header>
<h1>私のブログ</h1>
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about">プロフィール</a></li>
<li><a href="/contact">お問い合わせ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h2>HTMLの学習方法</h2>
<time datetime="2024-01-15">2024年1月15日</time>
</header>
<section>
<h3>基本タグから覚えよう</h3>
<p>HTMLを学習する際は、まず基本的なタグから覚えることが重要です。</p>
</section>
<section>
<h3>実践的な練習</h3>
<p>理論だけでなく、実際にコードを書いて練習しましょう。</p>
</section>
</article>
<aside>
<h3>関連記事</h3>
<ul>
<li><a href="/css-basic">CSS入門</a></li>
<li><a href="/js-basic">JavaScript入門</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2024 私のブログ. All rights reserved.</p>
</footer>
</body>
</html>
実践的なHTMLページ作成
完全なサンプルページ
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Web制作会社のサンプルページです">
<title>株式会社WebTech - Web制作のプロフェッショナル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<h1>株式会社WebTech</h1>
<nav>
<ul>
<li><a href="#about">会社概要</a></li>
<li><a href="#services">サービス</a></li>
<li><a href="#contact">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="hero">
<h2>あなたのビジネスを<em>デジタル</em>で加速させます</h2>
<p>私たちは最新技術を駆使して、お客様のニーズに応える<strong>高品質なWebサイト</strong>を制作します。</p>
<a href="#contact" class="cta-button">今すぐ相談する</a>
</section>
<section id="about">
<h2>会社概要</h2>
<div class="company-info">
<table>
<tr>
<th>会社名</th>
<td>株式会社WebTech</td>
</tr>
<tr>
<th>設立</th>
<td>2020年4月1日</td>
</tr>
<tr>
<th>所在地</th>
<td>東京都渋谷区○○○○</td>
</tr>
<tr>
<th>従業員数</th>
<td>15名</td>
</tr>
</table>
</div>
</section>
<section id="services">
<h2>サービス内容</h2>
<div class="services-grid">
<article class="service-item">
<h3>Webサイト制作</h3>
<img src="web-design.jpg" alt="Webデザインのイメージ">
<p>レスポンシブ対応の美しいWebサイトを制作します。</p>
<ul>
<li>企業サイト</li>
<li>ECサイト</li>
<li>ランディングページ</li>
</ul>
</article>
<article class="service-item">
<h3>SEO対策</h3>
<img src="seo.jpg" alt="SEO対策のイメージ">
<p>検索エンジンで上位表示させるための最適化を行います。</p>
<ul>
<li>キーワード分析</li>
<li>コンテンツ最適化</li>
<li>技術的SEO</li>
</ul>
</article>
<article class="service-item">
<h3>保守・運用</h3>
<img src="maintenance.jpg" alt="保守運用のイメージ">
<p>サイト公開後の継続的なサポートを提供します。</p>
<ul>
<li>定期更新</li>
<li>セキュリティ対策</li>
<li>アクセス解析</li>
</ul>
</article>
</div>
</section>
<section id="contact">
<h2>お問い合わせ</h2>
<p>お気軽にお問い合わせください。<strong>無料相談</strong>も承っております。</p>
<form action="/contact" method="post">
<fieldset>
<legend>お問い合わせ内容</legend>
<div class="form-group">
<label for="company">会社名</label>
<input type="text" id="company" name="company">
</div>
<div class="form-group">
<label for="name">お名前 <span class="required">必須</span></label>
<input type="text" id="name" name="name" required>
</div>
<div class="form-group">
<label for="email">メールアドレス <span class="required">必須</span></label>
<input type="email" id="email" name="email" required>
</div>
<div class="form-group">
<label for="phone">電話番号</label>
<input type="tel" id="phone" name="phone">
</div>
<div class="form-group">
<label for="service">ご希望のサービス</label>
<select id="service" name="service">
<option value="">選択してください</option>
<option value="website">Webサイト制作</option>
<option value="seo">SEO対策</option>
<option value="maintenance">保守・運用</option>
<option value="other">その他</option>
</select>
</div>
<div class="form-group">
<label for="budget">ご予算</label>
<div class="radio-group">
<input type="radio" id="budget1" name="budget" value="50万円未満">
<label for="budget1">50万円未満</label>
<input type="radio" id="budget2" name="budget" value="50-100万円">
<label for="budget2">50-100万円</label>
<input type="radio" id="budget3" name="budget" value="100万円以上">
<label for="budget3">100万円以上</label>
</div>
</div>
<div class="form-group">
<label for="message">お問い合わせ内容</label>
<textarea id="message" name="message" rows="5" placeholder="詳細をお聞かせください"></textarea>
</div>
<div class="form-group">
<input type="checkbox" id="privacy" name="privacy" required>
<label for="privacy">
<a href="/privacy" target="_blank">プライバシーポリシー</a>に同意する
</label>
</div>
<button type="submit">送信する</button>
</fieldset>
</form>
</section>
</main>
<footer>
<div class="container">
<div class="footer-content">
<div class="footer-section">
<h3>株式会社WebTech</h3>
<address>
〒150-0000<br>
東京都渋谷区○○○○<br>
TEL: <a href="tel:03-1234-5678">03-1234-5678</a><br>
Email: <a href="mailto:info@webtech.co.jp">info@webtech.co.jp</a>
</address>
</div>
<div class="footer-section">
<h3>SNS</h3>
<ul class="social-links">
<li><a href="https://twitter.com/webtech" target="_blank" rel="noopener">Twitter</a></li>
<li><a href="https://facebook.com/webtech" target="_blank" rel="noopener">Facebook</a></li>
<li><a href="https://linkedin.com/company/webtech" target="_blank" rel="noopener">LinkedIn</a></li>
</ul>
</div>
</div>
<hr>
<p class="copyright">
<small>© 2024 株式会社WebTech. All rights reserved.</small>
</p>
</div>
</footer>
<script src="script.js"></script>
</body>
</html>
SEOとアクセシビリティを考慮したHTML
SEO対策のポイント
メタタグの最適化
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- SEO重要タグ -->
<title>HTMLタグ一覧 - 初心者向け完全ガイド | WebTech</title>
<meta name="description" content="HTMLの基本タグを用途別に分類し、実例付きで詳しく解説。初心者でもすぐに使えるHTMLタグリファレンス。">
<meta name="keywords" content="HTML,タグ,初心者,Web制作,マークアップ">
<!-- OGP（SNS共有用） -->
<meta property="og:title" content="HTMLタグ一覧 - 初心者向け完全ガイド">
<meta property="og:description" content="HTMLの基本タグを用途別に分類し、実例付きで詳しく解説">
<meta property="og:image" content="https://example.com/images/og-image.jpg">
<meta property="og:url" content="https://example.com/html-tags/">
<meta property="og:type" content="article">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="HTMLタグ一覧 - 初心者向け完全ガイド">
<meta name="twitter:description" content="HTMLの基本タグを用途別に分類し、実例付きで詳しく解説">
<meta name="twitter:image" content="https://example.com/images/twitter-image.jpg">
</head>
構造化データ
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "HTMLタグ一覧 - 初心者向け完全ガイド",
"description": "HTMLの基本タグを用途別に分類し、実例付きで詳しく解説",
"author": {
"@type": "Organization",
"name": "株式会社WebTech"
},
"datePublished": "2024-01-15",
"dateModified": "2024-01-15"
}
</script>
アクセシビリティ対応
適切なHTML構造
<!-- 正しい見出し階層 -->
<h1>メインタイトル</h1>
<h2>大見出し</h2>
<h3>中見出し</h3>
<h4>小見出し</h4>
<!-- スキップリンク -->
<a href="#main-content" class="skip-link">メインコンテンツへスキップ</a>
<main id="main-content">
<!-- メインコンテンツ -->
</main>
ARIA属性の活用
<!-- ランドマーク -->
<nav aria-label="メインナビゲーション">
<ul>
<li><a href="/" aria-current="page">ホーム</a></li>
<li><a href="/about">会社概要</a></li>
</ul>
</nav>
<!-- 状態を示すARIA -->
<button aria-expanded="false" aria-controls="menu">
メニューを開く
</button>
<ul id="menu" aria-hidden="true">
<!-- メニュー項目 -->
</ul>
<!-- フォームのアクセシビリティ -->
<label for="search">検索キーワード</label>
<input type="search" id="search" aria-describedby="search-help">
<div id="search-help">検索したいキーワードを入力してください</div>
よくある間違いと注意点
HTMLの間違った使い方
見た目のためだけのタグ使用（悪い例）
<!-- ❌ 悪い例：見た目のためだけにh1を使用 -->
<h1>普通の文章だけど大きくしたい</h1>
<h1>これも大きくしたい</h1>
<!-- ✅ 良い例：意味に応じてタグを選択 -->
<h1>ページのメインタイトル</h1>
<p class="large-text">普通の文章だけど大きくしたい</p>
不適切なテーブル使用（悪い例）
<!-- ❌ 悪い例：レイアウトのためにテーブルを使用 -->
<table>
<tr>
<td>ヘッダー</td>
</tr>
<tr>
<td>メインコンテンツ</td>
</tr>
</table>
<!-- ✅ 良い例：適切なセマンティック要素を使用 -->
<header>ヘッダー</header>
<main>メインコンテンツ</main>
修正すべき一般的なエラー
altタグの不適切な使用
<!-- ❌ 悪い例 -->
<img src="photo.jpg" alt="photo.jpg">
<img src="photo.jpg" alt=""> <!-- 装飾画像でない場合 -->
<!-- ✅ 良い例 -->
<img src="photo.jpg" alt="青空の下で笑顔の家族">
<img src="decoration.jpg" alt="" role="presentation"> <!-- 装飾画像 -->
フォームの不適切なラベル
<!-- ❌ 悪い例 -->
<input type="text" placeholder="名前を入力">
<!-- ✅ 良い例 -->
<label for="name">お名前</label>
<input type="text" id="name" placeholder="田中太郎">
HTMLバリデーションとツール
バリデーション（文法チェック）
W3C Markup Validator
HTMLの文法が正しいかチェックするツール：
- URL: https://validator.w3.org/
- 使い方：URLまたはファイルをアップロードして検証
よくあるバリデーションエラー
<!-- ❌ 閉じタグがない -->
<p>文章です
<p>次の文章です</p>
<!-- ❌ 入れ子の間違い -->
<p><h2>見出し</h2></p>
<!-- ❌ 必須属性の欠如 -->
<img src="photo.jpg"> <!-- altが必要 -->
<!-- ✅ 正しい記述 -->
<p>文章です</p>
<p>次の文章です</p>
<h2>見出し</h2>
<p>文章です</p>
<img src="photo.jpg" alt="写真の説明">
便利な開発ツール
ブラウザの開発者ツール
F12キーまたは右クリック「検証」で開く
主な機能：
- HTML構造の確認
- CSS適用状況の確認
- アクセシビリティチェック
- レスポンシブデザインテスト
VS Code拡張機能
おすすめ拡張機能：
- HTML CSS Support
- Auto Rename Tag
- Live Server
- Prettier - Code formatter
- HTML Boilerplate
まとめ
HTMLタグは、Webページの構造と意味を定義する重要な要素です。この記事で紹介したタグを理解し、適切に使い分けることで、検索エンジンにも利用者にも優しいWebページを作成できます。
重要なポイントの再確認
基本構造の理解
<!DOCTYPE html>,<html>,<head>,<body>の役割- セマンティックな要素（
<header>,<main>,<footer>等）の活用 - 適切な見出し階層（h1-h6）の構築
タグ選択の原則
- 見た目ではなく意味で選ぶ:
<strong>は重要性、<em>は強調 - 構造を明確にする:
<section>,<article>,<aside>で論理的区分 - アクセシビリティを考慮: 適切な
alt、label、ARIA属性の使用
品質向上のために
- バリデーション: W3C Validatorでの文法チェック
- SEO対策: 適切なメタタグと構造化データ
- パフォーマンス: 画像の最適化と
loading="lazy"の活用
コメント