HTML Bold
This page contains various HTML bold codes - HTML codes for creating bold text.There's more than one way in HTML to bold text. This can be slightly confusing - especially if you aren't familiar with HTML coding. However, once you get your head around it, you'll find that each method has its place, and you can - and probably should - use a combination of these whenever you want HTML bold text.
CSS Bold: font-weight Property
CSS provides the font-weight property to make your text bold. Here's an example:
Example of CSS bold text...
CSS Code:
...and now this whole paragraph is bold.
You can also specify the "boldness factor" (instead of just specifying
bold). In other words, you can apply different levels of boldness to different text. Plus you can even specify that text should not be bold. To learn more about this, read about the font-weight property.
The above example uses inline style sheets, however, I highly recommend learning how to use external style sheets and CSS classes, as this will enable you to apply your styles across your whole website in one go.
HTML Bold: <b> Tag
When most people think "HTML bold", they usually think of text that has been boldened using the HTML <b> tag.Here's an example of creating "HTML bold" using the
<b> tag:
Example of HTML bold text...
...and now this whole paragraph is bold.
HTML Code:...and now this whole paragraph is bold.
Using the HTML
<b>
tag is probably the quickest/easiest way to bold text, however, just
because you want bold text, doesn't mean you should automatically use
the HTML <b> tag everytime.So Which "HTML Bold" Tag Should I Use?
The HTML specification includes several tags for presented boldened/emphasized/highlighted text. Each tag has its own special meaning.The following table outlines the HTML tags in question:
| HTML Tag | When to use this tag |
|---|---|
<b> | Use on 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. |
<em> | This element represents stress emphasis of its contents. Use this tag whenever you want to place emphasis on a particular word or phrase. |
<h1> to <h6> | Use these tags for defining different levels of headings. |
<mark> | This element represents a run of text in one document marked or highlighted for reference purposes, due to its relevance in another context. Use this tag when you want to highlight a particular word or phrase for reference purposes. |
<strong> | This element represents strong importance for its contents. Use this tag whenever you want to convey importance for a particular word or phrase. |
The<b>element should be used as a last resort when no other element is more appropriate. In particular, headings should use the<h1>to<h6>elements, stress emphasis should use the<em>element, importance should be denoted with the<strong>element, and text marked or highlighted should use the<mark>element
Combining CSS Bold and HTML Bold
Actually, a combination of CSS and HTML is often the best way to bold text in HTML documents.You should use HTML to define the meaning of the marked up text, then use CSS to define the way that the text looks.
As the HTML specification says:
Style sheets can be used to format<b>elements, just like any other element can be restyled. Thus, it is not the case that content in<b>elements will necessarily be boldened.
More HTML Font Styles - Bold/Italic Codes
<b>...</b> | Bold | ||||||||
<i>...</i> | Italics | ||||||||
<u>...</u> | Underline | ||||||||
<s>...</s> | |||||||||
<tt>...</tt> | Teletype | ||||||||
<sup>...</sup> | Superscript (E=MC2) | ||||||||
<sub>...</sub> | Subscript (H20) |
Aside from formatting text using the
font element and its attributes —face, size and color—
there are a variety of other HTML font styles that you can use to
format the text on your web page. These are listed in detail below along
with example codes:- Bold ~ Using bold text will display your text in a thicker font making one or more words really stand out
from the rest and will tend to draw the reader's attention to these
words. This has a variety of applications and is largely a matter of
taste. Bold text is sometimes used for list headers such as in this list
of font styles. To create bold text, place the desired text within the
<b>...</b>tags.
Example:
<b>Your bold text goes here.</b>
- Italics ~ The italics font style slants the text to the right
and thus can also be used to draw special attention to one or more
words. You may wish to use italics instead of bold when the bold font
style is too "loud" for your purposes. Italics has a variety of other
applications and the use of it is largely a matter of taste. The italics
are often formally applied to the titles of newspapers, magazines and
books, such as when one wants to mention The New York Times. To display text in italics using HTML, place the desired text within the
<i>...</i>tags.
Example:
<i>Your italics text goes here.</i>
- Underline ~ Like bold and
italics, underlining can also be used to place special emphasis on one
or more words but this tends to have limited use on web pages since
underlined text is also the default font style for hyperlinks.
Seasoned internet users automatically assume that all underlined text
constitutes a hyperlink. Thus, if you use underlining, be advised that
some readers will be compelled to move their mouse pointer over your
underlined text thinking it to be a hyperlink. Then, upon discovering
that it's just text that you meant to emphasize, they may become miffed
that you wasted their time and, worse, may ignore genuine hyperlinks
that appear later on in the web page. Hence, for the purposes of
clarity, underlined text should be avoided. Depending on the
circumstances, however, this may not be an issue. To create underlined
text, place the desired text within the
<u>...</u>tags.
Example:
<u>Your underlined text goes here.</u>
- Strike-through ~ Using HTML, you
can create text that looks like it's been crossed out or appears like it
has a line drawn through it. Formally this is used to indicate text
that has been edited or changed but it also has some
funnycleverhumorous applications that might be worth exploring. To create strike-through text, place the desired text within the<strike>...</strike>tags or the<s>...</s>tags.
Example:
<strike>Your strike-through text goes here.</strike>
- Teletype ~ This kind of text style
simulates the monospaced text created by a typewriter or teletype
machine and is often used to denote HTML source code in reference files
or tutorials such as this one. To create teletype text, place the
desired text within the
<tt>...</tt>tags.
Example:
<tt>Your teletype text goes here.</tt>
The monospaced text style can also be produced using the<code>...</code>tags:
<code>Your code text goes here.</code>
- Superscript ~ Using HTML, you can
create text that is raised above the preceding text and is displayed in a
smaller font. This can be used for mathemetical considerations or it
can be used to formally annotate compositions such as articles or
essays. For example:
To create superscript text, place the desired text (typically a number) within the<sup>...</sup>tags.
Example:
Such-and-such went on record to say that he greatly approved of the latest agreement.<sup>1</sup>Elsewhere, however, it was reported that he did not approve.<sup>2</sup>
- Subscript ~ This kind of text is
lowered below the baseline of the preceding text and is displayed in a
smaller font. This can be used to display chemical notation:
To create subscript text, place the desired text within the<sub>...</sub>tags.
Example:
The chemical notation of water is H<sub>2</sub>0.
