ほとんど誰も使わないインラインHTML

ほとんどの開発者は <b><i><a> を知っています。

<ins><dfn><abbr><var><q><mark> といった他の要素は、おそらく無視されているでしょう。それは、代わりに <span class="something"> を使ってしまうからです。

これらの要素を使用することで、意味(セマンティクス)が付加されます。スタイルを当てた span は、マシンに対して何も伝えません。これらの要素は、スクリーンリーダーや検索エンジンにデータを提供します。

知っておくべき有用な要素は以下の通りです:

<ins><del>: これらは変更を追跡します。削除されたテキストには <del> を、新しいテキストには <ins> を使用します。これらを組み合わせて編集箇所を示します。 • <s>: もはや正確ではないコンテンツに使用します。これは削除とは異なります。古い価格のような、期限切れの情報を示すために使います。 • <sub><sup>: 化学式や数学の指数に使用します。単にテキストを小さくするためだけにこれらを使用しないでください。 • <var>: 数学やコード内の変数に使用します。 • <mark>: 関連性のあるテキストをハイライトします。検索エンジンはこれを使用して、クエリとの一致箇所を表示します。 • <abbr>: ツールチップを介して、略語の正式名称を提供します。 • <dfn>: 用語を定義している特定の箇所を示すために使用します。 • <cite>: 書籍や論文などの著作物のタイトルに使用します。人の名前には使用しません。 • <q>: インラインの引用を扱います。ブラウザが自動的に引用符を追加してくれます。

ブラウザのデフォルトの見た目は、しばしば美しくありません。<mark> は黄色い蛍光ペンのようになり、<q> には不自然な記号がつきます。

これらのタグを避ける必要はありません。CSSを追加するだけでいいのです。

<mark> にブランドカラーを与え、<abbr> に点線のアンダーラインを引きましょう。これにより、セマンティックなコードが美しいタイポグラフィへと変わります。

年に一度、適切なタグを使うことは、コンテンツの本来の意味を偽る span を使うことよりもずっと価値があります。

出典: https://dev.to/dimonb19a/the-inline-html-almost-nobody-uses-205d