HTML ”Writing Semantic HTML”

Semantic HTMLとは

Semanticとは「意味」を意味します。HTMLの要素(Element)がもっている意味です。
例えば、<h1>タグは「このページで最上位タイトル」の意味で使われています。

Semanticでコードを書くと良いこと

1. マークアップで重要キーワードが検索エンジンに影響をあげます。
2. 視覚障害があるuserがページを見る時マークアップでより見やすくなります。
3. 意味を付与すれば、コードブロックを分類して整理しやすくなります。
4. 開発者にタグ内に入るデータタイプを提案します。

Element

<article>、<aside>、<details>、<figcaption>、<figure>、<footer>、<header>、<main>、<mark>、<nav>、<section>、<summary>、<time>...

HTMLの内が全部<div>の世界になると自分がとこを書いてとこをマークアップしようとしたかわからなくなります。
Semantic HTMLを使えばタグ一つ一つに意味を付与してよりわかりやすくした方が良いと！！

💢ダメです。

<div>
  <div>Headerです。</div>
  <div>
    <div>navです。</div>
    <div>
      <div>コンテンツです。</div>
      <div>コンテンツです。</div>
      <div>コンテンツです。</div>
    </div>
    <div>サイドバーです。</div>
  </div>
  <div>Footerです。</div>
</div>	

💯OKです。

<main>
  <header>Headerです。</header>
  <section>
    <nav>navです。</nav>
    <article>
      <article>コンテンツです。</article>
      <article>コンテンツです。</article>
      <article>コンテンツです。</article>
    </article>
    <aside>サイドバーです。</aside>
  </section>
  <footer>Footerです。</footer>
</main>