Avoid These Common XHTML Errors

Aug

Avoid These Common XHTML Errors

Written by Karen | Friday, August 18th, 2006
Featured, HTML, Standards, Valid (X)HTML, Web Design

Many visitors to my site have downloaded my XHTML templates and then email me to show me how they are using my work.

Some are less-experienced coders or do not really know how XHTML differs from HTML.

Here are the most common errors I’ve come across:

Not closing empty elements

Wrong:
Right:

Not closing non-empty elements

Wrong: This is a paragraph. This is another paragraph.
Right: This is a paragraph. This is a second paragraph.

Improperly nesting elements

Wrong: This is random text.
Right: This is random text.

Nesting block-level elements within inline elements

Wrong:  <h2>About Us</h2>
Right: <h2>About Us</h2>

No alternate text for images (using the alt attribute, which helps make pages accessible for devices that do not load images or screen-readers for the blind)

Wrong: <img xsrc="images/logo.jpg" />
Right: <img xsrc="/images/logo.jpg"
alt="Company Logo" />

Not putting quotation marks around attribute values

Wrong: <td colspan=2>
Right: <td colspan="2">

Using the ampersand outside of entities (use & to display the ampersand character)

Wrong: <title>Love & Marriage</title>
Right: <title>Love & Marriage</title>

Using uppercase tag names and/or tag attributes

Wrong: <BODY>My Web Site</BODY>
Correct: <body>My Web Site</body>

By making sure you don’t make the above mistakes, you are well on your way to having an XHTML website that will validate.

Comments to “Avoid These Common XHTML Errors”

Dan Says:
August 21st, 2006 at 1:45 am

Hi arwen54,

Thats all very true. Probably worth a note for newcomers to XHTML - most of these problems are caused by WYSIWYG editors.

*The most evil editor - Frontpage

*OK editor - Dreamweaver - only “ok” because I noticed some bugs such as incorrect spelling in the PHP autocompletion ($_SERVER['HTTP_REFERER'] is $_SERVER['HTTP_REFERRER']) and it also automatically captialises onclick to become onClick - which is invalid XHTML. Dont Use the design view either or you may damage your eyes - design view is worthless for XHTML / CSS pages and also the code produced will be pretty rough and have a bad layout.

*Best editors

Notepad, VI, and other regular text editors. I also just tried the HTML editor that comes with Mozilla browser and it seems ok - it can display XHTML / CSS sites properly in design view!

arwen54 Says:
August 21st, 2006 at 9:40 pm

Yes, I agree WYSIWYG editors can really mess things up so that is why hand coding is probably the best way to learn any programming language, I think…once you know how to hand code then no matter what editor you use you can edit any errors to the code output…but why would you want to? Use a good editor that simplifies your work.

I like HTML Kit because it’s quite robust and has numerouse tools and plugins that you can use to get the job done quickly

Attackr.com