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

  28. online slot より:

    Having read this I thought it was rather enlightening.

    I appreciate you taking the time and effort to put this article together.
    I once again find myself personally spending way too much time both reading and commenting.

    But so what, it was still worth it!

    My website: online slot

  29. Attractive part of content. I simply stumbled upon your site and in accession capital to assert that
    I get in fact enjoyed account your weblog posts. Anyway I will be subscribing on your feeds and even I fulfillment you get right
    of entry to persistently fast.

    my blog; thc gummies [http://www.seattleweekly.com]

  30. buy thc gummies より:

    Very soon this web page will be famous among all blog people,
    due to it’s good articles

    Feel free to visit my blog post; buy thc gummies

  31. It’s very straightforward to find out any matter on web as compared to textbooks, as I found this post
    at this web site.

    Also visit my web page :: Best Delta 8 THC Gummies

  32. delta 8 gummies より:

    Fantastic website. Lots of useful info here. I am sending
    it to several friends ans also sharing in delicious.
    And certainly, thanks for your sweat!

    Here is my page delta 8 gummies

  33. This is a topic that’s near to my heart… Take care!
    Where are your contact details though?

    My web-site – purchase Instagram followers

  34. Way cool! Some extremely valid points! I appreciate you writing
    this write-up and the rest of the site is also really good.

    my web blog … delta 8 gummies (https://www.thedailyworld.com/)

  35. A motivating discussion is definitely worth
    comment. There’s no doubt that that you need to write more
    on this subject matter, it might not be a taboo subject
    but generally folks don’t speak about such subjects. To the next!
    Cheers!!

    my website; buy Instagram followers

  36. Hey! Quick question that’s totally off topic.
    Do you know how to make your site mobile friendly?
    My site looks weird when browsing from my apple iphone.
    I’m trying to find a template or plugin that might be able to correct this problem.
    If you have any suggestions, please share. Thank you!

    my web-site – purchase Instagram likes

  37. I’m impressed, I must say. Seldom do I come across a blog that’s
    both educative and interesting, and without a doubt, you’ve hit the nail on the head.
    The problem is an issue that not enough folks are speaking intelligently about.
    Now i’m very happy I stumbled across this during my search for something
    relating to this.

    My web blog: cannabis gummies

  38. delta 8 vapes より:

    Hello, Neat post. There’s an issue together with your website
    in internet explorer, could check this? IE still is the marketplace leader and
    a huge component to people will leave out your great writing due
    to this problem.

    Have a look at my web page – delta 8 vapes

  39. I was wondering if you ever considered changing the page layout of your site?

    Its very well written; I love what youve got to say.
    But maybe you could a little more in the way of content so people could connect with it
    better. Youve got an awful lot of text for only having
    1 or two pictures. Maybe you could space it out better?

    Feel free to visit my web blog … Best THC Gummies (http://www.kitsapdailynews.com)

  40. weed dealer より:

    Howdy, i read your blog from time to time and i own a similar one and i was just curious if you get
    a lot of spam responses? If so how do you stop it, any plugin or anything you can recommend?

    I get so much lately it’s driving me insane so any assistance is very much appreciated.

    Also visit my homepage … weed dealer

  41. What’s Going down i am new to this, I stumbled upon this I
    have found It positively useful and it has aided me
    out loads. I’m hoping to contribute & aid other
    customers like its aided me. Good job.

    Feel free to surf to my blog Seattle Weekly (https://www.seattleweekly.com)

  42. weed near me より:

    I know this if off topic but I’m looking into starting my
    own weblog and was wondering what all is required to get setup?
    I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet smart so I’m not 100% sure.
    Any tips or advice would be greatly appreciated.
    Thank you

    Look into my webpage: weed near me

  43. US Magazine より:

    I’m really impressed with your writing skills as well as with the layout on your blog.
    Is this a paid theme or did you modify it yourself?

    Anyway keep up the excellent quality writing, it’s rare to see a
    nice blog like this one these days.

    my blog US Magazine

  44. buy weed online より:

    Nice respond in return of this query with firm arguments and telling all regarding that.

    Review my blog buy weed online

  45. buy weed より:

    Hi there! Do you know if they make any plugins to assist with SEO?
    I’m trying to get my blog to rank for some targeted keywords but I’m not seeing
    very good success. If you know of any please share.
    Many thanks!

    Feel free to surf to my website – buy weed

  46. Thank you for the auspicious writeup. It in fact was a amusement account it.
    Look advanced to far added agreeable from you! However, how can we communicate?

  47. Do you have any video of that? I’d want to find out some additional information.

    Also visit my page buy Instagram followers

  48. I think the admin of this website is truly working hard in support of
    his web page, since here every data is quality based material.

  49. Anında gönderimlerle beğeni paketleri burada: https://takipcialdim.com/instagram-begeni-satin-al/

  50. I’m not sure why but this web site is loading incredibly slow for me.
    Is anyone else having this problem or is it a issue on my end?
    I’ll check back later and see if the problem still exists.

    Here is my homepage :: dog anti inflammatory medicine

  51. best kratom より:

    We’re a group of volunteers and starting a new scheme in our community.
    Your website provided us with valuable info to work on. You have
    done a formidable job and our whole community will be thankful to you.

    Feel free to visit my blog best kratom

  52. cbd for sale より:

    It’s actually a great and helpful piece of information. I’m satisfied that you shared this useful information with us.
    Please stay us informed like this. Thank you for sharing.

    Also visit my site: cbd for sale

  53. En hızlı şekilde takipçi almak istiyorsanız hemen buraya tıklamanız yeterli olacaktır: https://takipcialdim.com

  54. Sizler de anında takipçi gönderimi istiyorsanız bu paketleri inceleyin: https://takipcialdim.com

  55. takipçi より:

    Takipçi arayanlar için takipçi adresi. Tıklayın ve takipçi arıyorsanız göz atın: https://takipcialdim.com

  56. instagram より:

    Herkese anında takipçi gönderimi. Hemen tıklayın ve paketlere göz atmaya başlayın: https://takipcialdim.com

  57. Sorunsuz takipçi gönderimleri ve anında hizmet için hemen tıklayın: https://takipcialdim.com

  58. Hemen tıklayın ve takipçi almanın keyfini anında çıkarın: https://takipcialdim.com

  59. beğeni より:

    Siz de anında beğeni gönderimi arıyorsanız bu paketler tam size göre: https://takipcialdim.com/instagram-begeni-satin-al/

  60. Siz de tamamen otomatik gelen beğeni paketlerini incelemek için buraya tıklayabilirsiniz: https://takipcialdim.com/instagram-begeni-satin-al/

  61. marsbahis より:

    Sultanbete en hızlı ulaşabileceğiniz adres için buraya tıklayabilirsiniz: sultanbet

  62. betboo より:

    Betboo en yeni ve güncel adres için bu siteye girebilirsiniz: betboo

  63. marsbahis より:

    Herkes için en güncel sultanbet adresi burada. Sultanbet güncel adres için tıklayın: sultanbet

  64. betboo より:

    Sen de betboo güncel adresi arıyorsan hemen buraya tıkla: betboo

  65. sultanbet より:

    En güncel mars bahis adresi için aradığınız adres burada. Hemen tıklayın ve ulaşın: marsbahis

  66. betboo より:

    En güncel betboo adresi daima burada. Tıkla ve en güncel adrese ulaş: betboo

  67. betboo より:

    Betboo adresini mi arıyorsun? Hemen tıkla ve ulaş: betboo

  68. betboo より:

    Arayanlar için en güncel betboo adresi burada. Hemen tıkla: betboo

  69. Hemen buraya tıklayarak en uygun takipçi paketlerine göz at: instagram takipçi satın al

  70. Kolay ve hızlı gönderimlerle instagram takipçi paketleri burada. Tıklayın ve instagram takipçi paketlerine göz atın: instagram takipçi satın al

  71. Anında otomasyon ile takipçi satın almak isteyenler için instagram takipçi paketleri: instagram takipçi satın al

  72. Sorunsuz bir şekilde takipçi gönderimi arayanlar için instagram takipçi gönderim sitesi: instagram takipçi satın al

  73. En kaliteli takipçiyi en uygun fiyatlara burada bulabilirsin: instagram takipçi satın al

  74. Herkes en uygun fiyatlara takipçi alabilsin diye sizler için aktifiz: instagram takipçi satın al

  75. En uygun fiyatlara kaliteli takipçi paketleri arıyorsanız bu instagram hizmetlerini denemeniz yeterli: instagram takipçi satın al

  76. Benzersiz kalitede takipçi paketleri ve en kaliteli instagram takipçi hizmeti: instagram takipçi satın al

  77. bamgosoocomq より:

    If you are going for most excellent contents like me, simply go to see this site every day for the reason that it presents quality contents, thanks부산달리기

  78. bamgosoocomq より:

    Will really appreciate the writer’s choice for choosing this excellent article appropriate to my matter.Here is deep description about the article matter which helped me more출장안마

  79. En hızlı gönderimlerle instagram takipçilere sahip ol: takipçi satın al

  80. Siz de tiktok izlenme satın almak istiyorsanız tıklayın: tiktok izlenme satın al

  81. Herkes satın alabilsin diye uygun fiyata twitter takipçi: twitter takipçi satın al

  82. Youtube abonelerini arttırmak isteyen youtuberlar buraya mutlaka uğrasın: youtube abone satın al

  83. Anında alınabilsin diye en uygun fiyatlara tiktok takipçi: tiktok takipçi satın al

  84. Roket hızında beğeniler anında gönderilerinize gelsin. Tıklayın: instagram beğeni satın al

  85. Siz de alabilin diye trend topic hizmetleri çok uygun fiyatlara sizlerle: trend topic satın al

  86. Youtube abone satın almak isteyenlerin durağı. Tıklayın ve youtube abone satın alın: youtube abone satın al

  87. En özel tekliflerle instagram beğeni paketleri: instagram beğeni satın al

  88. Buraya tıklayarak trend topic hizmetlerinden faydalanmak ister misin? Tıkla: trend topic satın al

  89. Uygun fiyatlara instagram izlenme satın al. Tıkla ve hemen al.

  90. ucuz takipçi より:

    Siz de ucuz takipçi arıyorsanız hemen tıklayın ve ucuz takipçi bulun: instagram ucuz takipçi

  91. aşk kitapları より:

    Hemen tıklayın ve aşk kitapları listesine göz atın. Bu liste tam size göre: https://bit.ly/ask-kitaplari

  92. En harika perdeler ve perde modelleri burada: https://perdemodelleri.org

  93. perde modelleri より:

    Hemen tıklayın ve en şık perde modellerine göz atın: perde modelleri

  94. Hızlı bir şekilde takipçi satın almak isteyenlerin adresi. Tıklamanız yeterli.

  95. Hemen instagram takipçi satın almak için instagram takipçi sayfamıza uğrayın: instagram takipçi satın al

  96. Hemen tıkla ve instagram takipçi paketleri incele: instagram takipçi

  97. En hızlı şekilde takipçi satın almak isteyenlerin adresi: https://bit.ly/instagram-takipci-satin-al-instagram-takipci-satin-al

  98. Siz de en iyi fiyatlara instagram takipçi satın almak istiyorsanız tıklayın: https://fatihmedya.com

  99. Hemen tıkla ve instagram takipçi satın almak için paketlere göz at: instagram takipçi satın al

  100. Tıkla ve instagram beğeni paketlerine göz at: instagram

  101. Hemen tıklayın ve kaliteli takipçiye en uygun fiyatlara anında ulaşın: takipçi satın al

  102. Beğeni mi satın almak istiyorsun? Tıkla: begeni satin al instagram

  103. Hemen tıklayın ve instagram beğeni satın almaya başlayın: beğeni satın al instagram

  104. Siz de uygun fiyatlara en kaliteli şekilde takipçi almak için tıklayın: takipçi

  105. Hadi hemen tıkla ve instagram takipci ve begeni satin al: https://takipcialdim.com/instagram-begeni-satin-al/

  106. Hemen buraya tıkla ve instagram takipçi satin al: instagram takipci satın al

  107. Herkes için instagram takipci burada. Tikla: instagram takipci

  108. İnstagram takipçi satın al sayfamız HAVALE / EFT sistemi kullanmaktadır. Dilerseniz ödeme ekranına geldiğinizde HAVALE / EFT seçeneğini seçebilir ve tam tutarı …