HTML and CSS Reference
In-Depth Information
HTML unfortunately mixes logical and physical markup thinking. Even worse, common
renderings are so familiar to developers that tags that are logical are assumed physical. What
does an
<h1>
tag do? Most Web developers would say it defines a big heading. However,
that is assuming a physical view; it is simply saying that the enclosed content is a level one
heading. How such a heading looks is completely arbitrary. While many of HTML's logical
elements are relatively underutilized, others, such as headings and paragraphs (
<p>
), are
used regularly though they are generally thought of as physical tags by most HTML users.
Consider that people generally consider
<h1>
a large heading,
<h2>
a smaller heading, and
predict that
<p>
tags cause returns and you can see that, logical or not, the language is physical
to most of its users. However, does that have to be the case? No, these are logical elements and
the renderings, while common, are not required and CSS easily can change them.
The benefits of logical elements might not be obvious to those comfortable with physical
markup. To understand the benefits, it's important to realize that on the Web, many browsers
render things differently. In addition, predicting what the viewing environment will be is
difficult. What browser does the user have? What is his or her monitor's screen resolution?
Does the user even have a screen? Considering the extreme of the user having no screen at
all, how would a speaking browser render a
<b>
tag? What about a
<strong>
tag? Text
tagged with
<strong>
might be read in a firm voice, but boldfaced text might not have an
easily translated meaning outside the visual realm.
Many realistic examples exist of the power of logical elements. Consider the
international aspects of the Web. In some countries, the date is written with the day first,
followed by the month and year. In the United States, the date generally is written with
the month first, and then the day and year. A
<date>
or a
<time>
tag, the latter of which
is actually now part of HTML5, could tag the information and enable the browser to
localize it for the appropriate viewing environment. In short, separation of the logical
structure from the physical presentation allows multiple physical displays to be applied
to the same content. This is a powerful idea which, unfortunately, even today is rarely
taken advantage of.
Whether you subscribe to the physical (specific) or logical (general) viewpoint,
traditional HTML is neither purely physical
nor
purely logical, at least not yet. In other
words, currently used HTML elements come in both flavors, physical and logical, though
users nearly always think of them as physical. This is likely not going to get settled soon;
the battle between logical and physical markup predates HTML by literally decades.
HTML5 will certainly surprise any readers who are already logical markup fans, because
it fully preserves traditional presentational tags like
<b>
and
<i>
, given their common
use, though jumps through some interesting mental hoops to claim meaning is changed.
Further, the new specification promotes media- and visual-focused markup like
<canvas>
and
<video>
and introduces tremendously powerful navigational and
sectioning logical-focused tags. If recent history is any guide, then HTML5 is likely going
to pick up many fans.
Standards vs. Practice
Just because a standard is defined doesn't necessarily mean that it will be embraced. Many
Web developers simply do not know or care about standards. As long as their page looks
right in their favorite browser, they are happy and will continue to go on abusing HTML
tags like
<table>
and using various tricks and proprietary elements. CSS has really done
