How do I make text bold in HTML?

CssHtml

Css Problem Overview


I'm trying to make some text bold using HTML, but I'm struggling to get it to work.

Here's what I'm trying:

Some <bold>text</bold> that I want emboldened.

Could someone tell me what I'm doing wrong?

Css Solutions


Solution 1 - Css

use <strong> or <b> tag

also, you can try with css <span style="font-weight:bold">text</span>

Solution 2 - Css

HTML doesn't have a <bold> tag, instead you would have to use <b>. Note however, that using <b> is discouraged in favor of CSS for a while now. You would be better off using CSS to achieve that.

The <strong> tag is a semantic element for strong emphasis which defaults to bold.

Solution 3 - Css

The Markup Way:

<strong>I'm Bold!</strong> and <b>I'm Bold Too!</b>

The Styling Way:

.bold {
  font-weight:bold;
}

<span class="bold">I'm Bold!</span>

> From: http://www.december.com/html/x1/

>> <b> >> >> This element encloses text which should be rendered by the browser as boldface. Because the meaning of the B element defines the appearance of the content it encloses, this element is considered a "physical" markup element. As such, it doesn't convey the meaning of a semantic markup element such as strong.

>> <strong> >> >> Description This element brackets text which should be strongly emphasized. Stronger than the em element.

Solution 4 - Css

In Html use:

  • Some <b>text</b> that I want emboldened.
  • Some <strong>text</strong> that I want emboldened.

In CSS use:

  • Some <span style="font-weight:bold">text</span> that I want emboldened.

Solution 5 - Css

> Could someone tell me what I'm doing wrong?"

"bold" has never been an HTML element ("b" is the closest match).

HTML should contain structured content; publisher CSS should suggest styles for that content. That way user agents can expose the structured content with useful styling and navigational controls to users who can't see your suggested bold styling (e.g. users of search engines, totally blind users using screen readers, poorly sighted users using their own colors and fonts, geeky users using text browsers, users of voice-controlled, speaking browsers like Opera for Windows). Thus the right way to make text bold depends on why you want to style it bold. For example:

  • Want to distinguish headings from other text? Use heading elements ("h1" to "h6") and suggest a bold style for them within your CSS ("h1, h2, h3, h4, h5, h6 {font-weight: bold;}".

  • Want to embolden labels for form fields? Use a "label" element, programmatically associate it with the the relevant "select", "input" or "textarea" element by giving it a "for" attribute matching an "id" attribute on the target, and suggest a bold style for it within your CSS ("label {font-weight: bold;"}).

  • Want to embolden a heading for a group of related fields in a form, such as a group of radio choices? Surround them with a "fieldset" element, give it a "legend" element, and suggest a bold style for it within your CSS ("legend {font-weight: bold;}").

  • Want to distinguish a table caption from the table it captions? Use a "caption" element and suggest a bold style for it within your CSS ("caption {font-weight: bold;}").

  • Want to distinguish table headings from table data cells? Use a "th" element and suggest a bold style for it within your CSS ("th {font-weight: bold;}").

  • Want to distinguish the title of a referenced film or album from surrounding text? Use a "cite" element with a class ("cite class="movie-title"), and suggest a bold style for it within your CSS (".movie-title {font-weight: bold;}").

  • Want to distinguish a defined keyword from the surrounding text defining or explaining it? Use a "dfn" element and suggest a bold style for it within your CSS ("dfn {font-weight: bold;}").

  • Want to distinguish some computer code from surrounding text? Use a "code" element and suggest a bold style for it within your CSS ("code {font-weight: bold;}").

  • Want to distinguish a variable name from surrounding text? Use a "var" element and suggest a bold style for it within your CSS ("var {font-weight: bold;}").

  • Want to indicate that some text has been added as an update? Use an "ins" element and suggest a bold style for it within your CSS ("ins {font-weight: bold;}").

  • Want to lightly stress some text ("I love kittens!")? Use an "em" element and suggest a bold style for it within your CSS (e.g. "em {font-weight: bold;}").

  • Want to heavily stress some text, perhaps for a warning ("Beware the dog!")? Use a "strong" element and suggest a bold style for it within your CSS (e.g. "strong {font-weight: bold;}").

… You get the idea (hopefully).

Can't find an HTML element with the right semantics to express /why/ you want to make this particular text bold? Wrap it in a generic "span" element, give it a meaningful class name that expresses your rationale for distinguishing that text ("<span class="lede">Let me begin this news article with a sentence that summarizes it.</span>), and suggest a bold style for it within your CSS (".lede {font-weight: bold;"}. Before making up your own class names, you might want to check if there's a microformat (microformats.org) or common convention for what you want to express.

Solution 6 - Css

The HTML element defines bold text, without any extra importance.

<b>This text is bold</b>

The HTML element defines strong text, with added semantic "strong" importance.

<strong>This text is strong</strong>

Solution 7 - Css

Another option is to do it via CSS ...

E.g. 1

<span style="font-weight: bold;">Hello stackoverflow!</span>

E.g. 2

<style type="text/css">
    #text
    {
    	font-weight: bold;
    }
</style>

<div id="text">
    Hello again!
</div>

Solution 8 - Css

You're nearly there!

For a bold text, you should have this: <b> bold text</b> or <strong>bold text</strong> They have the same result.

Working example - https://jsfiddle.net/y7wjnpfx/">JSfiddle</a>

Solution 9 - Css

It’s just <b> instead of <bold>:

Some <b>text</b> that I want bolded.

Note that <b> just changes the appearance of the text. If you want to render it bold because you want to express a strong emphasis, you should better use the <strong> element.

Solution 10 - Css

I think the real answer is http://www.w3schools.com/HTML/default.asp.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser133145View Question on Stackoverflow
Solution 1 - CssAndrijaView Answer on Stackoverflow
Solution 2 - CssJoeyView Answer on Stackoverflow
Solution 3 - CssSampsonView Answer on Stackoverflow
Solution 4 - CssGeoView Answer on Stackoverflow
Solution 5 - CssBenjamin Hawkes-LewisView Answer on Stackoverflow
Solution 6 - CssMuhammad AwaisView Answer on Stackoverflow
Solution 7 - Cssuser110714View Answer on Stackoverflow
Solution 8 - Css1010View Answer on Stackoverflow
Solution 9 - CssGumboView Answer on Stackoverflow
Solution 10 - CssJohn SaundersView Answer on Stackoverflow