b要素 - 太字

2017/02/09

b要素は、太字を表す要素です。bはBoldから来ています。要約キーワードや、レビューにおける製品名、実用的な言葉など、他の文章と区別したい部分をマークアップするのに適しています。この要素には重要性や強調性といった意味はありません。そういった意味付けを行なうには、em要素やstrong要素を使って下さい。

概要

名前

b (Bold)

カテゴリ

Flow content

Phrasing content

Palpable content

配置できる場所

Phrasing contentが期待される場所。

コンテンツモデル

Phrasing content。

タグの省略

開始タグも終了タグも省略できません。

DOM Interface

HTMLElement

デフォルトのスタイル

Chrome / Firefox / Safari

b {
    font-weight: bold;
}

b {
    font-weight: bolder;
}

b {
    font-weight: bold;
}

仕様書

https://html.spec.whatwg.org/multipage/text-level-semantics.html#the-b-element

属性

グローバル属性

全てのタグで利用できるグローバル属性を指定できます。

サンプルコード

重要性を意味付けせずに、キーワードを見やすいように強調表示しています。

<p>今日、私たちが行くのは<b>湯布院</b>です。</p>

ユーザーはそれを特殊なものとして意識できるでしょう。

<p>あなたは小さな部屋に入った。あなたの<b>剣</b>が光り輝き、ネズミたちは逃げていった。</p>

記事のリード部分となる文や段落をマークアップするのも適切です。この時、class属性を付けておくとスタイリングの管理もしやすいでしょう。

<p><b class="lead">夏休みは高知の伝統行事「よさこい祭り」を鑑賞。人々の生き生きとした姿に目を奪われた。</b></p>
<p>8月の旅行では高知県を訪れました。よさこい祭りを見るためです。この時期はホテルの予約はまず取れません。仕方がないので私たちは…</p>

見出し(h1-h6要素)、重要性(strong要素)、強調(em要素)など、他の適切な要素がある場合は、b要素ではなく専用の要素を利用するべきです。

<p><strong>そこでAボタンを押してはいけません。全てのレイヤーを合成して保存後、ソフトが終了します。</strong></p>

デモ

b要素のデモです。b要素は、記事のキーワードやレビューの製品名などをマークアップするのに適しています。

<!-- このコードは編集できます。 -->

<p>今回は、大分県旅行で訪れた素晴らしい温泉を紹介します。<b>いちのいで会館</b>です。</p>
<p>ここではコバルトブルーに輝く温泉に入れたり、地元大分の郷土料理である団子汁を食べることができます。</p>

サポート状況

クリックすると、バージョンごとの対応状況を確認できます。

Chrome	Firefox	Safari	Edge	IE	Opera	iOS Safari	Android
●	●	●	●	●	●	●	●

概要

属性

グローバル属性

サンプルコード

デモ

サポート状況

関連記事