HTMLをナメている人、Web系の仕事で痛い目をみますよ。
という事で、Webの基礎中のキの字でもある、HTMLに関する基本クイズを作ってみました。
1. 閉じタグがない？！
次のHTMLで間違っている部分はどこでしょう？
<h1>ようこそ！</h1>
<p>このサイトではHTMLを学べます。
<b>楽しいレッスンがたくさん！
<a href="https://example.com">ここからアクセス</a>
</p>
- <b> タグに閉じタグがない
- <p> タグが閉じられていない
- <a> タグが閉じられていない
- タグの順序が間違っている
正解
正解を見る。
1. <b> タグに閉じタグがない
解説
<b> タグは開始タグのみで終了タグがないため、意図しないスタイル崩れ を引き起こす可能性があります。
修正コード
<p>このサイトではHTMLを学べます。
<b>楽しいレッスンがたくさん！</b>
<a href="https://example.com">ここからアクセス</a>
</p>
2. 入力フォームの罠
次のHTMLで間違っている部分はどこでしょう？
<form action="submit.php" method="POST">
<label>ユーザー名:</label>
<input type="text" name="username">
<label>パスワード:</label>
<input type="password" name="password">
<button>送信</button>
</form>
- <button> に type="submit" がない
- <label> に for 属性がない
- <input> に id がない
- <form> に enctype が指定されていない
正解
正解を見る。
2. <label> に for 属性がない
解説
<label> タグには for 属性 を付けることで、対応する入力フィールドと結びつけるべきです。
これがないと、クリック時に対応フィールドにフォーカスされない ため使い勝手が悪くなります。
修正コード
<form action="submit.php" method="POST">
<label for="username">ユーザー名:</label>
<input type="text" name="username" id="username">
<label for="password">パスワード:</label>
<input type="password" name="password" id="password">
<button type="submit">送信</button>
</form>
3. リンクの意外な罠
次のHTMLで間違っている部分はどこでしょう？
ヒント : 別ドメインへリンクする際に必須の設定
<a href="https://example.com" target="_blank">
外部サイトへ移動
</a>
- target="_blank" が不要
- href のURLが間違っている
- セキュリティ対策が不足している
- <a> タグが間違っている
正解
正解を見る。
3. セキュリティ対策が不足している
解説
target="_blank" を使うと、リンク先のページが 元ページを操作できる セキュリティ問題（タブナビゲーション攻撃）があります。
対策として、rel="noopener noreferrer" を付ける必要があります。
修正コード
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
外部サイトへ移動
</a>
４. 画像が表示されない？！
次のHTMLで間違っている部分はどこでしょう？
ヒント : 画像はimgフォルダに入れて管理されているよ。
<img src="image.jpg" alt="画像が表示されません">
- src にファイルパスがない
- alt 属性が不適切
- ファイル拡張子が誤っている
- width や height が指定されていない
正解
正解を見る。
1. src にファイルパスがない
解説
src="image.jpg" だと、HTMLファイルと同じディレクトリにある画像のみ表示される。
異なるパスの場合は、相対パスや絶対パスを正しく記載する必要があります。
修正コード
<img src="./assets/images/image.jpg" alt="画像が表示されません">
あとがき
正直、よく間違うかどうかはよくわからないけど、
中には勉強になった問題もあるんじゃないでしょうか？
こうやってクイズで出されると、おふざけっぽく手軽に見ることができるけど、
実際の仕事で自分が書いたコードの場合、ミスを見つけるのって難しいんですよね。
それを見つけるコツは、HTMLのミスしやすいコツを体に染み込ませるしかないかも。
0 件のコメント:
コメントを投稿