Html Highlight Text HTMLマークタグでテキストをハイライトする

By admin on

Code Tidbit by SamanthaMing.com

段落内のテキストをマークする必要がある場合は、<mark>タグを使うのが良いでしょう。 これはHTML版の黄色い蛍光ペンです。 私はいつも<span>タグにCSSでスタイリングを加えて使っていましたが、このようなより意味のあるオプションがあるとは知りませんでした。 HTML5には様々な良いところがあります。 そうですね😆

<p> <mark>Highlight</mark> text with HTML &lt;mark&gt; tag</p>
フルスクリーンモードへの移行 フルスクリーンモードの終了

デフォルト <mark> styling

<mark>のデフォルトの背景色は黄色です。

<p> <mark>Default Yellow Highlight</mark></p>
フルスクリーンモードへの移行 フルスクリーンモードの終了

出力

Code Sample Ouptput

Custom Styling <mark> with CSS

もちろんです。 もちろん、他のテキストHTMLタグと同様に、CSSでカスタムスタイリングを適用することができます。 これは、<p>タグにスタイルを付けるのと同様に考えることができます。

mark { background: red; color: white;}
フルスクリーンモードへの移行 フルスクリーンモードの終了

出力

コードサンプルの出力

< mark> vs その他のテキスト HTML タグ

strong

<strong> は、周囲のテキストよりも強い重要性を持つテキストを示すために使用されます。 警告やエラーなど、周囲のテキストよりも強い重要性を持つテキストを示します。 意味的にはその重要性を 太字で表示されます

b

<b><strong>と非常によく似ています。

em

<em>は、特定の単語を強調するために使われます。 斜体で表示されます

mark

<mark>emstrong<div>タグをどこでも使えるようにしないのは、セマンティックではないからです。 あなたは、プログラミングを学び始めた頃の私のように、意味的に正しいことなんて誰も気にしないよ🙄と思っているかもしれません。 間違った❌です。 実は、Googleのような検索エンジンは気にしているのです なぜなら、セマンティックはあなたのサイトの意味を伝えるからです。 検索ロボットがあなたのサイトをクロールするときに、何が起きているのかを知ることができます。

意味的に正しいことが必要なもう1つの理由は、アクセシビリティのためです。 多くのアクセシビリティツールは、タグのセマンティクスに依存して、サイトを使用する人間のユーザー（スクリーンリーダーなど）にとって意味のあるものに変換しています。 ここで例え話をしましょう。 その昔、コンピュータがサイトのテキストを読み上げたときのことを思い出してください。 それはとてもロボット的で奇妙な音でした。 適切なセマンティクスがなければ、それと同じです。 確かに機能はしていますが、聞き心地は最悪です😱。 しかし、適切なセマンティクスを使用すると、Siriを聞いているような感じになります。 抑揚や音程の変化、さらには一時停止のタイミングまでもがわかるので、より人間らしく聞こえます。 これは、意味的に正しい HTML タグを使用したときに達成できる、より良い体験と同じタイプのものです👍

HTML5 タグと SEO について 指摘したいことがあります。

Google の John Mueller 氏は、Twitter で次のように述べています：

HTML5 を適切に使用することは、確かに意味があります。 HTML5タグを使っても使わなくても、Google検索結果のランキングに悪影響はない。 しかし、だからといってHTML5タグを使うべきかというと、そうではありません。 そんなことはありません。 アクセシビリティ上の利点はまだあります。 また、HTML5タグの中には、ブラウザの動作が非常に興味深いものもあり、以前にはなかった高度な機能をユーザーに提供することができます🤩

アクセシビリティに関する懸念

さて、セマンティックなHTMLタグの重要性をお伝えすることができましたでしょうか。 そして、<mark>が単にテキストにスタイルを付けるためのものではなく、セマンティックに良いものであることも理解していただけたと思います。

しかし！そのアクセシビリティには懸念があります。 残念ながら、<mark>タグの使用は、ほとんどのスクリーン リーダーの初期設定ではアナウンスされません。 しかし、朗報です。これを回避する方法があります。 

mark::before { content: " ";}mark::after { content: " ";}/* Hide the text created in the CSS content property */mark::before, mark::after { clip-path: inset(100%); clip: rect(1px, 1px, 1px, 1px); height: 1px; overflow: hidden; position: absolute; white-space: nowrap; width: 1px;}
フルスクリーンモードに入る フルスクリーンモードを終了する

では、スクリーンリーダーはここで何をしますか。 <mark> タグで囲まれたテキストに遭遇すると、タグ内のテキストに続いて「ハイライト開始」をアナウンスし、マーク タグが終了すると「ハイライト終了」をアナウンスします。

しかし…

注意していただきたいのは、このような「アナウンス」がたくさんあると、非常に冗長になり、時に煩わしい不要な情報が追加されることがあります。 そのため、スクリーンリーダーをお使いの方の中には、この機能をオフにしてしまう方もいらっしゃるようです。 つまり、ここでの教訓は “大きな力には大きな責任が伴う “ということです。

< mark>

さあ、お楽しみの時間です。

ユースケース: 検索結果

ここに人気のあるものがあります。 ユーザーが検索した用語をハイライトするために使用できます。

<p>Search Result for "Vue"</p><hr><p><mark>Vue</mark> is a awesome JavaScript framework. <mark>Vue</mark> is awesome. Can you tell I really like <mark>Vue</mark>😆</p>
フルスクリーンモードに入る フルスクリーンモードを終了する

出力

コードサンプル Ouptut

ユースケース: 検索結果

これは人気のあるものです。 引用文

引用文（<q><blockquote>）のハイライトを提供するのは素晴らしいことです。

<p>According to Samantha, <q>Vue is <mark>AWESOME</mark></q></p>
フルスクリーンモードに入る フルスクリーンモードを終了する

出力

コードサンプル出力

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です