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

iSaraの評判は?7期受講者が解説 フリーランス

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

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

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

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

この記事を読むメリット
  • 実務一年目で抜けがちな情報が得られる
  • div地獄から抜けられる
  • 自分のコードが見やすくなる

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

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

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

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

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

meta-description

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

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

meta-descriptionとは?

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

コメント

  1. CBD for sale より:

    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

  2. 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

  3. 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

  4. 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.

  5. 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.

  6. cbd gummies より:

    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.

  7. 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.

  8. delta 8 thc より:

    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

  9. 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

  10. 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

  11. 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

  12. 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

  13. 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

  14. cbd products より:

    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

  15. 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

  16. best CBD より:

    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

  17. delta 8 area 52 より:

    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

  18. 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

  19. 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

  20. delta 8 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

  21. 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

  22. Excellent post. I will be facing many of these
    issues as well..

    My homepage … delta 8 THC for sale area 52

  23. 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

  24. Touche. Sound arguments. Keep up the great spirit.

  25. delta 8 carts より:

    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

  26. 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

  27. 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