HTML5:新しい目的のための古いタグ

<b><i><s><small>タグがプレゼンテーションタグであることは誰もが知っているため、「構造、プレゼンテーション、動作」というパラダイムに基づいて、それらの使用は歓迎されません。 <strong><em><del>の要素は、はるかに馴染みがあるようです。 これは、長年の開発業務の場合に当てはまります。 ただし、 HTML5の登場により、これらの要素のセマンティクスは大きく変わりました。 これで、頭に意味とシリアルを含む4つの新しいタグができました。

<b> vs <strong>


以前、すべての組版教科書が「 <b>代わりに<strong>使用」などのフレーズでいっぱいであり、これが半分当てはまる場合、今日そのような習慣は悪意のあるセマンティックな冗談を演じることができます。 問題は、 HTML5の作成者が、読者の注意を引くためにテキストのパッセージを強調するために<b>を使用することを提案しているが、テキストまたはイントネーションの重要性の増加を意味しないことです。 仕様は、ドキュメント内のキーワードをマークアップするため使用例を提供します

<p>The <b>frobonitor</b> and <b>barbinator</b> components are fried.</p>

リード(ジャーナリズムの記事の最初の段落)

<article>
<h2>Kittens 'adopted' by pet rabbit</h2>
<p><b class="lede">Six abandoned kittens have found an unexpected new mother figure — a pet rabbit.</b></p>
<p>Veterinary nurse Melanie Humble took the three-week-old kittens to her Aberdeen home.</p>
</article>


同様に、 <strong>は、以前と同様に、コンテンツの重要性が増したことを意味します。

<i> vs <em>


これ以降、 <i>には一般的な環境から際立ったテキストが含まれていますが、感情的な色付けはありません。 私の意見では、活版印刷の伝統が斜体を示唆している場所(たとえば、外国語の単語、用語など)で<i>を使用することは論理的です

<i>Per aspera ad Astra</i> — « ».

<em>は、強調されたストレス、この文章の一節に対する感情的な強調を意味します。 これは、音声で単語を強調表示する場合です(イントネーション、音量など)。

<em></em>, .

契約を注意深く読んでください!


「小さな活字のテキスト」(企業ライセンスや法定住所などの法的形式である情報)として、原則として、視覚的ユーザーエージェントでより小さいフォントを指定したクラスを持つ要素をマークアウトしました。 現在、私たちの兵器庫には、新しい古いセマンティック要素<small>ます。

<s>についてのHolivar


<s> 、取り消し線のテキストにすぎませんでした。 <s>は、関連性を失った情報を表します。
また、 <del>要素もあります。この要素の処理結果は、デフォルトでは視覚的なユーザーエージェントでは取り消し線付きのテキストです。 これはドキュメントの変更を意味し、一見すると目的は同じに見えるかもしれません。 ただし、微妙な点があります。 オンラインストアの製品ページの例を考えてみましょう。
2つの価格を示しており、そのうちの1つは取り消し線で示されています。 <s>要素でマークします。 これは、古い価格の関連性が失われたことを意味します(いつだったかは関係ありません。事実自体が重要です)。 <del>ではないことを確認するには? <del> は、ドキュメントに加えられた変更を意味しますある時点でドキュメントが変更されたことは重要です)。 私たちの場合、新しいドキュメントにはすでに無関係な情報が含まれています。

新しいセマンティクスと古いDoctype


何らかの不明な理由で、Doctypeを新しいものに置き換えることができず、正式にHTML 4.01を課す場合は、絶望しないでください。 新しい意味を持つ古い新しい要素を使用すると、やがて自分に「ありがとう」と言うでしょう。 おそらく誰かがこれは間違っていると言うでしょうが、これらの要素は、 <s>を除いて、無効ですらありません。 さらに、 HTML5は下位互換性を期待して開発されました。同じことが古い要素の新しいセマンティクスにも当てはまります。 根本的な変更はなく、セマンティックペッパーコーンのみが追加されています。

Source: https://habr.com/ru/post/J129147/


All Articles