Semantic (X)HTML: Markup with Meaning
Before we can start working with CSS, we need to be sure we are able to adequately structure
our (X)HTML documents in a modern fashion. Contrary to what you may have learned in the
earlier years of web development, (X)HTML should not define the look and presentation of
a web page (that's the job of CSS). Instead, the purpose of (X)HTML is to provide context and
meaning to the content of the document - this is referred to as semantic markup.
What is Semantic Markup?
CSS relies completely on the (X)HTML that references it. If you want to use CSS to its fullest
potential, it's imperative that you provide it with clean, structured content marked up with
(X)HTML. Before you can do that, you need to understand (X)HTML's purpose in life. According
to the World Wide Web Consortium (W3C), an organization that develops specifications for
many of the interoperable technologies used on the Web, "HTML is the lingua franca for
publishing hypertext on the World Wide Web ... HTML uses tags such as <h1> and </h1> to
structure text into headings, lists, hypertext links etc." (www.w3.org/MarkUp/).
In simpler terms, (X)HTML is a way of adding structure and meaning (or "semantics") to textual
content. It's a way of saying, "This line is a header, and these lines make up a paragraph.
This text is a list of items, and this text is a link to another document on the Web." Note
that it is not the job of HTML to say, "This text is blue, and this is red. This section is a
column that is to the right of everything else, and this line is in italics." That presentational
information is CSS's job. when developing for the modern Web - especially if you come from the
old school - always remember this: (X)HTML tells us what a piece of content is (or what it
means), and not what it looks like.
When we refer to "semantic markup," we are talking about (X)HTML that is free of presentational
information and chock-full of meaningful tags that define the structure of the document.
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.
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 web 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 possible
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 various
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.
by providing many "hooks" on which to apply styles and behaviors.