HTML -タグ,属性-

初めに

今日、プログラミングスクールでHTMLを習ったので、復習も兼ねて記録していこうと思います！
勿論、Pythonも同時並行で勉強していきます。

ちなみに、HTMLはVScodeで動かしています。
とても使いやすく、これからプログラムを書くときは大変お世話になりそうだと思いましたね。
（タグの終わりや候補を出してくれるので助かりました。）

HTMLとは

Webページの内容を書くために作られた言語。
Webページは、様々な種類のHTMLタグによって構成される。

つまり、普段見ているWebページは、裏側を見るとHTMLを使って書かれているということです。

いつも何気なく閲覧していましたが、これからWebページを見るときの着眼点が変わりそうだと思いました。

HTMLの記述について

タグ

タグは、<タグ名></タグ名> のように記述する。
最初のタグを開始タグ、後のタグを終了タグと言う。

実際に、h1タグ(見出しを作るために必要なタグ) を使って書いてみます。

<h1>タグの説明</h1>

この場合、h1タグで囲まれたものが見出しとして表示されます!

また、開始タグと終了タグのペアのことを要素と言います。

さらに、要素の中に要素を含めることも可能で、その場合、中にある要素を子要素、外にある要素を親要素と言います。
(子要素を持つことができない要素を、空要素と呼びます。)

属性

それぞれの要素に付ける追加の情報を属性という。
属性は必ず開始タグに記述し、書き方は、属性名="属性の値" となる。

この場合、属性とダブルクォーテーションで囲われている属性の値はペアとなります！
タグのところでも学びましたが、HTMLではこのペアという考え方は大事そうですね。

実際に、h1タグにclass属性(要素にクラス名を指定する属性)、imgタグ(画像を載せるために必要なタグ)にはsrc属性(画像などの場所を指定する属性)をそれぞれつけて書いてみます。

<h1 class="page-title">タイトル</h1>
<img src="sample.png">

属性の値に、ダブルクォーテーションをつけることを忘れないように注意ですね！

また、要素に対して、属性は複数つけることができます。

<img class="page-image" src="sample.png">

しかし、同じ属性は1つの要素に対して1つまでなので、そこも注意が必要です。

おまけ

macでは「command⌘ + S」で状態を保存できるので、VSCodeでコードを一時的に保存する際にとても便利でした！

今日はあまり時間が取れず、習ったこともあまりアウトプットできなくて残念でしたが、時間がある時にコツコツ勉強を進めていこうと思います。
それでは！