Chapter 4
Constructing Content
Now that you’ve got a handle on the basics and have established a framework for your documents, the
real fun can begin: it’s time to start adding content to your web pages. In this chapter, you’ll learn about
most of the HTML elements you’ll need to give your content an organized, meaningful structure. We’ve
divided the elements into general categories based on the purpose they serve, from dividing a document
into logical sections to highlighting individual words. Along the way, you’ll see examples of how web
browsers render the different elements with their default styling. Then we’ll show you just a few ways you
can use CSS to enhance the presentation of your text.
Content and Structure
The content of your web page consists of everything your visitors will see, read, and use. However,
content is more than simply words and images; it’s also the message, the thing your words and images are
actually about. Your content is the information that you’re trying to communicate to your audience, and the
Web is a conduit for moving that information from one place (you) to another (them).
In Figure 4-1, the “before” image shows a sample of text as it would appear in a web browser without any
HTML structure. It’s nothing but a large mass of words, all mashed together and hard to read (even if
you’re fluent in pseudo-Latin filler text). There’s nothing to differentiate a headline from a list, nothing that
clearly separates different blocks of text that represent different ideas. You can break that blob of words
down into discernable, readable portions by adding a few bits of structural markup. The “after” image is
much more readable (the words are still nonsense, but we’re making a point here).
