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

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

タグ: HTML5

このトピックには0件の返信が含まれ、1人の参加者がいます。2 ヶ月、 2 週間前 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以降を勉強していきたいと思います。

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