演習課題
このページでは、演習課題「HTML中級 #001」で出題された内容を解説します。サンプルコードを確認しながら、HTMLマークアップの考え方や実装のポイントを整理していきましょう。
演習課題の概要
課題では、見出し・段落・リスト・リンクといった HTMLの基本タグを組み合わせて、短いコンテンツを正しく構造化する ことが求められました。
実務では「ただ見た目を作る」のではなく、文書の意味を表すマークアップ が重要です。検索エンジンや支援技術（スクリーンリーダーなど）が解釈する際の基盤にもなるため、構造化を意識する必要があります。
解説：正しいマークアップの考え方
見出しタグ（h1〜h6）
- ページのタイトルは
<h1>に、セクションの小見出しは<h2>以下を使用。 - 見出しは 階層構造を意識 して使うのがポイントです。見た目の大きさ調整にはCSSを使いましょう。
段落タグ（p）
- 文書内のまとまった文章は
<p>タグで囲みます。 - 改行や余白調整を
<br>や CSS に頼りすぎるのは避け、論理的なまとまりを段落としてマークアップ するのがベスト。
リストタグ（ul, ol, li）
- 順序のないリストは
<ul>、順序が必要な場合は<ol>を使います。 - 各項目は必ず
<li>タグで囲み、リスト全体がひとつのグループである ことを示しましょう。
リンクタグ（a）
- 適切なリンクテキストを設定することで、ユーザーにも検索エンジンにも分かりやすく伝わります。
- 「こちら」「クリック」ではなく、リンク先の内容を示す表現 を心がけるのがポイントです。
よくある間違い
- デザイン目的で
<div>を多用してしまい、文書の意味が失われる。 - 見出しの階層が飛んでしまう（例：
h1 → h3）。 - 改行を
<br>だけで対応し、段落を適切に分けない。
実務Tips（ベストプラクティス）
- コードを書く前に ワイヤーフレームやアウトライン を考えておくと、見出し構造がブレにくい。
- HTMLは「意味付け」、CSSは「見た目の調整」と役割を分ける。
- リストやリンクはアクセシビリティの観点からも重要。特にリンクテキストはSEOに直結します。
よくある質問
Q. 見出しは必ず h1 から始めなければいけませんか？
A. はい、基本的にページの最初の見出しは h1 を使います。複数使うよりも、1ページ1つの h1 とするのが推奨です。
Q. 段落と改行はどう使い分けますか？
A. 意味のまとまりがある場合は <p> を使い、単純に行を分けたいときは <br> を使います。
Q. リストはCSSで装飾して使うことが多いですか？
A. はい。リストマークを消したり、フレックスで横並びにするなど、CSSで装飾を加えるのが一般的です。
Q. リンクテキストに「こちら」や「Click here」を使うのは良くないですか？
A. 良くありません。検索エンジンや支援技術に意味が伝わらないため、リンク先を示す具体的な表現を推奨します。