HTML and CSS Reference
In-Depth Information
In addition, separating the two layers makes it possible to do an entire site redesign
without touching the content at all—you only need to create a new CSS style sheet. By using
external style sheets, separate from your HTML structure, you can make all modifications to
the visual presentation of the site by editing just
one
file rather than the numerous files (possi-
bly numbering in the hundreds!) that make up your content.
As we move along, you'll find that the complete separation of content and presentation
doesn't always pan out in the real world, but it's still an important goal. Trying to attain it—
even if you don't make it 100 percent of the way—will pay off for you in efficiency and simplicity.
If you shoot for the moon and don't make it, you'll still end up in the stars.
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. Accord-
ing 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, paragraphs, 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 text is red. This section is a column
that is to the right of everything else, and this line is in italics.” That presentational informa-
tion 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 presenta-
tional information and chock-full of meaningful tags that define the structure of the document.
