Lesson 1: Thinking HTML5 semantics CHAPTER 5 213
Controlling format by using the element
Don’t forget that the <div> element can be placed around content, enabling you to control
its format. The <div> element is invisible and has no meaning, so when using HTML5, it’s gen-
erally better to use a semantic element such as article or section to provide context that has
meaning. If all you need is formatting, the use of the <div> element is perfect.
Adding thematic breaks
Use the <hr /> element to add a thematic break. It is a void element, so it cannot have any
content. You can use the <hr /> element to provide a thematic break when there is a scene
change in a story or to denote a transition to another topic within a section of a reference
book.
Annotating content
When annotating content by using HTML5 elements, be aware that the <b> and <i> ele-
ments that have been around since the beginning are still available but now have new mean-
ing. This section describes the use of the <b> and <i> elements and many other elements
that can be used to annotate content.
Using the <b> element
The <b> element was used to produce bold text, but now elements should have meaning,
not style. To keep the <b> element but also have semantic elements, the meaning needed to
change.
According to the W3C, the <b> element represents a span of text to which attention is
being drawn for utilitarian purposes without conveying any extra importance and with no
implication of an alternate voice or mood, such as keywords in a document abstract; product
names in a review; actionable words in interactive, text-driven software; or an article lede.
Therefore, you can apply any style you want to the <b> element, although keeping the bold
style makes the most sense.
The <b> element is the element of last resort because headings should be denoted with
the <hn> element, emphasized text should be denoted with the <em> element, important
text should be denoted with the <strong> element, and marked or highlighted text should
use the <mark> element. Refrain from using the <b> element except to denote product
names in a review, keywords in a document extract, or an article lede, as shown in the follow-
ing example.
<article>
<h1>PolyWannaWidget Review</h1>
The <b>PolyWannaWidget</b> is the best product
to use for creating crackers from nothing
other than a hammer.
</article>
Don’t forget that the <div> element can be placed around content, enabling you to control
its format. The <div> element is invisible and has no meaning, so when using HTML5, it’s gen-
erally better to use a semantic element such as article or section to provide context that has
meaning. If all you need is formatting, the use of the <div> element is perfect.Adding thematic breaks
Use the <hr /> element to add a thematic break. It is a void element, so it cannot have any
content. You can use the <hr /> element to provide a thematic break when there is a scene
change in a story or to denote a transition to another topic within a section of a reference
book.Annotating content
When annotating content by using HTML5 elements, be aware that the <b> and <i> ele-
ments that have been around since the beginning are still available but now have new mean-
ing. This section describes the use of the <b> and <i> elements and many other elements
that can be used to annotate content.Using the <b> element
The <b> element was used to produce bold text, but now elements should have meaning,
not style. To keep the <b> element but also have semantic elements, the meaning needed to
change.
According to the W3C, the <b> element represents a span of text to which attention is
being drawn for utilitarian purposes without conveying any extra importance and with no
implication of an alternate voice or mood, such as keywords in a document abstract; product
names in a review; actionable words in interactive, text-driven software; or an article lede.
Therefore, you can apply any style you want to the <b> element, although keeping the bold
style makes the most sense.
The <b> element is the element of last resort because headings should be denoted with
the <hn> element, emphasized text should be denoted with the <em> element, important
text should be denoted with the <strong> element, and marked or highlighted text should
use the <mark> element. Refrain from using the <b> element except to denote product
names in a review, keywords in a document extract, or an article lede, as shown in the follow-
ing example.
<article>
<h1>PolyWannaWidget Review</h1>
The <b>PolyWannaWidget</b> is the best product
to use for creating crackers from nothing
other than a hammer.
</article>