HTMLの太字タグの代替

82

さて、HTMLで<b>タグを使用できることは知っていますが、タグで"weight=bold"使用できる属性はありません<p>か？

それともCSS、またはJavascriptですか？

html  css 
— Kzqai
ソース
5
技術的に正しいにもかかわらず、トップの答えは事実上悲惨であると私は考えているので、私はこの質問の可視性を促進するために賞金を始めています。特に、「html5の太字タグ」をグーグル検索した結果が非常に高い質問について。
— kzqai
7
私はこの賞金をばかげて投票します。@mipadiには正解があります。ユーザーがそれ以外のスタイルを設定したいと思うかもしれないと理解できない場合、pそれは彼ら自身の問題です。たぶん彼らはそれをクリアする別のSOの質問をするでしょう。
— ライリー

回答:

99

<strong>タグも検討してください。スクリーンリーダーにははるかに優れているため、アクセシビリティにも優れています。検索エンジンにも使用し<strong>、彼らは、ヘッダーのタグを使用する方法に類似の重要な内容を決定するために、タグを<h1>、<h2>（けれどもなど、<b>また、検索エンジンに似た意味を持つことになります）。テキストの重要性を強調したい場合は、を使用してください<strong>。重要性を強調したくない場合は、<b>タグを使用するfont-weight:bold;か、要素またはCSSでスタイルを使用してください。

ただし、段落全体を太字にする場合は、CSSオプションを使用することをお勧めします。これにより、スクリーンリーダーへの影響が軽減され、段落全体を強調することはおそらく意味がありません。しかし一方で、私は以前、正当な理由で大胆に段落全体を強調していたのを見てきました。その場合、font-weight:bold;おそらくクラス/スタイルで使用したいものです。

最後に、<strong>、<b>またはfont-weight:bold;すべての仕事とは、似たような視覚的に（おそらくまったく同じ）を達成し、彼らは、わずかに異なる意味を持つことになります。また、何をしている太字はヘッダがある場合、ヘッダータグを使用していることを確認します<h1>、<h2>など

— ダリルハイン
ソース
37
<b>は、現在のHTMLまたはXHTML標準では非推奨ではなく、今後のHTML5でも非推奨ではありません。<b>と<strong>には異なる意味があります。<b>は「太字のテキスト」を意味します。<strong>は「より強い強調」を意味しますが、テキストスタイルを指示するものではありません。ブラウザのデフォルトは太字です。
— thomasrutter 2009年
2
<b>の普及は減少していますが、実際の要素はW3C仕様に従って非推奨になっていません。
— アレックス
4
<b>はHTML5で事実上非推奨になり、多少異なる意味を持つ別の<b>タグに置き換えられました。それは奇妙な選択ですが、それは基本的に彼らがやったことです。いずれにせよ、テキストを太字でスタイル設定するために使用しないでください。
— チャック
@Chuck：新しいb要素はどういう意味ですか？
— アレックス
1
最新のスクリーンリーダー（最新バージョンのJAWSやWindow Eyesなど）は、通常の設定では<em>要素または<strong>要素の内容を異なる方法で伝達しないことに注意してください。音声出力に影響を与えるには、ユーザーは校正モードに入る必要があります。良い読み物：スクリーンリーダーには、HTML5の強調、i、b、em、および強力な要素がありません。
— Jon Gibbins 2011
79

あなたはCSSプロパティについて考えていますfont-weight：

p { font-weight: bold; }
— ミパディ
ソース
6
まあ、うまくいけば、彼はあなたが持っているものを正確にコピーしないでしょう...いくつかのことを台無しにするでしょう:)
— Darryl Hein
6
これは構文的に正しい例です。OPは、それをどのように使用するかを決定する必要があります。
— mipadi 2009年
6
「正しい構文」がすべてではありません。bタグの解決策の探求において多くの可視性を備えた質問のトップの回答として、この回答の回答がより優れていることを願っています。それは、他のはるかに重要な用途（一般にテキストでの段落）を持つ要素のスタイリングを提唱しているため、および<strong>、<h1>、 <em>、および<mark>。技術的には実行可能ですが、実際には災害を招きます。
— kzqai
4
@Tchalvak：<p>OPが例として使用したため、例として使用しています。font-weightただし、どの要素でも機能します。
— mipadi
7
@mipadi私はそれを理解していますが、個人的に見知らぬ人が「彼の顔を剃るための本当に鋭いナイフ」を私に求めた場合、私は要求の特定の用語を無視して彼に安全かみそりを与えます。
— kzqai
23

テキストの意味が意味的に強い場合は、strong要素を使用します。そうでない場合は、セマンティックな名前付きクラス（要素の意味を明確に示すもの、呼び出しboldなどでプレゼンテーションとデータを混在させないでください）を使用し、CSSで参照します。

HTML

<span class="important-message">I'm important!</span>

CSS

.important-message {
   font-weight: bold;
}

一部の人々はまだb要素をプレゼンテーションフックとして使用していますが、strong最近ではほとんどの人が要素を好んでいますが、非推奨ではありません。それらが正しく使用されていることを確認してください。

— アレックス
ソース
4
<b>は非推奨ではありません。HTML 4.01、XHTML 1、XHTML 1.1、さらには今後のHTML5でも引き続きサポートされます。その非推奨は神話です。非推奨にする必要があるかどうかは別の問題です。そうではありません。w3.org/TR/html401/index/elements.html
— thomasrutter
小さな専門性：クラス名は統制語彙ではないため、「セマンティック」と呼ぶことはできません。アプリ全体で「重要なメッセージ」が何を意味するかを定義する標準はどこにもありません。クラスに関数で名前を付けることは、読みやすさとベストプラクティスを促進するため、依然として良い考えです。
— thomasrutter 2009年
@thomasrutter ...だから私は考えると言った。名前は、コンピューターに対してのみ意味論的である必要はありません。人々もhtmlを読みます。
— アレックス
10

<B>タグは健在です。<b>は非推奨ではありませんが、その使用は明確化され、制限されています。<b>には意味的な意味はなく、スクリーンリーダーで話されるような音声の強調も伝えません。ただし、<b>は、<i>タグと同様に、印刷された強調を伝達します。どちらもtypograpghyで特定の場所を持っていますが、音声コミュニケーションではありません、mesfrères。

http://www.whatwg.org/から引用するには

b要素は、ドキュメントの要約のキーワード、レビューの製品名、または典型的な活字表現が太字になっている他のテキストのスパンなど、特別な重要性を伝えることなく、通常の散文からスタイル的にオフセットされるテキストのスパンを表します。
— user336882
ソース
8

タグBoldを使用してテキストや単語を作成できます<b>Text</b>。

<strong>Text</strong>タグも使用できます

ヘッドタグは<h1>、<h2>、<h3>、...デフォルト太字タグであり、あなたは、CSSでスタイルを変更しない限り、デフォルトでは、あなたのテキストを太字にします

上記のタグはHTMLで利用可能でしたが、スタイルを変更しCSSたい場合は、

font-weight:bold
— ナセル・ハジュルー
ソース
7

以下のようにコーディングできます。

<html>
 <head>
 <style>
 p.boldstats{
 font-weight: bold
  }
  </style>
 </head>

  <body>
  <p class="boldstats"> The bold finder </p>
  </body>
</html>
— madcoderJ
ソース
6

あなたはあなたのfont-weight属性を使うことができます

例えば：

<p>This is my paragraph</p>

以下のようにCSSをインラインにすることができます。

<p style="font-weight:bold;">This is my paragraph</p>

または、以下のように外部CSSスタイルシートに入れてください。

p{
  font-weight:bold;
}
— オルワサヨババロラ
ソース
5

それはすべて歴史的であり、恐竜が地球を歩き、CSSが存在しなかった時代からさかのぼります。

もっと真剣に、<b/>タグを忘れて、font-weight:boldCSSルールで使用してください:)

— ジュリアン・オーブール
ソース
4

<b> 最後の手段です

を使用できます<b>が、最後の手段としてのみ使用できます。の優れた代替手段として機能するさまざまな要素があります<b>。ここでは、最も有用な順に示します。

より便利な代替手段

  • 重要なテキストの場合： <strong>
  • ストレス強調テキストの場合： <em>
  • 見出しについては、ページ見出しだけでなく、段落見出しなど、あらゆる種類のものがあります。 <h1> through <h6>

使用するための実用的なエッジケース <b>

私が使用を提唱する唯一のケース<b>は、

  1. <strong>考えているテキストに対して表示したくない別の方法でスタイルを設定しました。

  2. イタリックの強調や見出しは必要ありません。

  3. インラインスパンまたはテキストを太字にするためだけにクラスを持つスパンを使用しようとしています。（例えば：<span class='bold'>）

<b>その場合、代わりに使用するのが合理的です。その場合、非セマンティックスパンよりもクリーン/短く、セマンティックである可能性があります。bは要素として使用するために再定義されているため、簡潔さ/読みやすさがその選択を行う良い理由です。印刷された強調を示します。

— Kzqai
ソース
4

あなたもすることができます <p style="font-weight:bold;"> bold text here </p>

— ジョン・ボーカー
ソース
1
インラインスタイルはhtmlで非推奨になりつつあります5：P
— ロック
本気ですか？インラインスタイルのタグのみが非推奨になると思いました。（big、s、strike、tt、u）
— John Boker
2
それらが非推奨でなくても、ほとんどの場合、それらは悪い考えです。<font>タグの使用に戻ることもできます。
— tgecho 2009年
小さなcssファイルにはインラインスタイルが引き続き推奨されます。YslowとGoogleのPageSpeedを確認してください。それは奇妙ですが、合理的に聞こえます（電話が少ないですか？）
— Yannis Dran 2015
@Kzqai：100％同意します。私の特定のケースでは、divでajaxリクエストが大量に読み込まれるため、インラインスタイルを削除する必要があります。インラインスタイリングを削除するだけで、読み込み時間を数ミリ秒節約できます。
— エイドリアンP.
1

たぶんあなたはCSSクラスを使いたいですか？

p.bold { font-weight:bold; }

そうすれば<p>、通常どおり使用できます。

<p>This is normal text</p>
<p class="bold">This is bold text</p>

あなたにあげる：

これは通常のテキストです。

これは太字のテキストです。

— daalbert
ソース
1

非常に古いスレッドです。-ただし、完全を期すために：

私が使う <span class="bold">my text</span>    

4つのフォントスタイルをアップロードすると、次のようになります。大胆な; イタリックと太字のイタリックをcss経由で私のWebサイトに挿入します。

結果として得られる出力は、単にフォントを変更するよりも優れており、太字のフォントがどのように見えるかというデザイナーの意図に近いと思います。

もちろん、イタリックとボールディタリックにも同じことが当てはまり、柔軟性が増します。

— ジム・バターワース
ソース
1

b要素の代わりに何を使用するかは、その要素のコンテンツのセマンティクスによって異なります。

  • 要素bとstrongは今では長い間共存してきました。ではHTML 4.01 HTML5に取って代わられた、strong「重点」、より強いすなわち強調のために使用されることを意図したem要素（単に指示された強調）。ではHTML 5.2、strong「その内容のための強力な重要性、重大性、または緊急性を表し」; 「深刻さ」と「緊急性」の側面は、HTML4.01と比較して仕様で新しくなっています。したがって、b重要、深刻、または緊急のコンテンツを表現していた場合は、strong代わりに使用することをお勧めします。あなたがしたい場合は、例えば、意味のあるクラス属性を追加することにより、これらの異なる意味を区別することができます<strong class="urgent">...</strong>し、<strong class="warning">...</strong>適切なCSSセレクターを使用して、これらのタイプの「強調」のスタイルを変更しますstrong.warning { color: red; background-color: transparent; border: 2px solid red; }。たとえば、さまざまな色やフォントサイズを使用します（たとえば、CSSファイルで：。）。
    の別の代替手段bは、HTML5.2で「コンテンツのストレス強調を表す」em要素です。この要素は通常イタリックで表示されることに注意してください（したがって、i要素の代わりとして推奨されることがよくあります）。
    私は、他のいくつかの答えからのアドバイスに従って、のようなものを書くという誘惑に抵抗します<strong class="bold">...</strong>。まず、class属性は、非視覚的なコンテキスト（ePubの本を聞く、テキスト読み上げ、スクリーンリーダー、点字）では何も意味しません。第二に、なぜ何かが太字になったのか。
  • あなたが使用している場合b（以前の箇条書きでのユースケースであるテキストの短いスパンとは対照的に）、全体の段落や見出しのために、私は適切でそれに代わるclass場合、属性や適用、WAI-ARIAのロールのようなalertライブのために「重要で、通常は時間に敏感な情報を含む」地域。上記のように、「セマンティック」class属性値を使用して、コードを保守している人（将来の自分を含む）が何かが太字になっている理由を理解できるようにする必要があります。
  • のすべての使用がb意味論的なものを表すとは限りません。たとえば、印刷されたドキュメントをHTMLに変換する場合、強調や重要性とは関係なく、視覚的なガイドとしてテキストが太字になる場合があります。たとえば、辞書の見出し語は他のコンテンツよりも「深刻」で「緊急」ではないため、b要素を保持し、オプションで意味のあるクラス属性を追加する<b class="headword">か、タグを次<span class="headword">の引数に基づいて置き換えることbができます。非視覚的なコンテキストでは意味がありません。

CSSファイルでは（style他の回答のいくつかが推奨しているように、属性を使用する代わりに）、「太字」または重要なテキストのスタイルを設定するためのいくつかのオプションがあります。

  • 異なる色（前景および/または背景）を指定する。
  • 異なるフォントフェースを指定する。
  • 境界線の指定（上記の例を参照）。
  • font-weightプロパティを使用して異なるフォントの太さを使用します。これにより、normalおよびbold、、つまりnormal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900、よりも多くの値が許可されます。
  • 等

数値のフォントの太さの値のサポートが常に優れているとは限らないことに注意してください。

— 積読
ソース
1 

    #bold{
      font-weight: bold;
    }
    #custom{
      font-weight: 200;
    }
<body>
  <p id="bold"> here is a bold text using css </p>
  <p id="custom"> here is a custom bold text using css </p>
</body>
スニペットを展開

私はそれがうまくいったことを願っています

— zakizakibzr
ソース
0

補足として、以下のコードも太字にします。

<strong> text here </strong>
— ビノジアントニー
ソース
1
...ほとんどのブラウザで...しかし、テキストをより強調していると説明することの副作用としてのみです。
— クエンティン
0

以下を使用できます：

<p id="p1">Some Text here </p>
#p1{
   font-weight: bold;
}

または

<Strong><p>Some text here </p></strong>

または

<h1> tag太字に少し似ているものを使用できます

— KFC
ソース
1
pはおそらくブロックレベルなので、pの内側に強く入りたいと思うでしょう。
— kzqai
0

今日、人々は自分のブログを最初からコーディングする代わりに、ウェブサイトビルダー（WordpressのようなCMS）を使用する傾向があります。プロのWeb開発者でさえ、高速であるためにそれを行います。

たとえば、実際に自分のブログをコーディングするときに覚えておくべき利点と事柄について言及していただければ幸いです。

  • 柔軟性の向上（カスタマイズ）
  • ドメイン名を支払う
  • 支払いとウェブホスティングの選択
  • セキュリティとメンテナンス
  • 一部のウェブサイトビルダーのテンプレートとグラフィックの著作権とライセンス。ホストのウェブサイトビルダーを使用した場合、ウェブサイトが特定のウェブホストにロックされる可能性があります。したがって、別のWebホストに移動することはできません。移動すると、そのテンプレートを使用できなくなるためです。
  • ウェブサイトがダウンしたときにウェブサイトビルダーのテクニカルサポートを求めるときに問題が発生します。
  • 一部のテンプレートは検索エンジンに対応しておらず、これはWebサイトのランキング（SEO）に影響します

とにかく、インタラクティブなWebページを作成するためにcss / css3またはJavaScriptを使用できます。あらゆる種類のコードをサーバーにアップロードして、デフォルトのブログテーマをフォーマットすることもできます。

— madcoderJ
ソース
-2

@Darryl Heinによる答えは、1つのポイントにもかかわらず正しいです。<b>これは、セマンティックではないため、XHTML以降はまったくお勧めしません。

<strong> 意味的に強調表示されたテキストを意味します

font-weight: bold 視覚的に強調表示されたテキストを意味します

<strong>これは従来のデフォルトですが、太字にならないようにcssで調整できます。赤、斜体、または下線を付けることができます（ただし、これらすべての可能性は実際にはユーザーフレンドリーではありません）。視覚的なデザインのためではなく、それらの意味に関連するテキスト内のフレーズ/単語に使用します

font-weight: bold ヘッダー、サブヘッダー、テーブルヘッダーセルなど、デザイン関連の太字部分に使用する必要があります。

— ガード
ソース
html5の<b>の改訂された定義ではそれが当てはまらないと思います。
— kzqai
同時に、あなた自身がそれ<b>が最後の手段であると書きました、そして私はbが推奨されないと書きました。矛盾はどこにありますか？
— ガード
3
申し訳ありませんが、dev.w3.org...previous versions of HTML defined the b element only in presentational terms, the element has now been given the specific semantic purpose of representing text “offset from its surrounding content without conveying any extra emphasis or importance, and [conventionally boldened]”. / html5 / markup / b.html＃bのように、html 5：html5では意味が再認識されているという意味でより具体的にすべきでした。それが私が考える理由<b>です：有効/最後の手段/意味論的ではなかった/意味論的であるように再定義された、など。ほんの微妙な違い。
— kzqai
-3

<strong>よりセマンティックなタグを使用してください。<b>減価償却されているので、使用しないことをお勧めします。それは本当を使用することが常に最善ですので、また、太字のテキストは検索エンジン最適化（SEO）重量より与えられている<strong>というよりも、作る<p>か、<span>太字はCSSを使用しました。

— マシュージェームステイラー
ソース
4
それらは「よりセマンティック」であるため、使用しないでください。作成しているものに適用されるセマンティクスがあるため、使用してください。OPのテキストのセマンティクスが何であるかはわかりません。
— クエンティン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.