【HTML Living Standard】b要素の使い方

b要素の使い方について、初心者にもわかりやすく解説します。

作成日: 2025年09月29日更新日: 2026年03月24日

基本的な使い方

bオブジェクトは、他のテキストとは異なる注意を引くようにスタイル設定されているが、重要性や強調が特に付与されていないテキストを表すオブジェクトです。ウェブページ上で特定のテキストを太字で表示したい場合に用いられますが、これは単に視覚的な装飾ではなく、そのテキストに何らかのセマンティックな関連性や重要性があることを示します。

例えば、文書のリード文、記事中のキーワード、製品名、専門用語、または特定の固有名詞など、通常とは異なるスタイルで提示することで読み手の注意を促す部分に適しています。しかし、その内容が「非常に重要である」ことを示したい場合は要素を、「強調したい」場合は要素を使用するべきです。要素は、テキストの重要性や強調を伝えるのではなく、単に他のテキストと区別されるべき部分であることを示します。

ブラウザは通常、要素内のテキストを太字で表示しますが、これはスタイル上のデフォルト設定であり、CSSを使って表示を変更できます。重要なのは、要素がその内容に特定の意味的な役割を与える点です。コンテンツの構造と意味を正しく伝えるために、適切な要素を選択することがシステムエンジニアにとって重要です。単に太字にしたいだけで、セマンティックな意味合いがない場合は、CSSのfont-weightプロパティを使用するのが適切です。これにより、アクセシビリティや検索エンジン最適化（SEO）の観点からも、より質の高いマークアップを実現できます。

公式リファレンス: : The Bring Attention To element

構文(syntax)


1<b>テキスト</b>

引数(parameters)

引数なし

引数はありません

戻り値(return)

戻り値なし

戻り値はありません

サンプルコード

b要素でテキストを太字にしボタンを配置する


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>b要素とボタンのサンプル</title>
7</head>
8<body>
9    <!-- b要素は、セマンティックな重要性なしにテキストを太字にするために使用されます。 -->
10    <!-- ボタン内にテキストの一部を太字で表示する例です。 -->
11    <button type="button">
12        <b>クリック</b>して次へ進む
13    </button>
14</body>
15</html>

要素は、HTMLのLiving Standardで定義されている要素の一つです。これは、特に意味的な重要性を持たせずに、テキストの一部を太字で表示するために使用されます。例えば、文章内で単に見た目を強調したい部分や、ユーザーの注意を引きたいキーワードなどに適用されます。

この要素には引数や戻り値は存在しません。要素は、純粋に表示上のスタイルとして、指定されたテキストを太字にする役割のみを持ちます。

提供されたサンプルコードでは、<button>要素内に要素が記述されています。これにより、『クリック』というテキスト部分のみが太字で表示され、『して次へ進む』という部分と合わせて一つのボタンを構成します。この例のように、ユーザーインターフェースにおいて、ボタン内の特定の単語を視覚的に目立たせる目的で要素が利用されています。要素は、テキストに意味的な強調を持たせる要素とは異なり、文字の見た目だけを太くしたい場合に選択されるべきです。

要素は、テキストを太字にするための見た目の変更のみを行う要素です。内容に「重要性」や「強調」といった意味を持たせたい場合は、要素を使用するようにしましょう。要素は特別な意味を持たない太字表現であることを理解してください。一般的に、テキストの見た目（スタイル）はHTMLではなくCSSで指定することが推奨されます。CSSを用いることで、デザインの一貫性を保ちやすくなり、HTMLはページの構造を記述する役割に集中できます。サンプルコードのようにボタン内で使用しても機能しますが、見た目の調整はCSSで行うと、より柔軟で管理しやすいコードになります。

HTML b要素とbutton要素の基本


1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>HTML b要素とbutton要素のサンプル</title>
7</head>
8<body>
9    <!-- 
10        b要素は、特に意味論的な強調や重要性を持たせず、
11        スタイル上の理由でテキストを太字にする際に使用されます。
12    -->
13    <!-- 
14        button要素は、ユーザーがクリックしてアクションをトリガーするための
15        インタラクティブなボタンを作成します。
16    -->
17    <button type="button">
18        <b>ここを</b>クリック
19    </button>
20</body>
21</html>

このサンプルコードは、ウェブページ上に表示されるインタラクティブなボタンの作成方法と、そのボタン内に含まれるテキストの一部を太字にする方法を示しています。

まず、要素についてご説明します。要素はHTML Living Standardに定義される要素で、主に視覚的な目的のためにテキストを太字にする際に使用されます。これは、テキストに特別な意味論的な重要性や強調を与えることなく、スタイル上の理由で文字を目立たせたい場合に適しています。この要素は引数を持ちませんし、特定の戻り値もありません。単に囲まれたテキストをブラウザが太字で表示する役割を担います。

次に、button要素についてです。button要素は、ユーザーがクリックすることでウェブページ上で何らかの動作を開始させるための、インタラクティブなボタンを作成します。サンプルコードでは、button要素のtype属性に"button"が指定されています。これは、このボタンがフォームの送信など特定の機能を持つものではなく、一般的なクリック可能なボタンであることを意味します。

このサンプルコードでは、button要素の内部に要素が配置されています。これにより、「ここを」という部分だけが太字で表示され、「ここをクリック」というテキストが書かれたクリック可能なボタンが生成されます。このように、複数のHTML要素を組み合わせてユーザーインターフェースを構築する基本的なアプローチを理解することは、システムエンジニアを目指す上で非常に重要です。

要素は、テキストを視覚的に太字にするもので、内容に特別な意味や重要性はありません。意味を強調したい場合は、要素など、より適切なセマンティックな要素の利用を推奨します。

button要素は、ユーザーがクリックしてアクションをトリガーするためのインタラクティブな部品です。type="button"は、フォーム送信を伴わない汎用的なボタンであることを示しています。

サンプルコードのように、button要素の中に要素を配置することは可能です。「ここを」の部分が太字で表示され、その部分を含めボタン全体がクリック可能となります。ボタンのテキストは、その機能がユーザーに明確に伝わるように簡潔に記述することが重要です。