BLOG
意外と使える！HTMLテキストの強調タグの種類を学ぶ
HTMLのタグには<b>や<strong>のように、テキストの強調のために使用されるものがあります。そしては<b>と<strong>にはテキストを太字にする効果がありますが、特に意味的には重要ではないけど、ユーザーに注目してほしいときは<b>タグを、意味的に重要ととなる場合は、<strong>タグを使用します。
<b>と<strong>の使い分け
- <b>…重要ではないけど、注目してほしい
- <strong>…重要なので、注目してほしい
…というように囲んだテキストが重要なときは<strong>を使うようにしましょう。結構ごっちゃになっちゃうんですよね。
実は大切！<strong>タグ
文字を太字にして強調することができるHTMLタグの<strong>ですが、実は検索エンジンに対しても太字部分を強調することができるんです。というとは、SEOを考えて<strong>を使用する必要があるということですね。
<b>タグは検索エンジンに対して強調を伝えることはありませんので、こちらは気軽に使えそうです。まとめると…
- <b>…見た目のみを強調
- <strong>…見た目と同時に検索エンジンに対しても強調
ですので、<strong>を使うときは「ここぞ！」という場面なんですね。乱用は避けねば…
次に、テキストの強調に使われるHTMLタグをご紹介します。
テキストの強調に使われるHTMLタグ
- <b>…重要ではない太字
- <i>…イタリック（斜体）
- <u>…下線
- <strong>…重要な太字
- <em>…アクセントを付ける
- <mark>…マーカー（蛍光ペン）
<b>と<strong>に関しては先ほど説明しましたけど、<i>のイタリック（斜体）は、日本語には斜体がないため注意してください。また欧文でもメイリオなど斜体にならないフォントも存在します。このディーライズのサイトでも使っていますが、私はワードプレスの投稿日時を表示するときなど、【Web/2020.3.29】とちょっとしたポイントに斜体を使ったりします。
そして<u>タグの下線ですが、リンクとの区別が付かないという点から、原則として使用はしないということです。というか使用しないならなぜ存在するのか気になるところです。
続いて<em>ですが、【私はディーライズの代表です】のように、「代表」にアクセントを付けたいときに使用します。囲まれた部分は斜体になります。また、「ディーライズ」にアクセントを置く場合【私はディーライズの代表です】となります。強調することによって意味や文脈を変えるときに使うんです。strong要素と使い分けが難しいのですが、em要素はあくまで強調したいテキストを囲み、strong要素は「重要」であるというニュアンスなんです。
- <strong>…重要な強調
- <em>…アクセント的な強調
最後に<mark>タグですが、【こんな感じの蛍光ペン】になります。
個人的には<mark>タグは使えそうかと思います。これは視覚的な意味以外で、強調や重要の意味を持たないので、使いやすいですよね。<strong>タグの重要・強調、<em>タグのアクセント・強調を除いては、厳密な意味を考えて使い分けるのではなく、見た目の表示で使用していけばいいとのことです。是非、ホームページのテキストのアクセントに使っていってください。
ホームページ制作に関すること何でも、三重県名張市・伊賀市のWebサイト制作「ディーライズ」にご相談してください。
