※ ChatGPTを利用し、要約された質問です（原文：HTMLの書き方について質問です(初心者)。）
HTMLの書き方について質問です(初心者)。どうして正しく表示されないのか？
このQ&Aのポイント
HTMLを勉強中の初心者が質問です。特定の修正をしないと正しく表示されない理由を教えてください。
正しく表示されるために必要な修正内容について教えてください。
また、修正後のコードの一部が不足しているように見えるのですが、なぜこれで正しく表示されるのでしょうか？
[HTML & スタイルシート トレーニングブック]という本を見ながらHTMLを勉強中です。
この本ではHTMLの書き出し部分は下記のようになっております。
==================================================================================
[ 1 ] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
[ 2 ] Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
[ 3 ] <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
[ 4 ]<head>
[ 5 ]<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
[ 6 ]<title>Osteria Grazie［イタリア料理の店］</title>
[ 7 ]<link href="message.css" rel="stylesheet" type="text/css" />
[ 8 ]</head>
==================================================================================
ところがこのままテキストで書き写し使用しても正しく表示されません。
（具体的に言うと感じやひらがなが文字化けしてしまいます。）
こちらの [ 5 ] を下記のように修正すると正しく出力することができます。
==================================================================================
[ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
↑[ここに[ " ]を書き加える。
==================================================================================
ただし、サンプルディスクに入っているhtmlデータは上記のままで動きます。
どうしてなのでしょうか？
分かる方がいらっしゃいましたら回答お願いします。
また、修正後の
==================================================================================
[ 5 ]<meta http-equiv="Content-Type" content="text/html; charset="utf-8" />
↑[ ? ] ↑[ここに[ " ]を書き加える。
==================================================================================
につきましても、これで正しく表示されるのはいいのですが、そうなると上記の[ ? ]部分の[ " ]の閉じ部分がなくなってしまう気がするのですが、なぜこれで動くのでしょうか？
よろしくお願いします。
一応下に本に付いていたサンプルデータを書き出しておきます。
分かる方がいらっしゃいましたらお願いします。
【サンプルデータ】
==================================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Osteria Grazie［イタリア料理の店］</title>
<link href="message.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="contents">
<h1>Message</h1>
<h2>ご意見ご感想をお書きください</h2>
<form action="mailto:sotechsha@html.sever" method="post" enctype="text/plain">
■名前<br />
<input type="text" name="name1" size="30" /><br />
■メールアドレス<br />
<input type="text" name="email" size="30" /><br />
■メッセージをお願いします<br />
<textarea name="message" rows="6" cols="50"></textarea><br />
</form>
<div id="gotop">
<a href="index.html">Topページにもどる</a>
</div>
</div>
</body>
</html>
==================================================================================
お礼
確認してみたのですが、確かに「shift-jis 」になっておりました。 修正したところ"を省いてもうまく動作させることができました。 回答が同じ内容でしたのでベストアンサーは早かったほうの方とさせていただきましたが、 大変感謝しております。 ありがとうございました。