MDNを読み漁ってみた

まだまだ暑いですね💦
今回は以前書いたmetaタグなどひっくるめて、HTMLのリファレンスのサイトMDN web docsを読んでみましたのでまとめておこうかと思います。

MDN Web Docs

今回はHTMLのページについて◎
まずHTML(HyperText Markup Language)とはなんなのかから～

HTML (HyperText Markup Language) はウェブのもっとも基本的な構成要素です。 
HTML はウェブページの基本レイアウトに従ってウェブページのコンテンツを記述し定義するもの。

以降は(長くなってしまうので)かるぼなーらが読んでいてふむふむとなったところだけ抜粋しますね♪笑

空要素

H1タグやpタグのように、開始タグと終了タグがあり、その間にコンテンツを含むものが多い一方、imgタグには終了タグがありません。

<p>pタグの中身です。</p>
<h1>h1タグの中身です。</h1>
<img src="https://source.unsplash.com/random" alt="ダミー画像です。">

image 要素はその機能を果たすためにコンテンツを囲うものではないからです。 image 要素の目的は画像を HTML ページの表示させたいところに埋め込むことです。
かるぼなーらはHTMLを書いている時、タグの終了前にこんな風に「/」を入れていましたが、HTML5ではいらないようですね…💦
よくよく勉強してから使うべきでした。

<!-- 不要な要素が入ったimgタグ -->
<img src="https://source.unsplash.com/random" alt="ダミー画像です。" />

ちなみに、imgタグの中のsrcという属性リファレンス内に登場しているURLですが、なんでしょうか？？
皆さんご存じでしたか？
こちらは、ダミー画像を好きなサイズで用意できるサイトでマークアップの練習をしている時など非常に便利なことがわかりました♪
randomのあとに「○○x○○」といれることで好きなサイズで使えるようですよ～タメニナッタネ～

Unsplash Source

附随コメント要素

ってなんだ～ってなりませんでした？笑
タグでいうとsmallタグがそれに該当します。
表示上のスタイルとは関係なく、著作権表示や法的表記のような、注釈や小さく表示される文を表します。
今までコピーライトのとことか普通にpタグで書いてしまっていたのですが、smallタグを使うほうがベターなようですね…気を付けます💦

<small>&copy; carbonara All Rights Reserved.</small> 

対応ブラウザの確認…

たくさんあるHTMLのタグですが、ブラウザの仕様によって、見え方、表示のされ方が異なる場合があるので、注意が必要です。

hrタグは水平線を簡単に引けるタグですが、Chromeとfirefoxとでは濃さや太さが違います…
inputタグのdate属性はブラウザによって、カレンダーが出たり出なかったり、日付が「年/月/日」や「yyyy/mm/dd」と表示されたりと
お客さんや閲覧者の見る環境によって、見え方が異なることを留意する必要があります。

見え方が違う場合はCSSを使って整えてあげるのが現実問題ですが、
ここではHTMLに留めておきますね♪
次はCSSの項を読んでまた新たな発見をまとめられればと…