HTMLには見出しタグや段落タグをはじめとするさまざまなタグがあります。中でも文章中で使えるタグは、strongタグ、bタグ、brタグ、spanタグの4つです。それぞれ役割があるので、適切なところで使用することが求められます。
この記事では、「HTMLの文章内で使うタグ」について解説していきます。
この記事のゴールは「文章内で使えるタグの役割について理解し、適切に使い分ける」ことです。
いっしょに学習していきましょう。
- HTMLの文章内で使うタグの基礎知識
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
目次
文章内で使うタグ：strong, b, span, br
文章内で使えるタグには、strongタグ、bタグ、spanタグ、brタグの4つがあります。4つのタグには次のような特徴があります。
- strongタグ：強調したい箇所を指定する
- bタグ：ユーザーの注意をひきつける
- brタグ：改行する
- spanタグ：装飾する
基本書式
<p><strong>強調</strong>する</p>
<p>改行<br>する</p>
<p>ユーザーの<b>注意</b>を引き付ける</p>
<p><span>spanタグ</span>です</p>基本書式でブラウザの表示を確認します。
<p><strong>強調</strong>する</p>
<p>ユーザーの<b>注意</b>を引き付ける</p>
<p>改行<br>する</p>
<p><span>spanタグ</span>です</p>
出力結果
文章内で使える4つのタグはそれぞれ違いがあります。その中でもstrongタグとbタグは似ていますが、役割が違います。
strongタグとbタグの違い：重要度が高いか、注意を引き付けたいか
strongタグとbタグどちらもブラウザ上では太字で表示されるため、同じに見えます。
実は2つのタグには次のような違いがあります。
- strongタグ：内容の重要性・緊急性が高いテキストに使う
- bタグ：ユーザーの注意を引き付ける（目線を引き付けたい）
緊急性が高い、重要性の高いものに対してはstrongタグ。緊急性・重大性が高くないものの、ユーザーの目線を引き付けたいテキストに対してはbタグを使います。
理由がなく単に太字にしたい（ユーザーの注意を引きたい）、ということであればstrongタグよりもbタグを使ったほうがよいでしょう。
太字であれば何でもstrongタグを使えばいいというわけではありません。太字にしたい内容に応じてstrongタグとbタグを分けて使う必要がある、ということを覚えておきましょう。
brタグ：文章で改行に使うタグ
テキストの改行に使われるのがbrタグです。brタグを挿入した箇所からテキストの改行が始まります。brはBreakの略語です。brタグは、strongタグやspanタグ、bタグと違って閉じタグがなくても使用することができます。
brタグは改行することができる便利なタグです。
しかしbrタグは使いすぎると、ソースコードが読みにくくなるというデメリットがあります。
空白行としてbrタグを使用する例がありますが、好ましくありません。余白を作りたい場合は、CSSでスタイルを調整して余白を設けましょう。
brタグは「改行する」ためのタグなので、それ以外の用途で使うのは控えるようにしましょう。
spanタグ：単体で意味を持たないが、インラインでグルーピングできるタグ
spanタグはインライン要素で、特に意味を持たないタグです。選択した範囲をグルーピングすることができます。pタグの中にpタグを入れることはコーディングの規約的にNGですが、ブロック要素の中にインライン要素を入れるのは規約上OKです。
そのためpタグの中にspanタグを入れて使うことができます。spanタグで囲まれた要素はインライン要素となります。
spanタグは、テキストの一部だけスタイルを変えたいときに使われます。
例えば次のようなHTMLではspanタグにスタイルを適用して文字色を変えています。
<p><span>装飾</span>できます。</p>span {
color: red;
}出力結果
なお、spanタグは文章の中で使うことができますが、spanタグの中にdivタグやpタグを使うことはできないことを覚えておきましょう。
strongタグ、bタグ、brタグ、spanタグを記述してみよう。
次のHTMLの文章を、strongタグ、bタグ、 brタグ、spanタグを使って記述してみましょう。
<p>英語の部分をspanタグで囲ってください。</p>
<p>bタグでこの文章を読んでもらう。</p>
<p>長い文章です。改行してください。長い文章です。改行してください。長い文章です。改行してください。長い文章です。改行してください。長い文章です。改行してください。長い文章です。改行してください。</p>
<p>重要性・緊急性が高い文章です！</p>strongタグ、bタグ、brタグ、spanタグを使って記述することができたでしょうか？
次のHTMLは、strongタグ、bタグ、brタグ、spanタグで記述した例になります。
<p>英語の部分を<span>span</span>タグで囲ってください。</p>
<p><b>タグでこの文章を読んでもらう。</b></p>
<p>長い文章です。改行してください。長い文章です。改行してください。<br>長い文章です。改行してください。長い文章です。改行してください。長い文章です。改行してください。長い文章です。改行してください。</p>
<p><strong>重要性・緊急性が高い文章です！</strong></p>まとめ
文章内で使えるタグについて解説しました。strongタグ、bタグ、brタグ、spanタグそれぞれ役割があるので、役割に応じて適切に使用しましょう。特に、strongタグとbタグはブラウザの表示上では同じなので注意が必要です。
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
HTMLには様々なタグや属性の種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
文章内で使えるタグまとめ
- strongタグ：重要性、緊急性の高いものに対して使用する
- bタグ：ユーザーに注意を引き付けるために使用する
- brタグ：文章を改行する
- spanタグ：要素をインラインでグルーピングできる
