Alternative to the HTML Bold tag
HtmlCssHtml Problem Overview
Okay, so I know that in HTML you can use the <b>
tag, but isn't there a "weight=bold"
attribute that I can use in the <p>
tag?
Or is that in CSS, or Javascript?
Html Solutions
Solution 1 - Html
Also consider the <strong>
tag. It's much better for screen readers and therefore better for accessibility. Search engines also use <strong>
tags to determine important content similar to how they use header tags <h1>
, <h2>
, etc (although <b>
will also have similar meaning to search engines). If you want to stress importance of text, use <strong>
. If you don't want to stress importance, use the <b>
tag or use the font-weight:bold;
style on the element or in the CSS.
Although, if you are bolding the entire paragraph, it's probably better to use the CSS option. This will reduce the affect on screen readers and it probably doesn't make sense to have an entire paragraph emphasized. But on the other hand, I've seen bold used to emphasize an entire paragraph before for good reason. In which case, font-weight:bold;
is what you want to use, likely in a class/style.
In the end, <strong>
, <b>
or font-weight:bold;
will all work and accomplish something similar visually (probably exactly the same), but they have slightly different meanings. Also, make sure that if what you're bolding is a header, use the header tags: <h1>
, <h2>
, etc.
Solution 2 - Html
You're thinking of the CSS property font-weight
:
p { font-weight: bold; }
Solution 3 - Html
If the text's meaning is semantically strong, use the strong
element. If not, use a semantic named class (one that clearly shows the meaning of the element, don't mix presentation and data by calling it bold
etc) and reference it in your CSS.
###HTML
<span class="important-message">I'm important!</span>
###CSS
.important-message {
font-weight: bold;
}
Some people still use the b
element as a presentational hook, but it hasn't been deprecated, though most people favour the strong
element nowadays. Just make sure they are used correctly.
Solution 4 - Html
The <b> tag is alive and well. <b> is not deprecated, but its use has been clarified and limited. <b> has no semantic meaning, nor does it convey vocal emphasis such as might be spoken by a screen reader. <b> does, however, convey printed empasis, as does the <i> tag. Both have a specific place in typograpghy, but not in spoken communication, mes frères.
To quote from http://www.whatwg.org/</b>
The b element represents a span of text to be stylistically offset from the normal prose without conveying any extra importance, such as key words in a document abstract, product names in a review, or other spans of text whose typical typographic presentation is boldened.
Solution 5 - Html
You can make text or words Bold
with using <b>Text</b>
tag.
You can also use <strong>Text</strong>
tag
Head tags <h1>
, <h2>
, <h3>
, ... are default bolded tags and make your text Bold by default unless you change their style with CSS
Above tags was available in HTML but if you like to change the style with CSS
you can use
font-weight:bold
Solution 6 - Html
Its in CSS you have to set font-weight: bold;
as style
Solution 7 - Html
You can code like below..
<html>
<head>
<style>
p.boldstats{
font-weight: bold
}
</style>
</head>
<body>
<p class="boldstats"> The bold finder </p>
</body>
</html>
Solution 8 - Html
You can use the font-weight attribute on your
For example:
<p>This is my paragraph</p>
You can either have your CSS inline as below:
<p style="font-weight:bold;">This is my paragraph</p>
Or have it in your external CSS stylesheet as below:
p{
font-weight:bold;
}
Solution 9 - Html
It's all historical and dates from a time where dinosaurs walked the earth and CSS didn't exist.
More seriously, forget about the <b/>
tag and use font-weight:bold
in a CSS rule :)
Solution 10 - Html
you could also do <p style="font-weight:bold;"> bold text here </p>
Solution 11 - Html
<b>
is a last resort
You can use <b>
, but only as a last resort. There are a variety of elements that work as good alternatives to <b>
, here they are in order of most usefulness:
More useful alternatives
- For important text:
<strong>
- For stress emphasized text:
<em>
- For headings, not just page headings but paragraph headings and others of all kinds:
<h1> through <h6>
<b>
The practical edge case for use of The only case where I would advocate using <b>
is if
-
you have styled
<strong>
in a different way that you don't want displaying for the text that you have in mind, -
you don't want italic emphasis or a heading, and
-
you are about to use an inline span or a span with a class just for bolding text. (For example:
<span class='bold'>
)
Then it's reasonable to use <b>
instead, because in that case it'll probably be cleaner/shorter and more semantic than an unsemantic span, and terceness/readability is a good reason for making that choice, since b has been redefined for use as an element denoting printed emphasis.
Solution 12 - Html
#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>
I hope it's worked
Solution 13 - Html
Maybe you want to use CSS classes?
p.bold { font-weight:bold; }
That way you can still use <p>
as normal.
<p>This is normal text</p>
<p class="bold">This is bold text</p>
Gives you:
This is normal text.
This is Bold Text.
Solution 14 - Html
A very old thread, I know. - but for completeness:
I use <span class="bold">my text</span>
as I upload the four font styles: normal; bold; italic and bold italic into my web-site via css.
I feel the resulting output is better than simply modifying a font and is closer to the designers intention of how the boldened font should look.
The same applies for italic and bolditalic of course, which gives me additional flexibility.
Solution 15 - Html
What you use instead of the b
element depends on the semantics of that element's content.
- The elements
b
andstrong
have co-existed for a long time by now. In HTML 4.01, which has been superseded by HTML5,strong
was meant to be used for "strong emphasis", i.e. stronger emphasis than theem
element (which just indicated emphasis). In HTML 5.2,strong
"represents strong importance, seriousness, or urgency for its contents"; the aspects of "seriousness" and "urgency" are new in the specification compared to HTML 4.01. So if you usedb
to represent content that was important, serious or urgent, it is recommended that you usestrong
instead. If you want, you can differentiate between these different semantics by adding meaningful class attributes, e.g.<strong class="urgent">...</strong>
and<strong class="warning">...</strong>
and use appropriate CSS selectors to style these types of "emphasis" different, e.g. using different colours and font sizes (e.g. in your CSS file:strong.warning { color: red; background-color: transparent; border: 2px solid red; }
.).
Another alternative tob
is theem
element, which in HTML 5.2 "represents stress emphasis of its contents". Note that this element is usually rendered in italics (and has therefore often been recommended as a replacement for thei
element).
I would resist the temptation to follow the advice from some of the other answers to write something like<strong class="bold">...</strong>
. Firstly, the class attribute doesn't mean anything in non-visual contexts (listening to an ePub book, text to speech generally, screen readers, Braille); secondly, people maintaining the code will need to read the actual content to figure out why something was bolded. - If you used
b
for entire paragraphs or headings (as opposed to shorter spans of texts, which is the use case in the previous bullet point), I would replace it with appropriateclass
attributes or, if applicable, WAI-ARIA roles such asalert
for a live region "with important, and usually time-sensitive, information". As mentioned above, you should use "semantic"class
attribute values, so that people maintaining the code (including your future self) can figure out why something was bolded. - Not all uses of the
b
may represent something semantic. For example, when you are converting printed documents into HTML, text may be bolded for reasons that have nothing to do with emphasis or importance but as a visual guide. For example, the headwords in dictionaries aren't any more "serious", "urgent" than the other content, so you may keep theb
element and optionallly add a meaningful class attribute, e.g.<b class="headword">
or replace the tag with<span class="headword">
based on the argument thatb
has no meaning in non-visual contexts.
In your CSS file (instead of using style
attributes, as some of the other answers have recommended), you have several options for styling the "bold" or important text:
- specifying different colours (foreground and/or background);
- specifying different font faces;
- specifying borders (see example above);
- using different font weights using the
font-weight
property, which allows more values than justnormal
andbold
, namelynormal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
, - etc.
Note that support for numeric font-weight values has not always been great.
Solution 16 - Html
On a sidenote the below code will also make it bold.
<strong> text here </strong>
Solution 17 - Html
<p style="font-weight:bold;"></p>
Solution 18 - Html
You can use following :
<p id="p1">Some Text here </p>
#p1{
font-weight: bold;
}
OR
<Strong><p>Some text here </p></strong>
OR
You can use <h1> tag
which is somewhat similar to bold
Solution 19 - Html
Nowadays people tend to use website builders (CMS like Wordpress) instead of coding their own blog from scratch. Even professional web developers do it because it's faster.
It would be nice if you could mention the advantages and things to keep in mind when coding your own blog in real life, for example:
- More flexibility (customization)
- Pay a domain name
- Pay and choose a web hosting
- Security and maintenance
- Copyright and license of some website builders' templates and graphics. Your website could be locked to a particular web host if you used your host's website builder. So you cannot move to another web host, because if you do you could no longer use that template.
- Experience trouble when asking for website builder's tech support when the website goes down.
- Some templates are not search engine friendly and this affects your website ranking (SEO)
Anyways, you can use css/css3 or JavaScript for making interactive webpage. Even you can upload your all sort of code into a server formatting the default blog theme.
Solution 20 - Html
The answer by @Darryl Hein is correct despite one point - <b>
is not recommended at all since XHTML, because it's not semantic.
<strong>
means semantically highlighted text
font-weight: bold
means visually highlighted text
<strong>
can be css-tuned to not be bold, though it's a conventional default. It can be made red, or italic, or underlined (though all these possibilities are not really user-friendly). Use it for phrases / words in text, not because of visual design, but related to their meaning
font-weight: bold
should be used for design-related bold parts, like headers, sub-headers, table header cells etc.
Solution 21 - Html
Use the <strong>
tag because it's more semantic. <b>
has been depreciated so it's best not to use it. Also bold text is given more Search Engine Optimisation (SEO) weight so it's always best to use a real <strong>
rather than making a <p>
or <span>
bold using CSS.