Help us understand the problem. What is going on with this article?

TechAcademyが無料公開している「HTML・CSS入門講座」を受講する~HTML第2-2回~

アジェンダ

  • HTMLのタグ
    • em
    • strong
    • hr
  • 実践

HTMLのタグ

em

強調を示すタグ。<em></em>の内側の文書が強調される。
どのように表現されるかはWebブラウザによって異なるが、一般的には<em></em>の内側の文書が斜体になる。
なお、斜体を表現するためにemタグを使用してはいけない。

emphasizeのem。

strong

重要性を示すタグ。<strong></strong>の内側の文書が重要であることを示す。
どのように表現されるかはWebブラウザによって異なるが、一般的には<strong></strong>の内側の文書が太字になる。
なお、太字を表現するためにstrongタグを使用してはいけない。

hr

文書の区切りであることを示すタグ。
</hr>は使用しない。

horizontal ruleのhr。

実践

上記のタグを使用して、今回は以下のindex.htmlを作成。

index.html
<!DOCTYPE html>

<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>ローレン イプサム</title>
  </head>
  <body>
    <h1>Lorem Ipsum</h1>
    <p>
      <em>Lorem ipsum</em> dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
    <hr>
    <p>
      <strong>Duis aute irure dolor</strong> in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
  </body>
</html>

これをWebブラウザで表示させるとこんな感じ。
index.png

emタグで囲った文書は斜体、strongタグで囲った文書は太字となっている。
また、hrタグを書いた箇所に罫線が引かれている。

おわりに

今回は、文書内の特定箇所に意味合いを持たせるタグを学んだ。

さて、ここで一つ疑問がある。

Q. <em>を使用して強調させたとき、<strong>を使用して重要性を表した時、見た目以外で何が変わるのか。

A. 何も変わらない。

検索に影響を与える、みたいな見えない部分で変化があるかと思ったが、無いようだ。
<strong>タグも同様に、見た目が変化するだけである。

HTMLには、文書を斜体にするタグ<i>と文書を太文字にするタグ<b>がある。
<em>と<i>、<storng>と<b>、それぞれどちらを使っても何も変わらないらしい。

参考 : Is there a difference between the "strong" and "b" tags in terms of SEO?

ふーん。見た目を変えることじゃなくて、文書に意味を持たせることが大事だと思うので、<em><strong>を使うようにしよっと。

次回 >> ここ

参考

2-2 強調・区切り線(HTMLのテキスト)

MakoMakoMakotsu
広く浅い知識を深くしたい。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした