こんにちは。web制作活動をしておりますそーたです。
今回は、「実務一年目のコーダーが知っておいた方がいいタグ5選」ということで、
5つのタグを紹介していきます。
今回は、iSara7thで受けた講師のしょーごさんの講座内容で学んだことです。
- 実務一年目で抜けがちな情報が得られる
- div地獄から抜けられる
- 自分のコードが見やすくなる
実務一年目のコーダーが知っておいた方がいいタグ5選!
題名通り、実務一年目のコーダーが知っておいた方がいいタグ5選を紹介します。
講座で学んだのはこの5つのタグです。
- meta-description
- section
- article
- aside
- nav
それぞれ見ていきたいと思います。
meta-description
僕はこのタグは事前課題中に知ったのですが、SEO対策に非常に重要なタグです。
5つのタグの中で、これだけ唯一headの中に記載します。
meta descriptionとは、検索結果のタイトルの下に表示されるそのサイトや記事の説明(概要)文のことです。(下記画像赤枠部分です。)

このタグを書き忘れるとクリック率が下がるので、書き忘れには要注意です。
ページ毎に設定するのが基本です。
section
html5にアップデートされてから、出てきたタグです。
ウェブページ内のその部分が、一つのセクション(意味的なまとまり)であることを示す際に使用します。
sectionは意味的なまとまりであるので、見出しをつける必要があります。
w3c validationというプラグインをエディタに入れておくと、html(cssも)の構造チェックを行ってくれます。
sectionで言うとhタグがないと波線(〜)で知らせてくれるので便利です。
逆に見出しがなさそうな時は、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
まとめ
という感じで、5つのタグを紹介してきました。
今のところmeta-descriptionは必須として、
- section
- article
- nav
この三つの使用頻度が多い気がします。
もしかしたら、asideを使うべきところをdivでいってるかもしれませんがw
とにかく、この5つのタグを実務に入り始めた方は意識してみるといいんじゃないかと思います。
最後まで読んでいただきありがとうございましたmm
コメント