HTMLを書いてみよう! prat1

ご無沙汰してます、カナやんです!

今まではprogateを使ってコーディングの勉強を独学でしていたところから、ついにHTMLを0から書く課題にやってまいりました!👏👏👏
ここまで来るまでの反復練習の成果でたらいいな・・・と思っている側から、
あれ?タグって今まで習った<head><body><footer>あれあれ?
どこに何を記載したらいいのかわからなくなって来てしまった。
故に<di>タグ以外の使い方知らないーーーーーってなって。

そこで自分なりに図解(手書きで観にくい点ご了承)

名称未設定のノート (3)-2


やっぱりここでも<div>を乱用している。
正直、リンクタグやイメージタグ等以外を<div>だけで書いていっても出来てしまうんですよね〜!ではなんで<main><span><nav>と言ったタグがわざわざ存在しているのが・・・それは一言で言うと、
💡誰が観てもタグを頼りにどんな記事が書かれているのかをわかりやすく見せる為!

例えば、
sectionタグ =セクショニング要素
   各セクション・節・項」といった文書の構造を明示する
mainタグ  =セクショニング要素 bodyの中の<header> や<footer>と同じように1つのHTMLないで1回しか使用できないタグ。この2つの間に入れてメインのコンテンツを作成していく!
navタグ  =セクショニング要素
各ページへのリンクに対して使用されることが多い要素。「お問い合わせ、コンセプト、ホーム」といったような主要となるリンクに使う! ※フッターの著作権や外部サイトへのリンクなどには使用しない!

こういった感じで意味のあるセクショニングタグを使用してく事で
セクション名から今から書こうとしていく内容がなにあを推測できるわけね!

💡まとめると・・・

HTMLでコーディングをする際に重要なのは、HTMLを見ただけでどのタグでどのような内容を記述しているのかを分かるようにすること。メインコンテンツとそれ以外のコンテンツを区別することで文書構造が分かりやすくなります。(だから積極的にセクション要素のタグを使って見やすくしていく必要があったんだ😁!)

参考記事:https://saruwakakun.com/html-css/reference/selector
サルワカさんいつもありがとうございます🤗
これを踏めてこれからHTMLを0から書いていく方法を備忘録として残していきますね!



この記事が気に入ったらサポートをしてみませんか?