HTML and CSS Reference
In-Depth Information
The
<em>
element is used semantically to place a
stressed emphasis
on text; it is thus
the most popular option for italicizing text. The other option, the
<i>
element, is used se-
mantically to convey text in an
alternative voice or tone
, almost as if it were placed in quo-
tation marks. Again, we will need to gauge the significance of the text we want to italicize
and choose an element accordingly.
Here's the HTML code for italicizing text (see
Figure 2.4
)
:
1.
<!-- Stressed emphasis -->
2.
<p>I
<em>
love
</em>
Chicago!</p>
3.
4.
<!-- Alternative voice or tone -->
5.
<p>The name
<i>
Shay
</i>
means a gift.</p>
Figure 2.4
Using the
<em>
and
<i>
elements to italicize text properly, the word
“love” is semantically interpreted as having
stressed emphasis
, and the word “Shay” is
semantically interpreted as having an
alternative voice or tone
These text-level elements are quite handy for bringing our content to life. In addition to
these, there are structurally based elements. Whereas text-based elements identify headings
and paragraphs, structural elements identify groupings of content such as headers, articles,
footers, and so forth. Let's take a look.
Building Structure
For the longest time the structure of a web page was built using divisions. The problem was
that divisions provide no semantic value, and it was fairly difficult to determine the inten-
tion of these divisions. Fortunately HTML5 introduced new structurally based elements,
including the
<header>
,
<nav>
,
<article>
,
<section>
,
<aside>
, and
<foot-
er>
elements.
All of these new elements are intended to give meaning to the organization of our pages and
improve our structural semantics. They are all block-level elements and do not have any
implied position or style. Additionally, all of these elements may be used multiple times
per page, so long as each use reflects the proper semantic meaning.
Let's roll up our sleeves and take a closer look.
Search WWH ::
Custom Search