はじめに
MDN Web Docs の 基本的な HTML の構文 のページを読みます。
これまで MDN のページを読んだまとめ記事は以下の通りです。
※ 読み進め方や、なぜ今あらためて MDN Web Docs を読んでいるのか については、以前の記事 に書いています
読みながら確認したこと
今回は、MDN Web Docs の HTML によるコンテンツの構造化 のページ（チュートリアルとチャレンジ問題を通して学ぶ構成のページ）に、次に読むべきページがまとめられているので、その中で最初にある 基本的な HTML の構文 を読み進めます。
前回までの内容（HTML: コンテンツの作成）と重なる部分も多いので、復習しながら理解の漏れがないかを確認するつもりで読み進めました。
属性値を囲む引用符
HTML の属性値（属性の値である https://qiita.com/ryamate の部分）は、引用符で囲んで書くのが基本です。
<a href="https://qiita.com/ryamate">ryamateのマイページ - Qiita</a>
属性値に空白が含まれない場合は引用符を省略できることもありますが、空白が入ると意図しない解釈になることがあります。
<a href=https://qiita.com/ryamate title=My Qiita page>ryamateのマイページ - Qiita</a>
この場合、title 属性の値は My Qiita page ではなく My だけとして扱われてしまいます。
そのため、属性値は省略できる場合でも引用符で囲む方が安全です。
<a href="https://qiita.com/ryamate" title="My Qiita page">ryamateのマイページ - Qiita</a>
引用符は二重引用符 " と単一引用符 ' のどちらも使えます。
<a href="https://qiita.com/ryamate">ryamateのマイページ - Qiita</a>
<a href='https://qiita.com/ryamate'>ryamateのマイページ - Qiita</a>
また、属性値の中で外側と同じ引用符を使いたい場合は、文字参照を使います。
<a href="https://qiita.com/ryamate" title="ryamateの "Qiita" マイページ">ryamateのマイページ - Qiita</a>
このように書けるということは把握しつつ、属性値は二重引用符か単一引用符で常に囲む、でよさそうです。
HTML 内のホワイトスペース
スペース、改行、タブなどの空白文字をまとめて ホワイトスペース と呼びます。
HTML を書くときは、読みやすくするために改行やインデントを入れることがありますが、以下の 2 つは、HTML の表示結果としては同じになります。
<p>MDN Web Docs</p>
<p>MDN
Web
Docs</p>
「2 つのコードスニペットは等価」という説明があり、コードの書き方は違っていても、ブラウザで表示した結果が同じになることを、ここでは 等価 と捉えておきます。
ホワイトスペースについては以下のページにさらに詳しい記載があるため、あわせて目を通しておくとよさそうです。
ざっくりまとめると、以下のようなことが書いてあります。
- HTML のホワイトスペースは完全に無視されるわけではない
- DOM 上にはテキストノードとして保持される
- 一方で、ブラウザで表示されるときには CSS の処理により、ホワイトスペースが削除・変換される
改行やインデントは主にコードを読みやすくするためのものですが、DOM 操作やレイアウトではホワイトスペースが影響する場合もある、という点に注意が必要です。
<!doctype html> とは
<!doctype html> は、HTML 文書の先頭に書く宣言です。
MDN では歴史的な背景にも触れられていましたが、「この文書は HTML 文書です」と示すために先頭に書くものと捉えておけばよさそうです。
普段は気にすることがなかったですが、最初の 1 行にもきちんと意味があるのだと分かりました。
文字参照 とは
HTML では、<、>、"、'、& などの文字は特別な意味を持ちます。これらを本文中にそのまま書くと、ブラウザが HTML の構文の一部として解釈してしまいます。
そのため、文字そのものとして表示したい場合は文字参照を使う必要があります。
| 実際の文字 | 文字参照 |
|---|---|
< |
< |
> |
> |
" |
" |
' |
' |
& |
& |
たとえば、次のように書くと、
<p>HTML では、<p> 要素で段落を定義します。</p>
<p> がタグとして解釈されてしまい、意図した表示になりません。
このような場合は、次のように書きます。
<p>HTML では、<p> 要素で段落を定義します。</p>
つまり文字参照は、HTML の構文と本文の文字列を区別するための仕組みだと理解しました。
おわりに
今回は、HTML の基本的な構文として、属性値の引用符、ホワイトスペース、<!doctype html>、文字参照について確認しました。
引き続き MDN を読みながら、基礎の理解を固めていきたいと思います。
ありがとうございました。
Web 開発の会社に入社してすでに 4 年経過した私が基礎勉強している様子を見て焦らず進んでほしい、という形での応援で、イベント参加、タグづけしています 