Foundation HTML5 with CSS3

(Steven Felgate) #1
Chapter 1

Alongside HTML5 and its regular content-structuring markup duties, a number of related scripting APIs
(Application Programming Interfaces) are being developed and standardized to help web apps work with
HTML5 content. For example, with HTML5-empowered web apps, you’ll be able to store application data
offline, edit web documents directly in the browser, use a web app to work with files stored on your
computer, send messages between web documents, share your location, and more. But don’t get too
excited just yet; we won’t be covering these scripting APIs in any detail in this book. They’re related to
HTML5, and are often grouped under the HTML5 umbrella, but they are not necessarily HTML5. As far as
we’re concerned right now—and for the rest of this book—HTML5 is still just a language to mark up
documents for the Web.

Separating Content from Presentation


HTML is intended to bestow a meaningful structure upon unstructured text, showing that different blocks of
words are in fact different types of content. A headline is not the same as a paragraph; those two types of
content should be marked up with different tags, making their innate difference absolutely clear to another
computer. But human beings don’t want to read encoded tags. We’re used to reading text that looks a
certain way—we expect headlines to appear in a large, boldfaced font to let us know that it’s a headline
and not something else. Early browser developers knew this, and they programmed their software to
display different types of content in different styles.

From its humble roots, the Web quickly blossomed and soon was no longer the exclusive domain of
academics and computer scientists. Graphic designers discovered this exciting new medium and sought
ways to make it more aesthetically appealing than ordinary, unadorned text. However, HTML lacked a
proper means of influencing the display of content; it was strictly intended to provide structure, with only a
few conceits to graphic design. Designers were forced to repurpose existing features of HTML, taking
advantage of the way browsers displayed content in an effort to create something more visually
compelling. Unfortunately, this resulted in many websites of the day being built with presentational markup
that was messy, overcomplicated, hard to maintain, and had nothing to do with what the content meant but
only how it should look.

In 1996, when the Web was still in its infancy, the W3C introduced Cascading Style Sheets (CSS). It was
an entirely different language, one specifically created to describe how HTML documents should be
visually presented while leaving the structural markup clean and meaningful. A style sheet written in CSS
can be applied to an HTML document, adding an attractive layer of design without negatively impacting the
markup that serves as its foundation. The code that gives the content its structure is kept separate from
the code describing its presentation.

Separating content from presentation allows both aspects to become stronger and more adaptable. An
HTML document can be changed without completely reconstructing it to correct the design. An entire
website can be redesigned by changing a single style sheet without rewriting one line of structural markup.
Free download pdf