はじめに
HTMLは「Webページを表示するための言語」と説明されがちですが、実務で本当に効いてくるのは“見た目”ではなく“意味”を正しく伝える設計”です。
CSSやJavaScriptがどれだけ高度でも、土台のHTMLが雑だと、検索エンジンやスクリーンリーダー、ブラウザの自動補完、共有時のプレビュー、あるいは将来の改修で必ず詰まります。
特に最近は、SEOやアクセシビリティの要件が「あると良い」ではなく「やらないと損する」レベルになってきました。たとえば、見出し構造が崩れているだけで記事全体の理解が落ちたり、フォームのラベルが欠けているだけで入力体験が悪化したりします。
HTML入門は、タグを暗記する話ではありません。「情報をどう構造化し、どう意味付けするか」を学ぶ話です。
この記事では、ありがちな <div> だらけの入門ではなく、セマンティックHTML（意味を持つタグ）を中心に、実務の“読みやすさ・直しやすさ・伝わりやすさ”へつながる考え方をまとめます。最後に、最小構成のページを手で組み立てながら、アクセシブルな記事ページを作っていきます。
座学
1) HTMLは「文書」：UIではなく“内容”を設計する
HTMLはUI部品の寄せ集めではなく、基本的に文書です。
文書には「タイトル」「章」「節」「注釈」「引用」「手順」「表」「定義」「補足」などの役割があります。HTMLはそれをタグで表現します。
- 見出し：
<h1>〜<h6>（章立て） - 段落：
<p>（文章の単位） - リスト：
<ul><ol><li>（箇条書き・手順） - 強調：
<em>（意味的な強調）、<strong>（重要性） - 引用：
<blockquote>（出典がある引用） - 画像：
<img alt="...">（代替テキスト込みで“意味”を補う）
ここで重要なのは「見た目はCSSで変えられる」ことです。
だからHTMLでは“意味が伝わる構造”をまず作るのが王道です。
2) セマンティックHTML：divから卒業する基準
<div> は万能ですが、万能すぎて意味が失われるのが欠点です。
そこで、HTMLには役割を持ったタグが用意されています。
<header>：ページやセクションのヘッダ領域<nav>：ナビゲーション（リンクの集合）<main>：ページの主要コンテンツ（通常1つ）<article>：独立して成立する内容（記事・投稿など）<section>：意味のある区切り（見出しとセットで使うのが基本）<aside>：補足（関連記事、注釈、広告枠など）<footer>：フッタ領域
判断のコツは「その塊を別ページに切り出しても成立するか？」です。
成立するなら <article>、成立しない補足なら <aside>、ページの主要な中身なら <main>、リンクのまとまりなら <nav> といった具合に、自然に分けられるようになります。
セマンティックにすると何が得か？
- SEO：検索エンジンが内容を理解しやすい
- アクセシビリティ：支援技術が“どこが本文か”を掴みやすい
- 保守性：後から読む人が理解しやすく、変更が怖くない
これらは地味ですが、長期運用ほど効いてきます。
3) 見出し設計：HTML初心者が最初に壊しがちな土台
見出しは「大きい文字」ではなく、アウトライン（章立て）です。
よくあるミスは以下です。
h1が複数ある /h2を飛ばしてh4を使う- デザイン目的で見出しを選んでいる（サイズはCSSで調整すべき）
- セクションの中に見出しがない（構造が伝わらない）
おすすめの考え方：
- ページの最上位タイトルを
h1（基本1つ） - 大見出しを
h2 h3はh2の内側、h4はh3の内側…という“入れ子”を守る
このルールを守るだけで、記事は驚くほど読みやすくなります。
4) リンクとボタンの使い分け：実務での事故を減らす
「リンクっぽいボタン」「ボタンっぽいリンク」はよく見ますが、意味が違います。
<a>：移動（URLがある）<button>：操作（ページ内の動作、送信、開閉など）
例：
- “詳細を見る”で別ページへ →
<a> - “メニューを開く” →
<button> - “送信する” →
<button type="submit">
これを守ると、キーボード操作・スクリーンリーダー・自動テストが全部楽になります。
5) フォームの基本：labelがないとUXもテストも死ぬ
フォームは「動けばOK」ではなく、入力の文脈が大切です。
実務で必須の基本はこれです。
- 入力欄には
labelを付ける（forとidを一致） - まとまりには
fieldsetとlegendを使う - エラーは視覚だけでなく文章で説明する
- 必須は
required、入力種別はtypeで指定
フォームを丁寧に作ると、操作性だけでなく、後の改修やE2Eテストが本当に楽になります。
ハンズオン
ここでは、「記事ページ（ブログ記事）として成立するHTML」を、最小構成から作ります。
CSSなしでも意味が通り、読み上げやすく、後で拡張しやすい構造を目指します。
Step 1：ファイルを作る
index.html を作って、下記を貼り付けます（そのままブラウザで開けます）。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>HTML入門｜セマンティックHTMLで記事ページを作る</title>
</head>
<body>
<header>
<p>さいごうの記述メモ</p>
<nav aria-label="サイト内ナビゲーション">
<ul>
<li><a href="#toc">目次</a></li>
<li><a href="#hands-on">ハンズオン</a></li>
<li><a href="#summary">まとめ</a></li>
</ul>
</nav>
</header>
<main>
<article>
<header>
<h1>HTML入門：セマンティックHTMLで“意味が伝わる”記事ページを作る</h1>
<p>
<time datetime="2026-02-11">2026/02/11</time>
・読了目安：10分
</p>
</header>
<aside aria-label="この記事の要点">
<ul>
<li>HTMLは見た目ではなく“文書構造”を設計する</li>
<li>div多用より、役割のあるタグで意味を伝える</li>
<li>見出し・リンク・フォームの基本が実務を支える</li>
</ul>
</aside>
<nav id="toc" aria-label="目次">
<h2>目次</h2>
<ol>
<li><a href="#why">なぜセマンティックが重要か</a></li>
<li><a href="#structure">記事の構造を作る</a></li>
<li><a href="#form">お問い合わせフォームを追加</a></li>
</ol>
</nav>
<section id="why">
<h2>なぜセマンティックが重要か</h2>
<p>
HTMLは「この文章は見出し」「これは補足」「これは本文」といった意味を、機械にも人にも伝えるための仕組みです。
セマンティックに書くと、検索エンジンや支援技術が本文を理解しやすくなり、改修もしやすくなります。
</p>
<blockquote cite="https://html.spec.whatwg.org/">
<p>
たとえば引用には <code><blockquote></code> を使うことで、「これは引用である」という意図が明確になります。
</p>
</blockquote>
</section>
<section id="structure">
<h2>記事の構造を作る</h2>
<h3>箇条書きはリストで表現する</h3>
<p>手順や要点は、段落で無理に表現せずリストを使うと読みやすくなります。</p>
<ul>
<li>要点：<strong>重要性</strong>を表すなら <code><strong></code></li>
<li>強調：<em>ニュアンスの強調</em>なら <code><em></code></li>
<li>用語：必要なら定義リストも検討する</li>
</ul>
<h3>リンクは“移動”、ボタンは“操作”</h3>
<p>
ページ移動なら <code><a></code>、何かを実行するなら <code><button></code> を選びます。
意味が合っていると、キーボード操作や支援技術でも自然に使えます。
</p>
<p>
例：<a href="#summary">まとめへ移動</a>
／
<button type="button" onclick="alert('これは操作（ボタン）です')">操作する</button>
</p>
</section>
<section id="hands-on">
<h2>ハンズオン：お問い合わせフォームを追加</h2>
<p>
フォームは <code>label</code> を付けるだけで、入力体験とアクセシビリティが大きく改善します。
ここでは「名前」「メール」「内容」を持つ最小フォームを作ります。
</p>
<form action="#" method="post">
<fieldset>
<legend>お問い合わせ</legend>
<p>
<label for="name">お名前</label><br />
<input id="name" name="name" type="text" autocomplete="name" required />
</p>
<p>
<label for="email">メールアドレス</label><br />
<input id="email" name="email" type="email" autocomplete="email" required />
</p>
<p>
<label for="message">内容</label><br />
<textarea id="message" name="message" rows="5" required></textarea>
</p>
<p>
<button type="submit">送信</button>
</p>
</fieldset>
</form>
<p>
ここまでできたら、次は「エラー文言の表示」「送信完了ページ」「バリデーション」などへ拡張していけます。
</p>
</section>
<section id="summary">
<h2>まとめ</h2>
<p>
HTML入門で最も大切なのは、タグの暗記ではなく「文書としての構造」と「意味を正しく伝える」ことでした。
セマンティックHTMLは、SEO・アクセシビリティ・保守性をまとめて底上げしてくれます。
</p>
<p>
特に、見出し設計（アウトライン）、リンクとボタンの使い分け、フォームのラベリングは、
小さな差に見えて実務では大きな差になります。まずは今日作った記事ページの骨組みをベースに、
自分のブログ記事テンプレとして育てていくのがおすすめです。
</p>
</section>
</article>
</main>
<footer>
<small>© 2026 さいごうの記述メモ</small>
</footer>
</body>
</html>
Step 2：チェック観点（手動でOK）
ブラウザで開いたら、次を確認します。
- 見出しが
h1 → h2 → h3の順で自然に読めるか - 目次リンクを押すと該当セクションへ飛べるか
- フォームで未入力のまま送信するとブラウザが必須チェックするか
labelをクリックすると入力欄へフォーカスが移るか
CSSなしでも「意味が通っている」ことが確認できれば成功です。
まとめ
HTMLは“表示のためのタグ”ではなく、情報を構造化するための言語です。
セマンティックに書くほど、検索エンジンにも、人にも、将来の自分にも優しくなります。
入門段階でこの考え方を持てると、後からCSSやJavaScriptを学ぶときも迷子になりにくく、設計の筋が通ります。
コメントを残す