プログラミング・ITHTML

Blog Article

HTMLで太字や斜字にする方法・タグをわかりやすく解説

こんにちは、Mochiです。

HTMLで文字を強調する場合、どうすればいいんだろう?
太字や斜字ってどんなタグで作るんだっけ?🤔

そんな方に向けて、HTMLで太字や斜字にする方法をわかりやすく解説します!

🤔太字と斜字とは?

太字とはこのような太い文字のことです。斜字とはこのような斜めになった文字のことです。どちらも文字や意味を強調するために使われることが多いです。

Webサイトでひたすらに文字が打たれていても、どこが重要なのかわかりにくいですよね。そこでここが重要ですのように、うまく強調してあげることでより読んでくれる人に意味やメッセージが伝わる文章となります。

では、どのように太字や斜字にするのでしょうか?それぞれ方法を学んでいきましょう!

✍️太字にする方法

HTMLで太字にする方法は2つあります。1つ目は<b>タグで、2つ目は<strong>タグです。2つあって「どちらがいいんだろう…。」と思う方もいらっしゃるかもしれません。私のおすすめは<strong>タグです。理由も含めて、それぞれのタグを解説していきます。

<b>タグで太字にする

<b>タグを使うことで文字を太字にすることができます。”b”は英語で太字を意味する”Bold”の頭文字です。

<b>Mochi Blog</b>はスキルアップのためのブログです。

太字の例
しかし、<b>タグを使うことはおすすめしません。それは、見た目が太字になるものの、セマンティックではないからです。ここでセマンティックとは、意味を持つことを表します。

つまり、<b>タグを使ってしまうと「文字を強調している」という意味がGoogleなどの検索エンジンに伝わりません。よって、検索エンジンが十分に理解できないHTMLとなってしまうのです。十分に理解できていないと、検索に表示されにくくなる可能性があります。

では、セマンティックな太字のタグについて学んでいきましょう!

<strong>タグで太字にする

<strong>タグを使うことで文字を太字にしつつ、セマンティックにすることができます。よって、<strong>タグを使った部分は、強調したい部分であるという意味を持ち、検索エンジンもその意味を理解してくれます。そのため太字にしたいときは、<strong>タグを使うことをおすすめします。

<strong>Mochi Blog</strong>はスキルアップのためのブログです。

太字の例

✍️斜字にする方法

HTMLで斜字にする方法は2つあります。1つ目は<i>タグ、2つ目は<em>タグです。2つのうち、おすすめは<em>タグです。理由は太字の説明と同様に、セマンティックだからです。

では、それぞれのタグについて学んでいきましょう!

<i>タグで斜字にする

<i>タグを使うことで文字を斜字にすることができます。”i”は英語で斜字を意味する”itaric”の頭文字をとっています。

<i>Mochi Blog</i>はスキルアップのためのブログです。

斜字の例
<i>タグは斜字にはできますが、セマンティックではないため強調の意味を持ちません。そのため、おすすめしません

セマンティックな斜字にする方法も見ていきましょう!

<em>タグで斜字にする

<em>タグを使うことで、文字を斜字にしつつ、セマンティックにすることができます。強調の意味を持ち、検索エンジンに意味を伝えることができるため、<em>タグを斜字に使うのがおすすめです。

<em>Mochi Blog</em>はスキルアップのためのブログです。

斜字の例
ちなみに”em”は英語で強調を意味する”emphasize”の頭文字をとっています。

まとめ

太字と斜字の意味と作るためのタグを学びました。太字には<strong>タグを使い、斜字には<em>タグを使うと良いです。太字と斜字を使うことで、文章の中で強調したい部分を明確にできます。読んでくれる人も、より読みやすくなるので、適切に使っていきましょう!

参考になれば幸いです。
読んでいただきありがとうございました!

🤗おすすめ

本で体系的にHTMLについて学びたいという方にはこちらの本をおすすめします。HTMLの基礎から実際のWebサイト作成まで書かれており、豊富な図が含まれているため、多くの方が理解しやすい本です。

1冊ですべて身につくHTML & CSSとWebデザイン入門講座

YouTubeのように動画でサクサク学びたいという方には、Udmeyの講座をおすすめします。私もよく使うのですが書籍に比べ実用的な内容を学びやすく、隙間時間に見れるのがいいです。ぜひ気になるHTMLやWeb開発の人気オンラインコースを受講してみてください。

Udemy 人気のオンラインコース ウェブ開発

参考になれば幸いです。 読み返したい方は、ぜひブックマークへの登録がオススメです。
読んでいただきありがとうございました!🙌

このページの内容