iSara現地講座5日目まとめ①

こんにちは。web制作活動をしておりますそーたです。

今回は、「実務一年目のコーダーが知っておいた方がいいタグ５選」ということで、

５つのタグを紹介していきます。

今回は、iSara7thで受けた講師のしょーごさんの講座内容で学んだことです。

実務一年目のコーダーが知っておいた方がいいタグ５選！

題名通り、実務一年目のコーダーが知っておいた方がいいタグ５選を紹介します。

講座で学んだのはこの５つのタグです。

• meta-description
• section
• article
• aside
• nav

それぞれ見ていきたいと思います。

meta-description

僕はこのタグは事前課題中に知ったのですが、SEO対策に非常に重要なタグです。

５つのタグの中で、これだけ唯一headの中に記載します。

このタグを書き忘れるとクリック率が下がるので、書き忘れには要注意です。

ページ毎に設定するのが基本です。

section

html5にアップデートされてから、出てきたタグです。

ウェブページ内のその部分が、一つのセクション（意味的なまとまり）であることを示す際に使用します。

sectionは意味的なまとまりであるので、見出しをつける必要があります。

逆に見出しがなさそうな時は、divを使ってもいいかもしれません。

article

articleタグを使う時は、記事（新聞・雑誌）のカード、またブログのエントリーやコメント欄にも使用されます。

個人的に、新たに学んだタグの中で一番感動したのはこのarticleタグです。

というのも、articleタグを使うことによって

htmlを見たときに “記事のブロックなんだな” とパッと認識できるようになりました。

div地獄にハマっていた分、これでかなりhtmlが見やすくなった感覚があります。

✅article使用

<article class="card">
 <h1 class="card-title">ホゲ</h1>
  <p class="card__text">hogehogehogehogehogehogehogehoge</p>
  <p class="card__text--secondary">hoge2hoge2hog2ehoge2hoge2hoge2hoge2hoge2</p>
  <a class="card__btn" href=""#>hogeボタン</a>
</article>
<article class="card">
 <h1 class="card-title">ホゲ</h1>
  <p class="card__text">hogehogehogehogehogehogehogehoge</p>
  <p class="card__text--secondary">hoge2hoge2hog2ehoge2hoge2hoge2hoge2hoge2</p>
  <a class="card__btn" href=""#>hogeボタン</a>
</article>
<article class="card">
 <h1 class="card-title">ホゲ</h1>
  <p class="card__text">hogehogehogehogehogehogehogehoge</p>
  <p class="card__text--secondary">hoge2hoge2hog2ehoge2hoge2hoge2hoge2hoge2</p>
  <a class="card__btn" href=""#>hogeボタン</a>
</article>

✅div使用

<div class="card">
 <h1 class="card-title">ホゲ</h1>
  <p class="card__text">hogehogehogehogehogehogehogehoge</p>
  <p class="card__text--secondary">hoge2hoge2hog2ehoge2hoge2hoge2hoge2hoge2</p>
  <a class="card__btn" href=""#>hogeボタン</a>
</div>
<div class="card">
 <h1 class="card-title">ホゲ</h1>
  <p class="card__text">hogehogehogehogehogehogehogehoge</p>
  <p class="card__text--secondary">hoge2hoge2hog2ehoge2hoge2hoge2hoge2hoge2</p>
  <a class="card__btn" href=""#>hogeボタン</a>
</div>
<div class="card">
 <h1 class="card-title">ホゲ</h1>
  <p class="card__text">hogehogehogehogehogehogehogehoge</p>
  <p class="card__text--secondary">hoge2hoge2hog2ehoge2hoge2hoge2hoge2hoge2</p>
  <a class="card__btn" href=""#>hogeボタン</a>
</div>

article使用時とdiv使用時で、比較してみると如何でしょうか。

divだらけのコードの中に、articleタグがあるとパッと見わかる感じがしませんか？

と、コードはこんな感じで、

articleを使うと全体的にすっきりに、いい感じに書くことができます。

（ちなみにこのクラス名の書き方はBEM（ベム）と言われる書き方です。勉強中なのでまた機会があればそのブログも書きます。）

aside

asideタグは、「サイトの内容の本筋からは逸れるが、補足・使い情報として触れておきたい内容を示す」時に使います。

本で言う、注釈みたいな感じでいいと思います。

僕自身はまだ使ったことがないのですが、

HTML5タグリファレンスにコードも記載してあったので、

見ていただくとイメージがしやすいかと思います。

とまあ、こんなに偉そうに書いてはいるのですが、

このブログを書くまで、

asideタグは、yahooトップページにあるような、サイドにあるブロックのために使うと勘違いしてましたw（赤丸のとこ）

読者の皆さんは勘違いなく使ってくださいね。

nav

navタグは、navigationに使うためのタグです。

だいたいヘッダーとフッターにあるかと思います。

そして、このnavタグは、構成が似てても一回だけしか使ってはいけないというルールがあります。

だいたい、navタグはheaderに使うことが多いので、

footerのナビゲーションは、liタグ等で実装してみるといいですね。

僕もこのルールを知るまでは、headerとfooterどちらも使っていましたw

まとめ

という感じで、５つのタグを紹介してきました。

今のところmeta-descriptionは必須として、

• section
• article
• nav

この三つの使用頻度が多い気がします。

もしかしたら、asideを使うべきところをdivでいってるかもしれませんがw

とにかく、この５つのタグを実務に入り始めた方は意識してみるといいんじゃないかと思います。

最後まで読んでいただきありがとうございましたmm