XHTML Page Structure

I mentioned earlier that I’m keen on doing a series on topics related to the structure of a blog - namely the HTML and CSS that form the building blocks that this series is named after.

Note: Technosailor readers keen on other reading, rest assured I will not be exclusively blogging this topic - and of course my guest bloggers have been amazing writing without me asking, so who knows…)

It seems that in order to have bricks, there needs to be clay. So this first entry is not about the bricks so much as it is the basic foundation elements required to have a blog in the first place. Let’s start with a basic valid HTML page. It is important that it is valid and I’ll explain what that means later.

You can see the sample HTML page I’ll be using here. It’s ugly but that’s not the point. I want you to see the structure that was used to put this very simplistic page together. It is basicaly a DTD (or, Document Type Definition), some basic header information about the page, and two divs or “divisions” on th page that appear to the user - header and content.

This is the most simplistic of a page and most likely something that will never, by itself, be used in the real world but it serves as a jumping off point. Let’s break down the structure:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

This is the DTD, or Document Type Definition. It is the thing that tells the browser what rules to apply in rendering the page. The level of code we use is based on XHTML, a form of HTML that adheres to standards of well-formed code.

In other words, any HTML tag that we open, we close. Every HTML tag or tag attribute we use is lower-cased. Every HTML attribute is quoted. As we go on in this series, you’ll find out other interesting bits, such as what the difference is between literal HTML and semantic HTML and what it means to your readers.

Note the \ at the end of a line means it’s a long line and I’m continuing it on the next line. Do not include it if you are following along on your own.


<html>
     <head>
          <title>Technosailor Sample Page</title>
          <meta http-equiv="Content-Type" content="text/html; \
            charset=ISO-8859-1" />

After you declare your DTD, you can begin writing the HTML. Every page should have a <title> tag which displays in the title bar of the browser. Search Engine Optimizers will recommend that the title should include keywords about your page in the title. This should not be spammy, but merely a short description. Technosailor, for instance, could use <title>Technosailor.com - a technology and politics blog by Aaron Brazell</title>. This section also tells the browser that the page should be rendered as an HTML page that uses the ASCII charachter set (ISO-8859-1) and not as an image or text file, for instance.


          <style type="text/css">
               body { font-family:verdana, arial, sans-serif; }
               #header { background-color:#990000; color:#ffffff; }
               #content {background-color: #000099;}
          </style>
     </head>

In order to apply colors, formatting and presentation to a blog, or a website, stylesheets are used. While these styles could be applied to individual elements in a page, keeping them separate provides a means to globally make changes later on without having to sift through tons of pages. Often times, styles are moved to a separate file altogether, but we’ll talk about this at another time. For now, don’t worry about the specifics of these styles. Just realize that this is where we change the way a page looks.


     <body>
          <div id="header">
               <h1>Title of Page</h1>
          </div>
          <div id="content">
	<p>Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing
elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo
dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
          </div>
     </body>
</html>

Finally, no page structure is complete without the stuff that displays to a user. In this example, we have two <div>s - header and content. Notice how we haven’t done anything expect put content in these layers. That is because presentation of content is left to the stylesheet above and mere structure is written here. We’ll get more into how this plays out later.

Click for the full full source code for this lesson.

Stumble it!

About the Author: Aaron Brazell is the lead editor of Technosailor.com and a social media expert. His passion is to see companies and individuals use the internet and web technologies wisely and effectively to promote their brands and companies. He is Business Development Manager for Lijit and he worked as Director of Technology at b5media from 2005-2008 and is currently an independent consultant.