Some Web Design Basics 1: XHTML

September 15th, 2007

Web DesignIn the interest of sharing information, this is the first in a series of “brain dump” posts regarding web design - specifically for folks who are starting a blog.

Much of what I’ve learned post-college has been from Jeffrey Zeldman, or the other site A List Apart. The basic idea behind their vision of “web standards” is to code with XHTML and CSS. A lot of really sloppy code was forgiven by the browsers of old, leading to pages that looked fine but were a pain to update (images cut into slices and laid out in tables comes to mind). Web politics aside, web standards are a good goal to strive for as they allow for the separation of content and design. The order also makes your code easier to read, understand, and parseable.

This might sound intimidating but I’ll break it into steps. I’ll start off with XHTML and how to code it. XHTML stands for EXtensible Markup Language and is a combination of XML and HTML. It’s pretty easy. Check out this article at A List Apart for the basics.

The basic rules are:

  • XHTML elements must be properly nested
  • XHTML elements must always be closed
  • XHTML elements must be in lowercase
  • XHTML elements must have one root element

And what this really means:

  • All tags are lowercase - write <div> rather than <DIV>.
  • All tags must be closed. If you have a <p>text you must have a corresponding </p> on the other end.
  • Tags that don’t have a corresponding closing tag are closed within the tag: <br />, <img />, <hr />.
  • Tags must be nested correctly: <p><em>text</em></p> rather than <p><em>text</p></em>.
  • The root element bit means each page has a basic structure of: <html><head></head><body></body></html>

Some additional rules:

  • All tag attributes must have quotes: <img width=”100″ height=”100″ />
  • I’m not sure if this is required, but <b> and <i> are ideally replaced with <strong> and <em>.
  • Now to make it clear that your document is XHTML the proper DOCTYPE is declared in the header. In general, I’ve been told to use XHTML 1.0 Transitional.

Once you have an XHTML document, it’s a great idea to run it through a validator over at W3C. Just enter the URL of your XHTML document and all the mistakes will be reported. That’s pretty much it. Really.

So how does all this apply to blogging? Well, WordPress right out of the box generates pages in XHTML. But here are some reasons why any blogger should know about XHTML:

RSS Feed Please subscribe to the Webomatica RSS Feed!

folder Categories: Blogs, General, Web Design :: ::
Back Previous Post: Blog Paranoia And Constipation
Back Next Post: Flash Tip 1: Preloader Doesn’t Work? It Might Be Your Sounds

  • Tia Martyn
    Hi,
    I have started blogging lately and i cud not insert image to the header tag , any take on that one?

    Regards
  • You're right, and aren't deprecated in XHTML (yet...) but their use is discouraged as they are purely presentational. The use of for emphasis and for strong emphasis is much better and you can style each element as you like.

    Also, I would recommend using strict doctypes over transitional ones.
  • Hmm... sorry to comment again... I left a link in the last comment about strict and transitional doctypes, here it is again as it seems to have disappeared!

    http://24ways.org/2005/transitional-vs-strict-markup
  • Tia the information between <head> </head> isn't for images. Make sure the image is after the <body> tag.

    Phil perhaps I should go for "strict". Right now I need to get the pesky MyBlogLog widget to validate and then I can proceed.</body>
  • I got my site to validate last night. Actually, after hunting down all the things that were causing me errors, and seeing how many errors some of the other sites I use around the web have, I was pretty proud of myself. So much so I even put the w3c button in my left sidebar. Geeky, I know, but having valid code doesn't hurt.
  • mlankton - yep it's a good goal to get to. The worst feeling is thinking your site is okay and then realizing it's not loading on someone's computer, due to some tiny html mistake like a missing tag or something.
blog comments powered by Disqus