HTML and CSS Reference
In-Depth Information
(X)HTML VALIDATION
(X)HTML validation, the process of checking your markup for errors against the specifications the W3C has
created, is an invaluable tool for modern web developers. Oftentimes, when it seems something isn't working
properly, it's because you have an error in your code that a validator script (such as the one at
http://
validator.w3.org/
) can easily find and point out to you.
However, it's also important to note that validation and clean, semantic markup are not one and the same. It's
possible to write very poorly structured markup that will pass the validation test with flying colors. Likewise,
it's possible to write very good, semantic (X)HTML and still find that you have a validation error or two.
Remember: both validation and solid semantics are important goals, but neither one necessarily leads
to the other. A proper (X)HTML document will be semantic in nature andvalidate. It's important to ensure you
are striving to meet both of these goals and not just one or the other.
How Does Writing Semantic Markup Help You in the Real World?
Good semantic (X)HTML markup helps to promote the accessibility of your site to visitors.
Not all visitors to your site will be able to “see” your CSS and JavaScript, but they'll all get your
(X)HTML. Therefore, it's essential that your markup provide the semantic context necessary
for comprehension of your content.
Screen readers (for visitors who are visually impaired) “read” your page based on the
markup. For example, if you use the semantic
<acronym>
tag, a screen reader may “spell out”
your word rather than trying to pronounce it. You'll learn how to create semantically rich
markup in the next section.
Personal digital assistants (PDAs), cell phones, and other devices may not render your
page in the same way a desktop web browser does (usually because these devices have reduced
support for CSS). Using semantic markup ensures that these devices render your page in a way
that makes sense. Ideally, it is the job of the viewing device to render the content as appropriate
to the context of that device. Starting with semantic markup gives the device the information
it needs to make contextual decisions, and saves you from having to think about all the possi-
ble contexts where your content will be consumed (now or in the future). For example, a cell
phone may choose to render text marked up with a header tag in bold. A PDA may display the
same text in a larger font. Either way, by marking up your text as a header, you've made sure
the reading device will act accordingly, based on what it feels is appropriate for the context in
which the page is being viewed.
Search engine crawlers also rely on your markup to determine context and weight of vari-
ous keywords. You may not have considered search engine crawlers and bots as “visitors” to
your site in the past, but they are actually extremely valuable users. Without them, search
engines wouldn't be able to index your sites, and human users would be less likely to find them.
It's in your best interest to make your pages as easy to understand as possible for crawlers, which
largely ignore presentational markup and pay attention only to semantic markup. Therefore, if
the name of your web document is marked up in a
<font size="7">
tag instead of an
<h1>
, your
site's position in search engine results could suffer.
Besides promoting accessibility, semantic markup facilitates the proper use of CSS and
JavaScript by providing many “hooks” on which to apply styles and behaviors.
