- How do I make text bold in HTML?
- 10 Answers 10
- HTML Text Formatting
- Example
- HTML Formatting Elements
- HTML and Elements
- Example
- Example
- HTML and Elements
- Example
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Element
- Example
- HTML Exercises
- HTML Text Formatting Elements
- Bold Font in HTML – Font Weight for Letters
- How to Make Text Bold With the Tag in HTML
- How to Make Text Bold With the Tag in HTML
- How to Make Text Bold with the CSS font-weight Property
- Should You Use , or font-weight to Make Text Bold?
- Conclusion
How do I make text bold in HTML?
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 text that I want emboldened.
I agree that it should be searched on google first, but I think the point is next time someone searches google, she/he will be directed to SO, which I see as good thing. More traffic and people coming on SO.
@binfolder might want to say whether or not he learned
@Andrija: I agree about directing them here. This is why my answer directed them back to a place where they can learn the answer to the next question: «how do I do italic?»
10 Answers 10
HTML doesn’t have a tag, instead you would have to use . Note however, that using is discouraged in favor of CSS for a while now. You would be better off using CSS to achieve that.
has never been deprecated. Recommended against in favor of , , , etc., yes; deprecated, no.
Why should using be discouraged in favor of CSS? That’s like saying using is discouraged in favor of CSS. It’s in the standard so use it.
Gumbo: From w3.org/TR/html4/present/graphics.html#h-15.2.1 – «The following HTML elements specify font information. Although they are not all deprecated, their use is discouraged in favor of style sheets.»
Actually those elements are making a comeback in HTML 5 as «phrase elements» — for example symbolises small print, while is to be used for book titles, I think.
I'm Bold! and I'm Bold Too!
From: http://www.december.com/html/x1/
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.
Description This element brackets text which should be strongly emphasized. Stronger than the em element.
- Some text that I want emboldened.
- Some text that I want emboldened.
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 «.
- 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 ).
- 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 «).
- 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 «).
- Want to distinguish table headings from table data cells? Use a «th» element and suggest a bold style for it within your CSS («th «).
- Want to distinguish the title of a referenced film or album from surrounding text? Use a «cite» element with a class («cite ), and suggest a bold style for it within your CSS («.movie-title «).
- 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 «).
- Want to distinguish some computer code from surrounding text? Use a «code» element and suggest a bold style for it within your CSS («code «).
- Want to distinguish a variable name from surrounding text? Use a «var» element and suggest a bold style for it within your CSS («var «).
- 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 «).
- 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 «).
- 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 «).
… 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 («Let me begin this news article with a sentence that summarizes it.), and suggest a bold style for it within your CSS («.lede . 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.
HTML Text Formatting
HTML contains several elements for defining text with a special meaning.
Example
This is subscript and superscript
HTML Formatting Elements
Formatting elements were designed to display special types of text:
- — Bold text
- — Important text
- — Italic text
- — Emphasized text
- — Marked text
- — Smaller text
- — Deleted text
- — Inserted text
- — Subscript text
- — Superscript text
HTML and Elements
The HTML element defines bold text, without any extra importance.
Example
The HTML element defines text with strong importance. The content inside is typically displayed in bold.
Example
HTML and Elements
The HTML element defines a part of text in an alternate voice or mood. The content inside is typically displayed in italic.
Tip: The tag is often used to indicate a technical term, a phrase from another language, a thought, a ship name, etc.
Example
The HTML element defines emphasized text. The content inside is typically displayed in italic.
Tip: A screen reader will pronounce the words in with an emphasis, using verbal stress.
Example
HTML Element
The HTML element defines smaller text:
Example
HTML Element
The HTML element defines text that should be marked or highlighted:
Example
Do not forget to buy milk today.
HTML Element
The HTML element defines text that has been deleted from a document. Browsers will usually strike a line through deleted text:
Example
My favorite color is blue red.
HTML Element
The HTML element defines a text that has been inserted into a document. Browsers will usually underline inserted text:
Example
HTML Element
The HTML element defines subscript text. Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O:
Example
HTML Element
The HTML element defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW [1] :
Example
This is superscripted text.
HTML Exercises
HTML Text Formatting Elements
Tag | Description |
---|---|
Defines bold text | |
Defines emphasized text | |
Defines a part of text in an alternate voice or mood | |
Defines smaller text | |
Defines important text | |
Defines subscripted text | |
Defines superscripted text | |
Defines inserted text | |
Defines deleted text | |
Defines marked/highlighted text |
For a complete list of all available HTML tags, visit our HTML Tag Reference.
Bold Font in HTML – Font Weight for Letters
Kolade Chris
When you’re building a website, you may want to place particular emphasis on certain text to let users know that it’s important.
And you can do this in HTML with various text formatting tags.
In this article, I will take you through how to emphasize certain text by making it bold.
In HTML, there are three major ways that you can use to make text bold. You can use the tag, the tag, or you can do it in CSS with the font-weight property. Let’s look at each method in more detail.
How to Make Text Bold With the Tag in HTML
HTML gives us the tag for making text bold. To make text bold with this tag, you need to wrap it around the text like this:
This text is bold, but this text is not.
As you can see in the image, the tag makes part of the text stand out.
How to Make Text Bold With the Tag in HTML
With the tag, you are not just making the text bold – you are calling special attention to it.
also makes text bold just like the tag, but there is a slight difference between the two. I’ll discuss this later in the article.
Just like the tag, you need to wrap the tag around the text to make the text bold with it.
Before paying to learn programming, check out freeCodeCamp.
With the tag, the freeCodeCamp text isn’t just bold, it has a semantic meaning and emphasis.
How to Make Text Bold with the CSS font-weight Property
The font-weight property takes lighter , bold , and bolder as values. It also takes numbers from 100 to 900. So, with it, you don’t just make text bold, you can also make it lighter than its surrounding text.
To make some text bold with the font-weight weight property, you need to select the text with its class, id (if any), or element and then apply the values you want. Here’s how it works:
This is a lighter text.
This is a bold text.
This is a bolder text.
Should You Use , or font-weight to Make Text Bold?
You might be wondering which to use for making text bold – , , or the CSS font-weight property.
You should generally avoid using because it’s already a style. When you make text bold with the tag, you’re explicitly telling the browser to make the text bold right from the HTML.
also makes the text appear bold, but it is semantic. With it, you’re not styling from the HTML (which HTML was never meant for originally), but rather you’re telling the browser to make the text appear stronger in appearance than other surrounding text.
The CSS font-weight property gives you more control over how light or bold the text should be. The values lighter , bold , and bolder are a start, but you can take things a step further by applying numbers/weights like 100 200 , 300 , 400 , 500 , 600 , 700 , 800 , and 900 as values, which gives different variations of lightness and boldness.
Conclusion
Bold font helps you place emphasis on certain words in HTML. In this article, you’ve learned about the 3 different ways you can make text bold, as well as which of them is best to use.
Thank you for reading, and keep coding.