HTML and CSS Reference
In-Depth Information
When you use HTML tags to create paragraphs, headings, or lists, those tags affect that
block of text as a whole—changing the font, changing the spacing above and below the
line, or adding characters (in the case of bulleted lists). They're referred to as
block-level
elements
.
Character-level elements
are tags that affect words or characters within other HTML tags
and change the appearance of that text so that it's somehow different from the surround-
ing text—making it bold or underlined, for example.
To change the appearance of a set of characters within text, you can use one of two kinds
of tags: logical styles or physical styles.
Logical Styles
Logical style tags
describe the meaning of the text within the tag, not how it should look
in the browser. They're similar to the common element tags for paragraphs or headings.
For example, logical style tags might indicate a definition, a snippet of code, or an
emphasized word. This can be a bit confusing because there are de facto standards that
correlate each of these tags with a certain visual style. In other words, even though a tag
like
<strong>
would mean different things to different people, in most browsers it means
boldface.
Using logical style tags, the browser determines the actual presentation of the text,
whether it's bold, italic, or any other change in appearance. You cannot guarantee that
text that's highlighted using these tags will always be bold or italic, so you shouldn't
depend on it. These days, browser makers have pretty much agreed on how each of these
logical tags are rendered, but it's still important to understand that the logical tags convey
more meaning than just the physical styles that they apply.
Each character style tag has both opening and closing sides and affects the text within
those two tags. The following are the eight logical style tags:
<em>
This tag indicates that the characters are to be emphasized in some
way; that is, they're formatted differently from the rest of the text. In
graphical browsers, typically
<em>
italicizes the text. For example:
<p>
The anteater is the
<em>
strangest
</em>
looking animal,
isn't it?
</p>
<strong>
With this tag, the characters are to be more strongly emphasized
than with
<em>
—usually in boldface. Consider the following:
<p>
Take a
<strong>
left turn
</strong>
at
<strong>
Dee's Hop
Stop<
/strong
><
/p
>
