ガジェット通信 GetNews

見たことのないものを見に行こう
「ジャスティス・リーグ」特集サイト

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

DATE:
  • ガジェット通信 GetNewsを≫

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

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

 

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

 

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

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

 

強調タグ

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

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

 

・強調 emphasis 〜

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

 

TechAcademyではプログラミング教室を開いています

emタグ

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

 

・重要性を示す strong

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

 

語句を強調したい場合には強調タグを使います

強調タグ

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

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

例を見てみましょう。

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

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

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

 

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

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

 

 

区切り線

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

 

・区切り線 horizontal rule

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

語句を強調したい場合には強調タグを使います

文章を区切る場合には、hrダグで線を入れることができます

hrタグ

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

 

今回の記事は以上です。

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

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

カテゴリー : デジタル・IT タグ :
TechAcademyマガジンの記事一覧をみる ▶
  • 誤字を発見した方はこちらからご連絡ください。
  • ガジェット通信編集部への情報提供はこちらから
  • 記事内の筆者見解は明示のない限りガジェット通信を代表するものではありません。