2026年4月16日
HTML練習問題で実力をつけよう
HTMLの基本を学んだら、次は実際に手を動かして練習することが大切です。
この記事では、HTML 練習問題を初心者向けに10問まとめました。タグの書き方・リンク・画像・リストなど、よく使う知識を確認できます。
各問題には解答例もついています。まず自分で考えてから、解答例と比べてみましょう。
💡 練習の進め方：
- テキストエディタ（メモ帳など）を開く
- 問題を読んで、自分でコードを書いてみる
- ファイルを
.htmlで保存してブラウザで確認する - 解答例と見比べて、違いを確認する
問題1〜3：基本のタグ
問題1：見出しと段落を書こう
「私の好きなもの」という見出し（h1）と、「ゲームと読書が好きです。」という段落（p）を書いてください。
解答例を見る
<h1>私の好きなもの</h1>
<p>ゲームと読書が好きです。</p>▶ プレビュー
問題2：箇条書きリストを書こう
「好きな食べ物」という見出し（h2）と、「ラーメン」「カレー」「寿司」の3つを箇条書き（ul・li）で書いてください。
解答例を見る
<h2>好きな食べ物</h2>
<ul>
<li>ラーメン</li>
<li>カレー</li>
<li>寿司</li>
</ul>問題3：番号つきリストを書こう
「朝のルーティン」という見出し（h2）と、「起きる」「顔を洗う」「朝ごはんを食べる」を番号つきリスト（ol・li）で書いてください。
解答例を見る
<h2>朝のルーティン</h2>
<ol>
<li>起きる</li>
<li>顔を洗う</li>
<li>朝ごはんを食べる</li>
</ol>🔗 あわせてパスの書き方（相対・絶対）もチェックしてみましょう。
問題4〜6：リンクと画像
問題4：リンクを書こう
「Googleで調べる」というテキストのリンクを書いてください。リンク先は https://www.google.com です。
解答例を見る
<a href="https://www.google.com">Googleで調べる</a>▶ プレビュー
href 属性にリンク先のURLを書きます。
問題5：別タブで開くリンクを書こう
「公式サイトを見る」というリンクを書いてください。クリックすると新しいタブで開くようにしてください。
解答例を見る
<a href="https://www.google.com" target="_blank">公式サイトを見る</a>▶ プレビュー
target="_blank" を追加すると、新しいタブで開きます。
問題6：画像を表示しよう
cat.jpg という画像ファイルを表示してください。画像が読み込めないときに「かわいい猫」と表示されるようにしてください。
解答例を見る
<img src="cat.jpg" alt="かわいい猫">src に画像ファイルのパス、alt に代替テキストを書きます。
📖 詳しくはHTMLリンクの作り方で解説しています。
問題7〜10：ページの構造
問題7：太字と斜体を使おう
「プログラミングは楽しいです。毎日練習しましょう。」という文章を書いてください。「楽しい」を太字、「毎日」を斜体にしてください。
解答例を見る
<p>プログラミングは<strong>楽しい</strong>です。<em>毎日</em>練習しましょう。</p>問題8：テーブルを書こう
「名前」「年齢」の2列のテーブルを作り、「【名前】」「15歳」という1行のデータを入れてください。
解答例を見る
<table>
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
<tr>
<td>【名前】</td>
<td>15歳</td>
</tr>
</table>th はヘッダーセル（太字）、td はデータセルです。
問題9：フォームを書こう
「名前を入力してください」というラベルと、テキスト入力欄、「送信」ボタンを書いてください。
解答例を見る
<form>
<label for="name">名前を入力してください</label>
<input type="text" id="name" name="name">
<button type="submit">送信</button>
</form>問題10：HTMLの骨組みを完成させよう
タイトルが「私のページ」、本文に「はじめてのHTMLページです。」という段落を持つ、完全なHTMLファイルを書いてください。
解答例を見る
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>私のページ</title>
</head>
<body>
<p>はじめてのHTMLページです。</p>
</body>
</html>👉 classとidの違いも参考にしてください。
練習問題を解くときのコツ
HTMLの練習問題を効果的に解くためのコツを紹介します。
コツ1：まず自分で書いてみる
答えを見る前に、必ず自分でコードを書いてみましょう。間違えても大丈夫です。「どこが違うのか」を考える過程が一番の学びになります。最初から正解を見てしまうと、わかった気になるだけで身につきません。
コツ2：ブラウザで確認する
コードを書いたら、必ずブラウザで表示を確認しましょう。頭の中で想像するだけでは、実際の見た目と違うことがよくあります。保存してブラウザを更新する癖をつけてください。
コツ3：エラーを怖がらない
HTMLは文法が間違っていてもエラーメッセージが出ないことが多いです。表示がおかしいときは、タグの閉じ忘れや属性のスペルミスを疑いましょう。一つずつ確認すれば必ず原因が見つかります。
コツ4：少しずつ難易度を上げる
最初は見出しと段落だけの簡単な問題から始めましょう。慣れてきたらリスト、リンク、画像と使うタグを増やしていきます。HTMLの基本をもう一度確認したい人は「HTMLとは？初心者向けにわかりやすく解説」を読み直してみてください。
練習問題が全部解けたら、次はCSSでデザインを整えてみましょう。HTMLで作った構造にCSSを加えると、見た目が大きく変わります。CSSの基本は「最初のCSS」で学べます。練習問題で作ったページをCSSで装飾すると、実践的な練習になります。
まとめ
- ✅ 見出し・段落・リスト：HTMLの基本タグを使いこなそう
- ✅ リンク：
<a href="...">でリンクを作る - ✅ 画像：
<img src="..." alt="...">で画像を表示する - ✅ テーブル・フォーム：
table・formタグで表や入力欄を作る - ✅ 練習は「書いて → 保存して → ブラウザで確認」のくり返しが大切
10問すべて解けたら、レッスンでさらに深く学んでみましょう。実際に動くページを作りながら、HTMLの使い方を身につけられます。