HTML5: cite, strong, bタグそれぞれの違いを具体例を用いて説明。

ホーム School [BLOG教室™] Lesson Room Pro(有料) HTML5: cite, strong, bタグそれぞれの違いを具体例を用いて説明。

タグ: HTML5

このトピックには0件の返信が含まれ、1人の参加者がいます。3 週間、 1 日前 Yuichi Okita さんが最後の更新を行いました。

  • 投稿者
    投稿
  • #1071

    Yuichi Okita
    キーマスター

    最終更新日:2018-05-06

    こちらの記事ではHTML4.0とHTML5の違い・変更点について書きました。

    今回は具体例を挙げて説明していきます。

    太字に見えてもそれぞれ意味が異なる例

    下画像は2018-05-06現在の当サイトのフッター部分です。赤枠部分は同じような太字に見えますが、それぞれ使用しているHTMLは異なります。

    A example of the difference between HTML4 and HTML5

    画像をクリックすると、拡大表示されます。
    Image: Copyright © Yuichi Okita

    使用しているHTMLが異なるということは、「それぞれの太字に込められている意味が異なる」ということです。

    下記にそれぞれの意味について説明します。

     

    太字で「OKITA-YUICHI.NET™」文字列に込められた意味

    一見、イタリック体とボールド体の組み合わせのように見えますが、この部分での「OKITA-YUICHI.NET」には<cite>タグを使用しています。

    HTML5では<cite>タグは、「作品のタイトル・著者名[1]・URL」の意味が込められます。

    したがいまして、NewsletterはOKITA-YUICHI.NET™というサイト(作品名)が発行します意味が込められています。

     

    1. <i>タグと<b>タグを組み合わせた場合:
      OKITA-YUICHI.NET™
    2. <cite>タグの場合:
      OKITA-YUICHI.NET™

    上の2つを見比べると見た目は全く同じです。

    しかし、「OKITA-YUICHI.NET™」の文字列に込められる意味がそれぞれ全く異なります。

     

    1は単純に書体として視覚的に他のテキストと区別していますが、

    2はサイトの名前を表しています。

     

    太字の「Newsletter」文字列に込められた意味

    Newsletterの文字列には<strong>タグを使っています。

    HTML4.0では「強調する語句」に使用されていましたが、HTML5では「重要性」を示す意味となりました。

    WordPressのビジュアルエディターでは、下画像の「B」をクリックすると、<strong>タグが挿入されます。

    Bold button on Visual Editor

    画像をクリックすると、拡大表示されます。
    Image: Copyright © Yuichi Okita

    余談ですが、古いバージョンのWordPress、つまり昔のWordPressでは、「B」をクリックすると<bold>タグが挿入されていた時代があったと記憶していますが、

    あるバージョン以降からは、<strong>タグが挿入され続けています。

     

    話を戻しまして、「Newsletterという文字列は重要なのですよ!」という意味が込められています。

     

    太字の「5日」文字列に込められた意味

    一見、上記の「Newsletter」と同じ太字に見えますが、「5日」には<b>タグを使用しています。

    こちらの表のように、HTML4.0では「太字(ボールド)」の意味で使われていましたが、HTML5では「他と区別されるテキスト」という意味に変更されました。

    したがいまして、通常の文字列と<b>タグを用いた文字列では、

    重要度の差は無い

    ということになります。

     

    昔は強調したい語句には<b>タグがWebサイト制作現場で使われており、SEO対策にも有効とされていましたが、

    現在では重要度を示すタグではなく、単純に「他の文字列と区別する意味合い」として検索エンジンから解釈されるのなら、

    通常のテキストとボールド文字列は並列的に重要度は同じといえます。

     

    • <I>タグで示されるイタリック体
    • <B>タグで示されるボールド体
    • <U>タグで示されるアンダーライン

     

    これらは全て、書体として語句を区別させて視覚的にレリーフする役割はありますが、語句の重要度という点では通常テキストと同じ扱いとなります。

    「色で他のテキストと区別することと同義」といえます。

     

    したがいまして、「5日」の太字に込められた意味は、「太字によって単純に目立つ文字列にしたかった思い」が込められています。

     

     

     

    言葉にどんな意味が含まれるのかをHTMLタグで表現した方が「検索エンジン最適化につながる」と考える

    HTMLは文書(Documentation)を表現するための文書構造の言語

    とても細かい点ですが、HTMLは文字に意味を持たせることが使命であるため、

    「それぞれの文字・語句・単語・フレーズは一体何を示しているのか」

    ということを、

    HTMLタグを正しく使いながら文字情報をきちんと区別していく作業がとても大切だと、

    私は考えています。

     

    文字にどんな意味が含まれているのかを表現可能とするのがWebの最たる特徴であり、

    媒体が紙では、上述で説明してきた意味を含ませることは出来ません

     

    21年前に覚えたHTML4.0という大過去の知識から脱して、

    一つ一つ私もHTML5以降を勉強していきたいと思います。

このトピックに返信するにはログインが必要です。

Privacy Preference Center

Your Privacy

When you visit any web site, it may store or retrieve information on your browser, mostly in the form of cookies. This information might be about you, your preferences or your device and is mostly used to make the site work as you expect it to. The information does not usually directly identify you, but it can give you a more personalised web experience.

Because we respect your right to privacy, you can choose not to allow some types of cookies. Click on the different category headings to find out more and change our default settings. However, blocking some types of cookies may impact your experience of the site and the services we are able to offer.

gravatar.com,rrating-widget.com

Strictly Necessary Cookies

These cookies are necessary for the website to function and cannot be switched off in our systems. They are usually only set in response to actions made by you which amount to a request for services, such as setting your privacy preferences, logging in or filling in forms. You can set your browser to block or alert you about these cookies, but some parts of the site may not work then.

jsdelivr.com,wordpress.com

Performance Cookies

These cookies allow us to count visits and traffic sources, so we can measure and improve the performance of our site. They help us know which pages are the most and least popular and see how visitors move around the site. All information these cookies collect is aggregated and therefore anonymous. If you do not allow these cookies, we will not know when you have visited our site.

accaii.com

Targeting Cookies

These cookies are set through our site by our advertising partners. They may be used by those companies to build a profile of your interests and show you relevant ads on other sites. They work by uniquely identifying your browser and device. If you do not allow these cookies, you will not experience our targeted advertising across different websites.

amazon.co.jp,rakuten.co.jp

3rd-parties

We uses cookies to help us identify and track visitors, their usage of this website, and their website access preferences.

facebook.com,twitter.com,google.com,linkedin.com.com
https://www.facebook.com/policies/cookies/
https://policies.google.com/technologies/types
https://support.google.com/analytics/answer/181881?hl=ja
https://www.linkedin.com/legal/cookie-policy

Major browser help page

How to set cookies in browser.

Google Chrome: https://support.google.com/chrome/answer/95647?hl=en Internet Explorer https://support.microsoft.com/en-us/help/260971/description-of-cookies Mozilla Firefox https://support.mozilla.org/en-US/kb/cookies-information-websites-store-on-your-computer Safari (デスクトップ) https://support.apple.com/kb/PH5042?locale=en_US Safari (モバイル) https://support.apple.com/en-us/HT201265 Androidブラウザー https://support.google.com/nexus/answer/54068?visit_id=1-636621905069450730-928182436&hl=en&rd=1 Opera https://www.opera.com/help Operaモバイル https://www.opera.com/help/mobile/android#privacy