Feature
Post

Category
Code


Xhtml in 15 minutes? No Way!

There are plenty of new designers who are still living in a cave on the latest in the web coding craze, known as valid code, which is the use of Xhtml & CSS. These new designers spend countless hours “in the dark” so to speak, and use prehistoric techniques such as tables to put together designs for themselves and clients who are also out of place in today’s web usability standards.

Xhtml Base - Learn the basics in 15 minutes..Well, one more for you for reading this.

So how can any of these people, lost in regards to what xhtml is besides html with an x in front, ever be expected to catch up to the rest of us? Of course, they could go out and buy some books, and spend time reading instead of learning themselves. They could always steal source code, and eventually, after being hounded by the design community for doing so, maybe they’d pick something up. Or, they could learn for themselves – in fifteen minutes.

In fifteen minutes? You must be sitting there gasping for breath and splashing water on your face. Did I really say it was possible to learn xhtml in fifteen minutes? Because it is.

Course Introduction

Xhtml should never be looked at as intimidating. Once you learn it, you’ll find its leaps and bounds easier than using tables, particularly with more advanced layouts. The days of using tables for anything more than tabular data are over. Let’s start by going over the basics, including some vocabulary you need to know before we getting going. Get out a pencil and paper if you have to.

Sites for the most part are broken down into three main sections: the header, content, and the footer. The three main sections appear on about 90% of all sites, they can just be displayed in many different ways.

The header is usually the first thing to find its way into the body of a html document (between the < body > and < /body > tags). Headers usually hold such things as the logo, banner, site / page title, and navigation.

Next is the content. Call this what you want, this is where the bulk of the site is contained. A content area is generally flexible, because it tends to hold the entire contents of the page inside it. We’ll get into this a little bit more below.

Finally, there is the footer. Footers can hold “designed by” information, contact information, ads, and possibly anything else. The design setup for all this could be graphically represented like below:

Basic Layout Structure

You first have to understand where all this is located code-wise. Create a new html document in Dreamweaver or similar and you’ll start out with something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
</body>
</html>

Now, that header, content, and footer mumbo-jumbo we just went over? Imagine these as tables. Just like how tables hold data in columns and rows, these three sections will be our base for building a site. Each section with hold smaller sections inside it, to in turn complete the entire site.

Get your cursor to between the < body > tags, and get your typing fingers ready. We’re going to type our first fully valid site, without using design view to we’re finished.

Initial Data

With your favorite html or text editor open and you’re cursor blinking between the body tags, we’re going to begin typing a few simple lines of code. Just three in fact. Follow along by copying what you see below.

<div id="header"></div>
  <div id="content"></div>
  <div id="footer"></div>

In just three lines of code, we have just built the skeleton of a valid site. Three lines! How easy is that? Let’s take a look at our messy table code that would have completed the same thing: (3 rows and 1 column.)

<table width="500" border="0" cellpadding="5">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

Seems to me like xhtml works a lot better. If you’ve snuck a peek at a design view of what we’ve done so far, you’ll notice a whole lot of whitespace. In fact, that’s the only thing you’ll see! This is because our three sections have no content inside them, so all you see is blank white space. That is all about to change.


  1. By Steve posted on October 11, 2006 at 8:27 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    “CSS elements with number signs (#) in front of them are known as divs, while css elements with periods (.) in front of them are known as classes.”

    More specifically, a CSS element with a (#) in front of it is called an ‘ID’ which in the XHTML document would be identified as the ‘ID’ of a DIV.

    The difference between an ‘ID’ and a ‘Class’ is that the ‘ID’ is unique to each page of XHTML, whereas a class can be used many times in one page. For example, your div called ‘header’ is the only one on the page, so that’s an ID. If I styled all my ‘p’ tags, that would be a class by calling it as ‘p class=”redfont”‘.

  2. By Olly Hodgson posted on October 12, 2006 at 4:46 am
    Want an avatar? Get a gravatar! • You can link to this comment

    You might be interested to note that both the Firefox and Safari teams recommend that you stick with HTML 4.01 Strict for now. In order to support IE, you’ll need to serve it up with a MIME type of text/html, which means the browsers effectively treat it as HTML 4. Almost everything works the same as in XHTML too.

    Now, an ID can only be used once on a page, but you can use it on any element you like, not just a div. You can use a class as many times as you like, but in most cases you don’t need to.

    Class names like “left” and “right” aren’t ideal either: Change the stylesheet and you might end up with the two columns switched around. You’d be better off calling them something descriptive like “mainContent” and “news”.

    The aim is to write clean, semantically rich HTML, with as few divs and classes as possible.

  3. By aj posted on October 12, 2006 at 4:52 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Yes, exactly.

    Sorry for leaving “divs can only be used once” in there, I missed it when I gave it a quick re-read yesterday, it was meant to be “ID’s can only be used once”. (Fix now made)

  4. By Qwest posted on October 12, 2006 at 4:56 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the guide on xhtml. I used to design websites about 5/6 years ago, and always used tables to layout my sites. Then CSS started getting used for layouts more & more. I never learnt CSS, and to this day, i’ve been kicking myself because i know it’s easier & cleaner than tables.

    This guide has certainly helped & explained a few things. I shall use it in my current project.

    On a side note though, i followed your guide, saved it as a .xhtml file (not sure if that’s right?) and it kicked up an error saying “missing ” tag! Is that right or do you need to add it to your tutorial?

  5. By Qwest posted on October 12, 2006 at 4:57 am
    Want an avatar? Get a gravatar! • You can link to this comment

    that should be a tag!

  6. By Qwest posted on October 12, 2006 at 4:58 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Grr… a closing P tag then! lol

  7. By Phu posted on October 12, 2006 at 4:59 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Steve is correct; the article is erroneously confusing two different concepts. ID’s and Classes are attributes of elements (and can be associated with any elements and not just divs) while divs are a (generic container) element.

    Muddling these concepts only serves to confuse readers as well as produce non-optimal solutions such as using div#header in this context instead of perhaps using h1#header.

  8. By aj posted on October 12, 2006 at 2:52 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    @Quest, you still save the file in a .html extension, it will still output valid xhtml. As long as there are no open tags, you should be receiving no errors.

    @Phu, Olly, and Steve – I’ve added an alert to the second page pointing out that div’s may be used for any element. Hope that clears things up some.

  9. By Gustavs posted on October 13, 2006 at 12:14 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    This is a brilliant article for people that want to finnaly understand what xhtml actually is. Great job!

  10. By aj posted on October 13, 2006 at 2:14 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the comments Gustavs

  11. By bliss posted on October 14, 2006 at 8:52 am
    Want an avatar? Get a gravatar! • You can link to this comment

    :) at first i thought, i have some tool/program for 15minute xhtml conversion!

    anyways, nice article. keep it up.

  12. By Varun posted on October 20, 2006 at 9:47 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Just wanted to say great tutorial/article. It really helped! Tables always confused me and other sites didn’t explain how to use xhtml as well as this article. So … thanks :)

  13. By dekada posted on April 17, 2007 at 4:07 am
    Want an avatar? Get a gravatar! • You can link to this comment

    The very good article. Many persons at last will understands about what in this lead. You unlocked them eyes. The good job !!

  14. By Bilgehan posted on May 22, 2007 at 4:06 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I think the article is misleading. The code comparison of table layout code and tableless layout has nothing to do with xhtml.

  15. By sion posted on June 10, 2007 at 11:01 am
    Want an avatar? Get a gravatar! • You can link to this comment

    I started out with html strict and moved to xhtml strict doctypes.I guess I just like the idea of using the most strict guidelines…keeps me in line and for some crazy reason my designs look the same in most browsers…I kid when I say crazy.I think using xhtml strict and css returns cross browser comapatibilty you can pretty much count on for everything except maybe Safari.And even then it’s pretty darn close.

  16. TrackbackXHTML/CSS - You do the design, we do the code.