Sams Teach Yourself HTML, CSS & JavaScript Web Publishing in One Hour a Day

ptg16476052

122 LESSON 7: Formatting Text with HTML and CSS

Character-Level Elements

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. Tags like <p>, <ul>, and <h1> are

block-level elements. The only character-level element you’ve seen so far is the <a> tag.

In HTML4 it was not valid to nest a block-level element within a

character-level element. For example, if you create a heading that

is also a link, the <a> tag was required to always appear within

the heading tag. But HTML5 changed that rule, making it possible

to link entire paragraphs or other blocks of content by wrapping

them with an <a> tag.

NOTE

To change the appearance of a set of characters within text, you can use one of two meth-

ods: semantic HTML tags or Cascading Style Sheets (CSS).

Semantic HTML Tags

Semantic tags describe the meaning of the text within the tag, not how it should look in

the browser. For example, semantic HTML 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, most brows-

ers display it in boldface, but it has the semantic meaning of strong emphasis.

Each character style tag has both opening and closing sides and affects the text within

those two tags. The following are semantic HTML tags:

<em> This tag indicates that the characters are emphasized in some way.

Most browsers display <em> in italics. For example:

<p>The anteater is the <em>strangest</em> looking animal,

isn't it?</p>

<strong> With this tag, the characters are 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>