XHTML and somethings about tags elements you should know

Sometimes, It is not good to see the following message when some of your visitors check your web page with W3 XHTML/HTML validator.

I used to do mistakes about XHTML and CSS when I start learning web programming. Normally, I wrote an application and run in browser and check whether it works or not without looking up my web pages are XHTML valid. And CSS too. But I do care when I start learning XHTML, CSS and blogging especially creating theme for wordpress. Now I want to share my knowledge about XHTML and it’s some tags that can change your my web not validated XHTML.

1. Elements without closing tags

Example:

<br>
<p>
<img>

This is the one I used to do when I start making apps. To avoid these, close your html element properly.

<br /> or <br> </br> (this is acceptable in XHTML)
<p> </p>
<img />

2. Image without “alt” attribute

It is really important to describe the image, which you used in your web page, what it is about. Your visitors will not know when the browser disabled from rendering image or your image is not properly loaded if you don’t set alt attribute. To avoid these, put alt attribute in every image elements

<img src=”logo.jpg” alt=”Your Logo Name” />

Tips: don’t forget to put heading style infront of image elements if you’re decorating your heading with image

<h3><img src=”logo.jpg” alt=”Your Logo Name” /></h3>

3. Use UPPERCASE in tags

XHTML documents must use lower case for all HTML element and attribute names.

<SCRIPT>
<STYLE>
<a href=”http://www.google.com” Title=”Google”>Google</a>

to avoid these: use lower case

<script>
<style>
<a href=”http://www.google.com” title=”Google”>Google</a>

4. Use “&” instead of “&” in url

In XHTML, the script and style elements are declared as having #PCDATA content. As a result, < and & will be reated as the start of markup, and entities such as < and “&” will be recognized as entity references by the XML processor to < and “&” respectively. Wrapping the content of the script or style element within a CDATA marked section avoids the expansion of these entities.

http://www.somedomain.com/someurl.php?para2=1&para2=2

For example : Ah! this is wrong, STUMBLEUPON !!!

<a href=”http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&title=<?php the_title(); ?>”><img src=”icon_su.gif”> Stumble it!</a>

to avoid: use &amps;

<a href=”http://www.stumbleupon.com/submit?url=<?php the_permalink(); ?>&amps;title=<?php the_title(); ?>”><img src=”icon_su.gif”> Stumble it!</a>

See more about XHTML and Quality Tips