• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint


Although HTML provides the <font> with which to style text, the use of this tag is now discouraged by the World Wide Web Consortium (W3C). Cascading Style Sheets (CSS) not only provide much more flexibility, but also adheres a lot more closely to the original concept of HTML as a structural markup language.

HTML Beginnings as a Structural Markup Language

The original concept for HTML was that of a language used to mark up text to describe the different structural elements of a document. HTML tags (see table 4.1) identified which portion of a document was a heading, which portions were paragraphs, which portion was part of a list, and which words needed to be emphasized. The browsers were designed to interpret these structural elements in such a way that the text onscreen made sense to the reader (see Figure 4.1). Not every browser displayed text the same; one might show text marked “emphasize” in italics and another boldfaced, but either way the text was emphasized. The goal was readable documents that would display with structural definition across a variety of platforms (see Figure 4.2).

Figure 4.1. Text styled only with structural markup is plain, but readable.

Figure 4.2. Basic structural markup tags as they display in a browser window.

Table 4.1. Common Structural HTML Tags
HTML Tag Encloses What Kind of Text
<p></p> Paragraph
<h1></h1> Top-level heading
<h2></h2> Second-level heading
<h3></h3> Third-level heading
<em></em> Emphasized
<strong></strong> Strongly emphasized
<ul></ul> Unordered list
<ol></ol> Ordered list
<li></li> List item
<blockquote> </blockquote> Quoted text

Increasing Use of Presentational Markup

With the advent of graphical browsers and the rapid expansion of the web came the demand from HTML authors for new tags that would specify presentational effects rather than just structure. Designers were no longer satisfied to specify that a word needed to be emphasized somehow; they wanted to be able to specify exactly how the word would be emphasized (by bolding, for instance). In response to this pressure, physical elements such as <b> and <i> began to enter the language. Soon a structural language was evolving into a presentational one, and the <font> tag for styling text came into wide usage.


Logical elements, such as <em>, indicate the meaning or role of certain text; the browser in some way should emphasize text marked <em>, but the markup doesn’t dictate exactly how. Physical elements, such as <b>, do just the opposite: They specify how the text should be styled (in this case, in boldface), but indicate nothing about the part the text plays in the document’s structure.

What’s Wrong with Presentational Markup?

Web site designers were happy to have some control over presentation, but as they stopped using structural formatting, it was no longer possible to deduce the structure of the information from the source. This has a number of negative repercussions, including the following:

  • The code produced doesn’t convey anything about the meaning of the text being presented. Structurally, these pages are just strings of letters. A speech-synthesis browser, for example, will read text marked with <h1> tags as a main heading; it will read text marked to be rendered in large type and bold just like any other text.

  • Unstructured markup is much more difficult to maintain. Text marked up logically according to the meaning of the content results in clean code that makes sense.

  • Unstructured pages are very difficult to index. If page headings and section headings are clearly marked, search engines can use them to enable the user to perform targeted searches for relevant information. (See Chapter 7, “Utilizing Head Content,” for a full discussion of search engines and indexing.)

This Is a Job for CSS

The W3C quickly recognized that the nature of HTML was being changed by the increasing use of presentational markup and that a solution was needed. As a direct response, work began on Cascading Style Sheets, and in 1996, CSS was made a full W3C Recommendation.

CSS is designed to allow the web designer a lot of control over how his pages display, while retaining the basic essence of HTML as a structural language. It allows for much more complex and varied presentation of text than HTML ever could, permitting styling such as the creation of borders, determining the amount of space around elements, variations on capitalization, decoration (such as underlining), letter spacing, and many other possibilities (see Figure 4.3).

Figure 4.3. CSS allows for much more advanced typography than the styling possible with presentational HTML based on the <font> tag.

Almost as exciting is the lightening of the web developer’s workload brought about by the use of linked style sheets, where a single change to a style declaration can affect specifically targeted text sitewide.

CSS is clearly the direction of things to come for web designers, and should be part of the tool kit of any serious web designer. The Cascading Style Sheets specification is covered thoroughly in Chapter 13, “Using Cascading Style Sheets.”


With the proliferation of new and alternative web browsing devices such as cellular phones, handhelds, personal digital assistants, and web TV, logical document structuring might well become critical. In conjunction with CSS, this approach allows for very different presentations as determined by the device being used to view the page—exactly as in the original concept for HTML.

The <font> Tag as an Alternative

However, you also can style text by using the <font> tag. Although this is not ideal for the reasons previously discussed, and because it is deprecated (discouraged) by the W3C, if you need to style your text quickly and choose to postpone learning CSS, Dreamweaver offers formatting tools for this purpose, and this chapter explains how to use them.

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint