TIL 9. HTML(Semantic)

1876 ワード
html semantic テキストリンク

Semantic element


HTMLを書くとき、退屈ではないラベルはdivであるはずです.
divとともにstyleなど多くのプロパティを使用すると、私たちが望むドキュメントを作成できます.
しかしdivには何の意味もないため、HTML作成者以外の人やブラウザはそのtagの意図や目的を知らない.
ex)
<div style="font-size: 32px;margin: 21px 0;">
  Hello
</div>
<h1>Hello</h1>
両方のコードはブラウザで同じように出力されます.
しかし、div tagはstyle要素へのtextにすぎない.
h 1は、テキストがタイトルを意図したタグであることがわかる.
それだけでなく、Semanticタグを使うメリットはたくさんあります.
注意:MDN(Semantics)

代表的なSemantic tag


Semantic tagには100以上の利用可能な要素があります.
主に使っているtagを紹介して、それから終わります.
  • header
  • nav
  • section
  • article
  • footer
  • nav
    • 単語クロック、言葉で時間を指示する時計を作る
    220119