HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLのmarkタグで参照用テキストを強調表示する方法

HTMLの<mark>タグとは

HTMLでは、<mark>タグを使用することで、参照の目的でテキストを強調表示できます。このタグは、別の文脈における関連性を示すためにハイライトされたテキストを表します。

<mark>タグで囲まれた部分は、多くのブラウザでデフォルトのスタイルとして黄色い背景色で表示されます。例えば、引用文中の重要な箇所や、検索結果でユーザーが入力したキーワードを目立たせたい場合などに活用すると効果的です。

使用例

以下のコードを実行すると、参照用にテキストを強調表示する動作を確認できます。

<!DOCTYPE html>
<html>
   <head>
      <title>HTML Mark Tag</title>
   </head>
   <body>
      <h2>Cricketers in India</h2>
      <p>Sachin Tendulkar is <mark>god</mark> of cricket.</p>
   </body>
</html>

この例では、「god」という単語が<mark>タグによってハイライトされ、他のテキストと視覚的に区別されます。CSSを使えば背景色や文字色なども自由にカスタマイズできるため、サイトのデザインに合わせて調整することも可能です。

  1. HTMLのlabel要素におけるfor属性の使い方を解説

    <label>要素のfor属性は、ラベルを特定のフォーム部品（入力要素）に関連付けるために使用されます。この属性を設定することで、ラベルをクリックした際に対応する入力フィールドがアクティブになり、ユーザビリティとアクセシビリティが向上します。 構文 for属性の基本的な構文は以下の通りです。 <label for="id"> ここで指定する「id」は、関連付けたい要素のid属性の値です。 サンプルコード それでは、<label>要素のfor属性を実装した具体的な例を見てみましょう。 <!DOCTYPE html> <h

  2. HTMLのfor属性とは？label要素との紐付け方法を実例で解説

    HTMLのfor属性は、<label>要素を、for属性の値と同じidを持つ最初のラベル付け可能な要素（labelable要素）に結び付けるための属性です。ラベルとフォーム部品を関連付けることで、ユーザーがラベルをクリックした際に該当する入力欄へフォーカスが移動するなど、操作性やアクセシビリティが向上します。構文for属性の構文は以下のとおりです。1. for属性の値を取得する場合labelObject.htmlFor2. for属性の値を設定する場合labelObject.htmlFor = 対象要素のidJavaScriptからは<label>要素の htmlFor