フォーマッターと検証ツール
index.htmlを以下のように記述しましたが、
<!DOCTYPE html>
<html>
<head>
<title>初めてのHTML</title>
</head>
<body>
<img src="images/sample.jpg" alt="東茶屋街の街並みの画像" />
<p>東茶屋街の街並みです！</p>
<p>とても綺麗でした！</p>
</body>
</html>
1行でもブラウザで表示する際は特に変化はありません。
<!DOCTYPE html><html><head><title>初めてのHTML</title></head><body><img src="images/sample.jpg" alt="東茶屋街の街並みの画像" /><p>東茶屋街の街並みです！</p><p>とても綺麗でした！</p></body></html>
しかし、1行で書くとhtmlファイルを編集する際に、見通しが悪いため、
タグごとに改行し、タグの中に別のタグが含まれる場合は、
その分インデントを下げる（半角スペース2個分が望ましい）ことが推奨されます。
VSCodeの場合、Prettierという拡張機能を入れて設定を編集すると、改行やインデントを自動で整えてくれます。
設定方法
右側のsettingsページにて、入力欄にformat on saveと入力
下部に表示された「Editor: Format On Save」をチェック
DevToolsとは、Google Chromeに搭載されている開発者用検証ツールで、表示されているページが、実際にどのようなHTMLの構成になっているか、どのようなスタイリングがされているのかを確認することができます。
先ほど作成したindex.htmlをlive serverで開きましょう。
開いたページにて、command + option + i を押すと、
右側にDevToolsが開きます。
DevToolesの最上部のタブを要素にすると、HTMLが表示され、
表示されたHTMLのタグにホバーすると、左側に表示されるページの対応部分が強調されたり、
タグをクリックすると、そのタグに適応されているスタイリングが右側に表示され確認することができます。
