HTMLで強調タグと区切り線を使う方法【初心者向け】
HTML初心者向けに、「強調タグ」と「区切り線」を使う方法を解説した記事です。強調タグは【emタグ】と【strongタグ】の2つの用途を解説。また、区切り線は【hrタグ】を使います。サンプルコードありですぐに実践可能。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。
今回は、HTMLの「強調タグ」と「区切り線」について解説します。
そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。
目次
そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。
なお、今回の記事の内容は動画でもご覧いただけます。
テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。
今回は、HTMLに関する内容だね！
どういう内容でしょうか？
強調タグと区切り線を使う方法について詳しく説明していくね！
お願いします！
強調タグ
HTMLでは文章を記述する際に、タグを使って重要な部分を強調することが可能です。
強調タグを使うことにより、文章中で何が重要であるかを読み手に伝えることができます。
また、コンピューターやGoogleの検索エンジンなどに対しても、文書のなかで何が重要であるかを認識させることができます。
今回は代表的な強調タグである「emタグ」と「strongタグ」を紹介します。
強調を示すemphasisタグ
主に文脈のなかで強調しておきたい部分を<em> 〜 </em>で囲んで示します。
囲んだ部分は斜体で表示されるようになります。
タグ名の「em」は、「emphasis = 強調」の略語になります。
以下の例を見てみましょう。
<p>TechAcademyでは<em>プログラミング教室</em>を開いています</p>
<em> 〜 </em>で囲んだ部分が斜体になっています。
重要性を示すstrongタグ
特定の語句を強調する際に<strong>〜</strong>で囲んで示します。
HTMLでは前述のemタグで囲まれた部分よりも重要であるとみなされます。
囲んだ部分は太字で表示されます。
以下の例を見てみましょう。
<p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p>
<strong>〜</strong>で囲んだ部分が太字になっています。
さて、emタグもstrongタグも、ある部分を強調したいときに使うタグですが、その違いはどこにあるのでしょう。
strongタグは語句や文そのものが重要であることを示すものである一方、 emタグはどこを強調するかでニュアンスが異なる文章に使われます。
以下の例を見てみましょう。
<em>TechAcademy</em>は恵比寿でプログラミング教室を開いています。 TechAcademyは<em>恵比寿で</em>プログラミング教室を開いています。 TechAcademyは恵比寿で<em>プログラミング教室</em>を開いています。
1番目の文章は、主催をしている「TechAcademy」という点を、
2番目の文章は、新宿でも品川でもなく「恵比寿」という点を、
3番目の文章は、英会話教室でも料理教室でもなく「プログラミング教室」だという点をそれぞれ強調しています。
用途に応じて使分けてみましょう。
また、emタグもstrongタグもHTML上で強調しておきたい重要な部分とみなされ、斜体や太字で表示されます。しかし、これはブラウザが自動的に解釈し表示しており、文字のデザインとは異なります。
例えば、「重要ではないけれど文字を太くしたい」といった場合にemタグやstrongタグを使用すると、文書の意味づけという本来のタグの役割が成り立たなくなります。
デザインとして文字を装飾したい場合にはCSSで指定しましょう。
書いているページがiPhoneの紹介なので、ページ内に出てくるiphoneって単語16個全部をstrongタグで強調してみました♪
一昔前にあった検索エンジンを誤解させるスパムみたいだね。
え～！だって重要じゃないですか。
そのページの見出しに関連するフレーズや、ページ内で訴えたいことの中で特に強調したい部分１～３個所に使うのがいいよ。
単語全部強調っていうのは、かえってダメなんですね！
区切り線
続いて区切り線を使う方法です。
文章の区切りを示すhrタグ
文章の区切りとなる箇所に<hr>と記述します。
記述した部分には水平線が引かれ、文章の意味的な区切りを示します。
多くのタグは開始タグと終了タグの２つを使用しますが、hrタグは単独で使用します。
hrタグによる水平線はCSS側で色をつけたり太さを変えたり等、装飾することも可能です。
以下の例を見てみましょう。
<p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p> <hr> <p>文章を区切る場合には、hrダグで線を入れることができます</p>
<hr>と記述したところに水平線が入っています。
様々な意味を持つタグ
ここでは主に、文章中の語句に意味づけを行うタグを一覧で紹介します。
| タグ名 | 文章中での意味 | 使用ポイント |
| em | 強調する語句 | どこを強調するかでニュアンスが変わる時 |
| strong | 重要な語句 | emよりも重要性がある時 |
| b | 強調ではなく他と区別された語句 | 商品名やキーワードなど |
| i | 強調ではなく他と区別された語句 | 心の声や思考など |
| small | 補足的な語句・文章 | 免責事項、著作権表示など |
| hr | 区切り | テーマや話題が変わる時 |
かつてこれらのタグは、太字や斜体にするといったデザインとしての装飾目的で用いられることもありました。
HTML5以降では、文章や語句に意味を持たせる目的のみで用いることが推奨されています。
実際に書いてみよう
強調タグと区切り線を用いて実際にコードを書いてみましょう。
HTML
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLで強調タグと区切り線を使う方法</title>
</head>
<body>
<section>
<p><em>TechAcademy</em>はオンライン完結のプログラミングスクール。<br>
<strong>現役のプロが学習を徹底サポート</strong>するから、ITスキルを実務レベルで習得できます。</p>
<hr>
<p>何でも聞ける無料相談も実施中。<br>
サービスの内容、副業や転職についてなど、なんでもご相談ください。</p>
</section>
</body>
</html>
See the Pen
Untitled by nomallica (@nomallica)
on CodePen.
解説
上記のコードでは、主催をしている「TechAcademy」という点をemタグで囲んで強調しています。
また、最も伝えたい語句である「現役のプロが学習を徹底サポート」をstrongで囲み強調しています。
無料相談の説明の直前には、話題が変わることを示す意味で区切り線を設けています。
hrタグをたんさん使って、文章を分けると見やすくなりそうですね♪
細かいけど、HTML5から若干意味が変わったんだよ。
hrタグにも文書構造としても意味があるんですか？単に区切る線ではないんですか？
上で説明しているように、pタグのように段落と段落を分ける線だったり、後はsectionタグ内での区切りとして使うことが推奨されてるよ！
まとめ
今回はHTMLの「強調タグ」と「区切り線」について解説しました。
emタグやstrongタグは記述すると該当部分が太字や斜体で表示されますが、HTML5以降では文章中の語句などに意味を持たせる目的で用いられています。
そのため、決して装飾目的では無いことを覚えておいてください。
これらの強調タグを効果的に用いることで、文章中で何が重要であるかを読み手や検索エンジンに対して伝えられます。
ぜひ適切なタグを用いたマークアップを心がけてみてください。
HTMLを学習中の方へ
これで解説は終了です、お疲れさまでした。
- つまずかず「効率的に」学びたい
- 副業や転職後の「現場で使える」知識やスキルを身につけたい
HTMLを学習していて、このように思ったことはありませんか？
テックアカデミーのWebデザインコースでは、第一線で活躍する「プロのWebデザイナー」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。
合格率10%の選考を通過した、選ばれたWebデザイナーの手厚いサポートを受けながら、オリジナルのWebサイト制作を学べます。
まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役Webデザイナーから教わること」を実感してみてください。
時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！
