Aug
18
Avoid These Common XHTML Errors
|
Friday, August 18th, 2006
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: <br>
- Right: <br />
- Not closing non-empty elements
- Wrong: <p>This is a paragraph.<p> This is another paragraph.
- Right: <p>This is a paragraph.</p> <p>This is a second paragraph.</p>
- Improperly nesting elements
- Wrong: <em><strong>This is random text.</em></strong>
- Right: <em><strong>This is random text.</strong></em>
- Nesting block-level elements within inline elements
- Wrong: <em> <h2>About Us</h2></em>
- Right: <h2><em>About Us</em></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><P>My Web Site</P></BODY>
- Correct: <body><p>My Web Site</p></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.
Download Design
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!
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