HTMLのエラー処理について
# モチベーション
少し前にLPなどを書くタスクをした時に、CSSどころか、HTMLすらも怪しいと思い、
もう一度学び直そうと思いました。
その際、HTMLのエラー処理が面白かったので、発表しようと思いました。
# HTMLのエラー処理とは
HTMLのエラー処理とは、HTMLの文法的なエラーをブラウザが補ってくれる事をエラー処理と言います。
有名な物だと、Pタグの閉じタグがない場合はブラウザが自動的に追加してくれるなどです。
# 問題
ここで問題です。
# 問題1
<!DOCTYPE html>
<html>
<body>
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
</body>
</html>
bタグはどうなるでしょうか。
1つ選択してください。
①開始タグの直後に閉じタグが追加される。 ②文章の最後に閉じタグが追加される。 ③ブラウザが無視する。
# 問題2
<!DOCTYPE html>
<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,</b>
</body>
</html>
bタグはどうなるでしょうか。
1つ選択してください。
①閉じタグの前に開始タグが追加される。 ②文章の前に開始タグが追加される。 ③ブラウザが無視する。
# 問題3
<!DOCTYPE html>
<html>
<body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
</body>
</html>
pタグはどうなるでしょうか。
1つ選択してください。
①閉じタグの前に開始タグが追加される。 ②文章の先頭に開始タグが追加される。 ③ブラウザが無視する。
# 問題4
<!DOCTYPE html>
<html>
<body>
<a href="">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
</a>
</body>
</html>
bodyタグの中は、どうなるでしょうか。
1つ選択してください。
①
<a href>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
</a>
②
<p>
<a href>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
</a>
</p>
③
<a href>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
</p>
</a>
④
<a href></a>
<p>
<a href>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
</a>
</p>
# 問題5
<!DOCTYPE html>
<html>
<body>
<p><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>
bodyタグの中は、どうなるでしょうか。
1つ選択してください。
①
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
②
<p>
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</b>
</p>
<b>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</b>
③
<p></p>
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</b>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
④
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</b>
<b>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</b>
# 問題6
<!DOCTYPE html>
<html>
<body>
<p>
<b><b><b><b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</body>
</html>
bodyタグの中は、どうなるでしょうか。
1つ選択してください。
①
<p>
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</b>
</p>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
②
<p>
<b>
<b>
<b>
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</b>
</b>
</b>
</b>
</p>
<b>
<b>
<b>
<b>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</b>
</b>
</b>
</b>
③
<p>
<b>
<b>
<b>
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</b>
</b>
</b>
</b>
</p>
<b>
<b>
<b>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</b>
</b>
</b>
④
<p>
<b>
<b>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</b>
</b>
</p>
<b>
<b>
<p>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</b>
</b>
# 問題7
<!DOCTYPE html>
<html>
<body>
<table>
<tr>
<th>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</th>
<td>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<p>Ut enim ad minim veniam,</p>
</table>
</body>
</html>
pタグはどうなるでしょうか。
1つ選択してください。
①どこにも移動せずに表示される。 ②tableタグの下に移動する。 ③tableタグの上に移動する。 ④ブラウザに無視される。
# 問題8
<!DOCTYPE html>
<html>
<body>
<table>
[ ]
<tr>
<th>Lorem ipsum dolor sit amet, consectetur adipiscing elit,</th>
<td>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td>
</tr>
<p>Ut enim ad minim veniam,</p>
</table>
</body>
</html>
※ [ ]は全角スペースです。[]は目印としてつけただけなので、ないものとして考えてください。
全角スペースは、どうなるでしょうか。
1つ選択してください。
①どこにも移動せずに表示される。 ②tableタグの下に移動する。 ③tableタグの上に移動する。 ④ブラウザに無視される。
# 答え
問題1:② 問題2:③ 問題3:① 問題4:④ 問題5:② 問題6:③ 問題7:③ 問題8:④