こんにちは。
HTMLって正解の書き方が分からなくなる事、ありますよね。
タグの使い方は合っているか、divタグで囲い過ぎてはいないか…。
未だに毎日、手探りで書いております。
今回はHTMLを書いている時に学んだ事を綴っていきます。
pタグとulタグ
WordPressのクラシックエディターで、プライバシーポリシーのページを書いていた時、こんな感じで書いていました。
<p>当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。
<ul>
<li>本人のご了解がある場合</li>
<li>法令等への協力のため、開示が必要となる場合</li>
</ul>
</p>すると、出力されたコードは下記のようになりました。
<p>当サイトでは、個人情報は適切に管理し、以下に該当する場合を除いて第三者に開示することはありません。</p>
<ul>
<li>本人のご了解がある場合</li>
<li>法令等への協力のため、開示が必要となる場合</li>
</ul>WordPressにはエディターで書いた内容を表示する時に、pタグやbrタグを自動挿入する自動整形機能というものがあるのですが、それとは関係なしにpタグの直下にulタグを入れるのは間違っている、むしろ入らないという事を知りました。
また反対に、ulタグの直下にはliタグが入ると決まっているので、pタグを入れる事はできません。
pタグとulタグはお互いに、直下に入る事は出来ないという事になります。
HTMLは自由度が高い
上記の件があった時、今まで書いたコーディングも間違っている箇所があるのではないか、とかなり不安になりました。
それがそのまま世に出ていて、地球の反対側にいる人にまで閲覧されてしまうとなると、たくさんの人に迷惑が掛かってしまう！と今まで世に送り出してきた様々なWebサイトのトップページが走馬灯のように浮かびました。
それからは、PCでネットサーフィンをする度に、ページのコーディングを確認するようになったのですが、タグの使い方やクラスの指定、半角スペースの表現方法（普通に半角スペースを挿入する、特殊文字を使う、letter-spacingを指定するetc…）など作り手によって様々なバリエーションがある事を知りました。
自由度が高いのは良い事なのですが、しばらくコーディングに迷いが出てしまい、自分のコーディングに何かしらの説得力が欲しいと思うようになり調べたところ、下記のページが目に留まりました。
HTML5 入れ子チートシート
https://yoshikawaweb.com/element/
こちらのサイトでは、HTMLのタグの親子関係が確認できます。 更新が2020年1月で止まっているのですが（2023.7.19現在）、それでもこちらのサイトのお陰で自信を持ってコーディングができるようになりました。
こちらのサイトで確認しても、やはりpタグとulタグは直下の親子関係にはなれない事が確認できます。
入れ子、または包含するにはliタグを活用しましょう。
まとめ
今回はHTMLのタグ（要素）について綴っていきました。
Webは世界中で利用できるものなので、自分で書いたコードを世に放つ時は自信を持って送り出したいですよね。
今回書いた内容もすぐに古い知識になってしまうので、これからも新しい知識を取り入れて正しいコーディングを心がけていきたいです。
この記事を読んでいただきありがとうございました。
あなたのお役に立てれば幸いです。ではまた。