Click To Subscribe
Get By EmailSome Web Design Basics 1: XHTML
In 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:
- If you want to edit your blog’s theme or want to create your own.
- There is a “code view” available when writing posts in WordPress.
- A blog that doesn’t validate may have trouble being recognized by spiders that index your site for search engines.
Categories: Blogs, General, Web Design :: Tags: Web Design, XHTML ::
Trackback URL
Front Page
Previous Post: Blog Paranoia And Constipation
Next Post: Flash Tip 1: Preloader Doesn’t Work? It Might Be Your Sounds
Related Posts: Trying A Different Front Page Design :: Apple’s Education iMac :: New Beverage: Dry Soda :: Diving In With Joomla ::
"Thanks - i'll mention the one day twitter boycott too. But a big reason why I'm okay with leaving Twitter temporarily is because I have FriendFeed - my cojones are not that big." -
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, <b> and <i> aren’t deprecated in XHTML (yet…) but their use is discouraged as they are purely presentational. The use of <em> for emphasis and <strong> 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
isn’t for images. Make sure the image is after the 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.
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.