HTML and CSS Reference
In-Depth Information
Browsers make best guesses at structuring malformed content and tend to ignore code
that is obviously wrong. The permissive nature of browsers has resulted in a massive number
of malformed HTML documents on the Web. Oddly, from many people's perspective, this
isn't an issue, because the browsers do make sense out of the “tag soup” they find. However,
such a cavalier use of the language creates documents with shaky foundations at best. Once
other technologies such as CSS and JavaScript are thrown into the mix, brazen flaunting of the
rules can have repercussions and may result in broken pages. Furthermore, to automate the
exchange of information on the Web, collectively we need to enforce stricter structure of our
documents. The focus on standards-based Web development and future development of
XHTML and HTML5 brings some hope for stability and structure of Web documents.
Major Themes of (X)HTML
The major themes addressed in this section are deep issues that you will encounter over and
over again throughout the topic.
Logical and Physical Markup
No introduction to (X)HTML would be complete without a discussion of the logical
versus physical markup battle.
Physical markup
refers to using a markup language such
as (X)HTML to make pages look a particular way;
logical markup
refers to using (X)HTML
to specify the structure or meaning of content while using another technology, such as CSS,
to designate the look of the page. We begin a deeper exploration of CSS in Chapter 4.
Physical markup is obvious; if you want to highlight something that is important to the
reader, you might embolden it by enclosing it within a
<b>
tag:
<b>
This is important!
</b>
This simple approach fits with the WYSIWYG (
what you see is what you get
) world of programs
such as Microsoft Word.
Logical markup is a little less obvious; to indicate the importance of the phrase, it should
be enclosed in the logical
strong
element:
<strong>
This is important.
</strong>
Interestingly, the default rendering of this would be to embolden the text. Given the
difference, it seems the simpler, more obvious approach of using a
<b>
tag is the way to go.
However, actually the semantic meaning of
strong
provides a bit more flexibility and is
preferred. Remember, the
<strong>
tag is used to say that something is important content,
not to indicate how it looks. If a CSS rule were defined to say that important items should
be big, red, and italic
<style="text/css">
strong {font-size: xx-large; color: red; font-style: italic;}
</style>
confusion would not necessarily ensue, because we shouldn't have a predisposed view of
what
strong
means visually. However, if we presented a CSS rule to make
<b>
tags act
as such, it makes less sense because we assume that the meaning of the tag is simply to
embolden some text.
