こんにちは。web制作活動をしておりますそーたです。
今回は、「実務一年目のコーダーが知っておいた方がいいタグ５選」ということで、
５つのタグを紹介していきます。
今回は、iSara7thで受けた講師のしょーごさんの講座内容で学んだことです。
- 実務一年目で抜けがちな情報が得られる
- div地獄から抜けられる
- 自分のコードが見やすくなる
実務一年目のコーダーが知っておいた方がいいタグ５選！
題名通り、実務一年目のコーダーが知っておいた方がいいタグ５選を紹介します。
講座で学んだのはこの５つのタグです。
- meta-description
- section
- article
- aside
- nav
それぞれ見ていきたいと思います。
meta-description
僕はこのタグは事前課題中に知ったのですが、SEO対策に非常に重要なタグです。
５つのタグの中で、これだけ唯一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
まとめ
という感じで、５つのタグを紹介してきました。
今のところmeta-descriptionは必須として、
- section
- article
- nav
この三つの使用頻度が多い気がします。
もしかしたら、asideを使うべきところをdivでいってるかもしれませんがw
とにかく、この５つのタグを実務に入り始めた方は意識してみるといいんじゃないかと思います。
最後まで読んでいただきありがとうございましたmm
コメント
you are truly a excellent webmaster. The website loading pace is incredible.
It sort of feels that you’re doing any unique trick. In addition, The contents are
masterpiece. you’ve performed a wonderful activity on this matter!
Feel free to visit my site :: CBD for sale
Helpful information. Lucky me I found your website accidentally, and I’m shocked why this accident didn’t happened in advance!
I bookmarked it.
Feel free to visit my web page – best CBD oil for dogs
Greetings from Ohio! I’m bored at work so I decided
to browse your website on my iphone during lunch break.
I really like the information you present here and can’t wait to take a look when I get home.
I’m surprised at how quick your blog loaded on my cell phone ..
I’m not even using WIFI, just 3G .. Anyhow, fantastic blog!
My web page: best cbd oil for dogs with arthritis
Hi there! I know this is kinda off topic but I
was wondering which blog platform are you using
for this site? I’m getting tired of WordPress because I’ve had issues with
hackers and I’m looking at alternatives for another platform.
I would be fantastic if you could point me in the direction of a good platform.
Hello to every one, since I am truly eager of reading this website’s post to be updated on a
regular basis. It includes nice stuff.
After looking at a handful of the blog articles on your web page, I honestly like your technique of writing a blog.
I bookmarked it to my bookmark site list and will be checking back
soon. Please check out my web site as well and tell me what you think.
Great post. I was checking continuously this blog and I
am impressed! Extremely useful info specially the last part :
) I care for such info a lot. I was looking for this
particular info for a long time. Thank you and good luck.
This site was… how do you say it? Relevant!!
Finally I’ve found something which helped me. Thank you!
my web-site – delta 8 thc
This piece of writing is actually a nice one it helps new internet viewers,
who are wishing in favor of blogging.
Feel free to visit my homepage buy delta 8 thc near me
fantastic put up, very informative. I’m wondering why the other experts of this sector don’t realize this.
You should proceed your writing. I’m sure, you’ve a great readers’ base already!
Feel free to visit my blog post :: delta 8 thc products
Have you ever thought about publishing an ebook or guest
authoring on other sites? I have a blog based
upon on the same topics you discuss and would really like
to have you share some stories/information. I know my
viewers would value your work. If you’re even remotely interested,
feel free to send me an e mail.
Here is my page – best CBD gummies
Actually no matter if someone doesn’t be aware of afterward its up to other people
that they will assist, so here it occurs.
Also visit my blog post CBD gummies for anxiety
Thanks for some other wonderful post. The place else may just
anyone get that type of information in such an ideal way of writing?
I’ve a presentation subsequent week, and I am on the search for such information.
Feel free to surf to my page … best CBD gummies
Thank you for every other informative blog. Where else could I get that kind of information written in such a
perfect approach? I have a mission that I am simply now running on, and I’ve been on the glance out for such information.
My web site … cbd products
Fantastic beat ! I would like to apprentice while you amend your website, how can i subscribe for a weblog web site?
The account aided me a acceptable deal. I were tiny bit familiar of this your broadcast offered shiny transparent concept
Here is my webpage; cbd products
My developer is trying to persuade me to move to .net
from PHP. I have always disliked the idea because of the expenses.
But he’s tryiong none the less. I’ve been using Movable-type on various websites for about a year and am nervous about switching to another
platform. I have heard good things about blogengine.net.
Is there a way I can transfer all my wordpress posts into it?
Any help would be greatly appreciated!
Visit my website; best CBD
I am regular visitor, how are you everybody? This paragraph
posted at this web page is truly nice.
Feel free to visit my blog delta 8 area 52
wonderful submit, very informative. I wonder why
the other specialists of this sector don’t understand this.
You should proceed your writing. I’m sure, you have a great readers’
base already!
My page – delta 8 THC for sale area 52
This design is incredible! You most certainly know how to
keep a reader entertained. Between your wit and your
videos, I was almost moved to start my own blog (well, almost…HaHa!) Fantastic job.
I really loved what you had to say, and more than that, how you presented it.
Too cool!
Feel free to visit my page: best delta 8 thc carts
Hello! I know this is kinda off topic nevertheless I’d figured I’d ask.
Would you be interested in trading links or maybe guest authoring a blog post or vice-versa?
My website addresses a lot of the same topics as yours and I believe we could greatly
benefit from each other. If you happen to be interested feel free to shoot me an email.
I look forward to hearing from you! Fantastic blog by the way!
Here is my web site; delta 8 carts
It is the best time to make some plans for the
future and it is time to be happy. I’ve read this post and if I could I desire
to suggest you few interesting things or tips.
Perhaps you could write next articles referring to this article.
I desire to read more things about it!
Feel free to surf to my web-site delta 8 carts
Excellent post. I will be facing many of these
issues as well..
My homepage … delta 8 THC for sale area 52
I savour, cause I found just what I was looking for.
You have ended my 4 day long hunt! God Bless you man. Have a nice day.
Bye
my blog post: delta 8 THC for sale area 52
Touche. Sound arguments. Keep up the great spirit.
Hi! I’m at work browsing your blog from my new iphone 4!
Just wanted to say I love reading your blog and look
forward to all your posts! Keep up the superb work!
P.S. If you have a minute, would love your feedback on my new
website
re-design. You can find it by searching for «royal cbd» — no sweat if you can’t.
Keep up the good work!
my web site :: delta 8 carts
Fantastic goods from you, man. I’ve take note your stuff
previous to and you’re simply extremely wonderful.
I actually like what you have got right here, certainly
like what you’re stating and the way in which you are saying it.
You make it entertaining and you still take care of to keep it wise.
I cant wait to learn much more from you. This is actually
a wonderful website.
P.S. If you have a minute, would love your feedback on my new
website
re-design. You can find it by searching for «royal cbd» — no sweat if you can’t.
Keep up the good work!
my web page: buy instagram followers
Hello there! This post could not be written any better!
Looking through this article reminds me of my previous roommate!
He always kept preaching about this. I’ll send this information to
him. Fairly certain he will have a good read. Thank you for sharing!
Also visit my web page casino utan svensk licens