学びBAR
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ
HOME / WEB関連知識のスキルアップ / HTMLクイック・リファレンス / HTML5(目的別) / HTML5から意味の変わる要素

★HTML5リファレンス

| ​​HTML5から意味の変わる要素

HTML4.01では、<b>は太字、<i>はイタリック体、<em>は強調、<strong>は強い強調、<small>は小さくする、<hr>は水平線、 として定義されていました。
これらの要素はHTML5でも残っていますが、 HTML4.01とは意味が変わり、単なる装飾要素からそれぞれに意味のある要素として定義されています。
タグ(要素) HTML4.01 の定義 HTML5 の定義
<b> 太字 文書内のキーワードや製品名など、他と区別したいテキストを表します。 一般的に印刷される際に太字となるようなテキストです。その箇所が重要であるという意味や強調する役割はありません。
<i> イタリック体 声や心の中で思ったことなど、他と区別したいテキストを表します。 一般的に印刷される際にイタリック体となるようなテキストです。その箇所が重要であるという意味や強調する役割はありません。
<em> 強調 強勢する(アクセントを付ける)箇所を表します。同じ文でもどの個所を強勢するかでニュアンスが異なってくるでしょう。 例えば、「猫はかわいい」という文を、「<em>猫</em> はかわいい」とすれば、 (犬などの他の動物じゃなくて…)というニュアンスが出せるかもしれません。 また、「猫は<em> かわいい</em> 」とすれば、 (猫はかわいくないという意見への反論)というニュアンスが出せるかもしれません。
<strong> 強い強調 強い重要性を表します。 HTML4.01 の定義とほぼ同じですが、<strong> ~ </strong> の中の一部を、 さらに <strong> ~ </strong> で囲むことで、重要性の強さの程度を指定し分けることができるようになっています。
<small> テキストを小さくする 免責、警告、著作権などの注釈や細目を表します。 その箇所が重要であるという意味や強調する役割、反対に重要性を弱める意味などはありません。 メインコンテンツではなく、あくまで注釈・細目となる箇所に使用する要素です。 例えば、利用規約がメインコンテンツとなるページで、全体を <small> ~ </small> で囲むような使い方は適切ではありません。
<hr> 水平線 段落と段落の間などのテキストブロック間におけるテーマの区切り、セクション内における話題の区切りを表します。 セクション同士の区切りとなる </section>と<section> の間については、 すでにそれ自体でテーマの区切りを表しているので、 <hr> を挿入する必要はありません。

| HTML5では、コンテンツ・モデルでタグの配置ルールが決まる

HTML5では、上記のコンテンツの種類に各要素が分類されることで、 どの要素の中にどの要素を配置できるかというタグの配置ルールが決まります。
HTML4.01でタグの意味を意識してマークアップしてきた人なら、 上記のコンテンツの種類の分類を知らなくてもそれほど大きな間違いをすることはないでしょうが、 文法的により正確なHTML文書を作成することを目指す場合には、 どの要素がどのコンテンツの種類に分類されているかを意識する必要があるでしょう。

記事一覧へ
HOME                      ABOUT                      SERVICES                      UPDATES                     CONTACT
画像
1996-2024(c)Cre'ps design lab.  All rights reserved.
  • Home
  • WEB関連知識のスキルアップ
    • Udemy 開催講座 >
      • HTML,CSSルール基礎知識 >
        • Udemy 1800円受講クーポン
    • セマンティックHTMLとは?
    • HTML特殊文字コード表
  • ストリートアカデミー講座
    • HTMLルール基礎 4h テキストダウンロード
  • 学びBARについて
  • コラム
  • お問合せ