HTMLで強調タグと区切り線を使う方法【初心者向け】

HTML初心者向けに、「強調タグ」と「区切り線」を使う方法を解説した記事です。強調タグは【emタグ】と【strongタグ】の2つの用途を解説。また、区切り線は【hrタグ】を使います。サンプルコードありですぐに実践可能。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

HTMLについて今さら聞けない!という初心者のために、HTMLの基礎を紹介する記事です。

今回は、HTMLの「強調タグ」と「区切り線」について解説します。そもそも、HTMLの記述方法がわからない場合は、先に HTMLの書き方 の記事をご覧ください。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのHTMLのカリキュラムをもとに執筆しています。

 

なお、今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

 

強調タグ

HTMLでは文章を記述する際に、タグを使って重要な部分を強調することが可能です。強調タグを使うことにより、文章中で何が重要であるかを読み手にわかりやすく伝えることができます。またコンピューターやGoogleの検索エンジンなどに対しても文書のなかで何が重要であるかを認識させることができます。

今回は「emタグ」と「strongタグ」を紹介します。

 

・強調 emphasis <em>〜</em>

タグで囲んだ部分が斜体で表示されます。主に文脈のなかで強調しておきたい部分に使われます。

 <p>TechAcademyでは<em>プログラミング教室</em>を開いています</p>

emタグ

<em>で囲んだ部分が斜体になりました。

 

・重要性を示す strong <strong>〜</strong>

タグで囲んだ部分が太字で表示されます。特定の語句を強調する際に使われ、HTML上ではemタグで囲まれた部分よりも重要であるとみなされます。

 <p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p>

強調タグ

<strong>で囲んだ部分が太字になりました。

さてemタグもstrongタグも、ある部分を強調したいときに使うタグですが、その違いはどこにあるのでしょう。strongタグは語句や文そのものが重要であることを示すものである一方、 emタグはどこを強調するかでニュアンスが異なる文章に使われます。

例を見てみましょう。

<em>TechAcademy</em>は恵比寿でプログラミング教室を開いています。
TechAcademyは<em>恵比寿で</em>プログラミング教室を開いています。
TechAcademyは恵比寿で<em>プログラミング教室</em>を開いています。

1番目の文章は、主催をしている「TechAcademy」という点を
2番目の文章は、新宿でも品川でもなく「恵比寿」という点を
3番目の文章は、英会話教室でも料理教室でもなく、「プログラミング教室」だという点をそれぞれ強調しています。

用途に応じて使分けてみましょう。

 

emタグもstrongタグもHTML上で強調しておきたい重要な部分とみなされますが、これはブラウザが自動的に解釈し表示するものであり、文字のデザインとは異なります

重要ではないけれど、文字を太くしたい場合にemタグやstrongタグを多用すると文書が混乱します。デザインとして文字を装飾したい場合にはCSSを使いましょう。

 

 

区切り線

続いて区切り線を使う方法です。

 

・区切り線 horizontal rule <hr>

文章のセクションを意味する区切り線を表示します。通常のタグは開始タグと終了タグの2つを使用しますが、hrタグは単独で使うことができます。また、色をつけたり太さを変えたりと、線を装飾することも可能です。

<p>語句を強調したい場合には<strong>強調タグ</strong>を使います</p>
<hr>
<p>文章を区切る場合には、hrダグで線を入れることができます</p>

hrタグ

<hr>と記述したところに線が一本入りました。

 

今回の記事は以上です。

さらにHTMLを学びたい場合は、HTMLで略語を表現する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。HTMLの基礎から学ぶことができます。