HTML5＆lt; mark＆gt;を使用するにはどうすればよいですか テキストを強調表示する要素？

HTML5 <mark></mark>要素を使用したテキストの強調表示

HTML5 <mark></mark>要素は、テキストを強調表示するために特別に設計されており、何らかの理由でマークまたは強調表示されていることを示しています。単にCSSを使用してテキストの色を変更するのとは異なり、それは意味的に意味があります。それを使用するには、開口部と閉じた<mark></mark>タグ内で強調表示するテキストをラップするだけです。例えば：

 <code class="html"><p>This is some text. <mark>This text is highlighted.</mark> This is more text.</p></code>

これにより、デフォルトの黄色の背景ハイライトでテキストが「このテキストが強調表示されます」になり、通常はユーザーのブラウザによって適用されます。ブラウザのデフォルトのスタイリングは、一般に微妙な黄色の背景であり、強調表示されたテキストを過度に気を散らすことなく簡単に区別できます。これは、コンテンツの全体的な読みやすさを混乱させることなく明確な視覚的な手がかりを提供するための設計の重要な側面です。それを機能させるために特別な属性やJavaScriptは必要ありません。テキストを強調する簡単な意味の方法です。

<mark></mark>要素のアクセシビリティの考慮事項

<mark></mark>要素を正しく使用することは、アクセシビリティに不可欠です。その主な目的は、強調表示されたテキストが何らかの形で重要であることを示すことです。おそらく、それが検索結果、テキストのユーザーが選択した部分、または修正であるためです。スクリーンリーダーやその他の支援技術は、それに応じて<mark></mark>要素を解釈し、障害を持つユーザーに強調表示されたテキストの重要性を伝えます。

ただし、十分なコンテキストを提供することが重要です。説明なしでテキストを強調表示するだけで混乱する可能性があります。 aria-label属性を使用して、周囲のテキストからコンテキストがすぐに明らかにならない場合は、支援技術に追加情報を提供することを検討してください。例えば：

 <code class="html"><p>The search term "HTML" yielded these results: <mark aria-label="Search result: HTML">HTML</mark> is a markup language.</p></code>

これにより、スクリーンリーダーに追加の情報が追加され、ハイライトの理由が説明されます。過度の強調表示により、アシスタントテクノロジーのユーザーを含むすべての人にとってコンテンツが圧倒的で理解が困難になる可能性があるため、 <mark></mark>を使いすぎることは避けてください。過剰使用は、ハイライト自体の意味を薄めることもできます。アクセシビリティと明確なコミュニケーションを維持するために、慎重かつ意図的に使用してください。

<mark></mark>要素のスタイリング

ブラウザは<mark></mark>要素のデフォルトスタイルを提供しますが、CSSを使用して外観をカスタマイズできます。これにより、ハイライトを調整して、ウェブサイトのデザインに合わせたり、視覚障害を持つユーザーにより良いコントラストを提供したりすることができます。タグ名を使用して、 <mark></mark>要素を直接ターゲットにすることができます。

 <code class="css">mark { background-color: #FFD700; /* Gold */ color: #000000; /* Black text */ padding: 0.2em; /* Add some padding */ }</code>

このCSSスニペットは背景色を金に変更し、テキストの色を黒に設定してより良いコントラストを設定し、読みやすくするためにいくつかのパディングを追加します。視覚障害のあるユーザーに十分な可視性を確保するために、色のコントラスト比を考慮してください。ツールは、色のコントラスト比を確認するのに役立つオンラインで入手できます。読みやすさを妨げる可能性のある過度に明るいまたは気を散らす色を避けてください。ウェブサイト全体で一貫したスタイリングは、ユーザーエクスペリエンスの向上に貢献します。

他のテキストの強調表示方法との違い

<mark></mark>要素は、主にその意味的な意味を通じてメソッドを強調表示する他のテキストと区別します。インラインCSSスタイルで<span></span>を使用するのとは異なり、強調表示するために、 <mark></mark> 、特定の理由でテキストが強調表示されていることを明示的に伝えます。このセマンティックの違いは、アクセシビリティとSEOにとって重要です。

太字（ <strong></strong> ）または斜体（ <em></em> ）タグを使用するなど、他の方法は、強調または重要性を伝えますが、必ずしも強調しているわけではありません。これらのタグには、テキストの重要性に関連する特定の意味的な意味がありますが、強調されているという事実ではありません。したがって、ハイライトに<mark></mark>使用することは、意味的により正確であり、支援技術と検索エンジンのより良いコンテキストを提供します。 <mark></mark>を使用すると、プレゼンテーション（CSSスタイリング）とセマンティクス（HTML構造）の間の懸念の分離を維持することができます。

以上がHTML5＆lt; mark＆gt;を使用するにはどうすればよいですか テキストを強調表示する要素？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。