Image 01 Image 02

How to create websites based on XHTML standards

Posted on 21st May 2006 by Keith Dsouza
0
 
Technorati tags: , ,
 
Update:  I recieved some criticism about the topic, note I am no expert in XHTML but I am an expert in HTML and XML, I was the sole guy to have created the basic skeleton from the design for Yahoo India Shopping when it launched two years ago single handedly using XML and XSL along with HTML which = XHTML standard, YIS no longer uses the same thing now and I left the company some time back so no idea,  so I still believe that this tutorial will help you on your path to getting into the groove for doing better xhtml pages, My site isnt XHTML compilant yet as it is controlled by a software and I am halfway there to getting control over it yet.
 
Some of my friends who are designers send me HTML ( Hyper Text Markup Language ) templates to program websites based on those and i quite often have to send them back to correct them to adhere to XHTML ( eXtensible Hyper Text Markup Language ) standards, So i thought to write a few tips on what you can do to make pages XHTML compilant.

If you have visited sites and seen that this site is XHTML compilant and follows the standards laid down by w3.org you may see that the pages load faster and better, I just wanted to write something about what basic XHTML standards are and how you can create pages or websites using some simple rules.
 
I won't exactly go into a indepth tutorial, but if any one needs information on why XHTML pages load faster, I will be writing up something on that soon.
 
For starters XHTML is nothing but a mashup of XML and Html, so put together its like having a strict Html which follows XML standards. XML is also known as eXtensible Markup Languages and have strict standards as to how data is shown or created.
Here are some of the things you will require to follow in order to make your site or html coding more XHTML compatiable, these are standards used by XML which has been drafted to make Html the standard XHtml.
 

1. Close all tags

In normal html you may be very familiar with the <html> tags, well every start html tag has to be ended by </html> as you may know.

But if you want to adhere to XHTML standards you should close each and every tag, we in developers term called them open tags.

For eg. normal html will have a line break tag as <br> but in XHTML thiis will be <br />, notice the forward slash in the original <br> tag that's called a open tag with no end, but we forcefully close it using <br />, Similary all tags which have no end have to be closed with a forward slash.

Other examples of such tags are <img>, <input>

 
Wrong Code 
<br>, <input name="abcd" type="text">, <img xsrc="abcd.gif" border="0">
 
Right Code 
<br />, <input name="abcd" type="text" />, <img xsrc="abcd.gif" border="0" />
 

 

 
2. XHTML Standards mean that your tags close exactly how they start

What I mean is that, most people start tags and in between put tags that end outside the parent tag.

Wrong Code
<form>
  <table>
    <tr>
     <td>My text</td>
    </tr>
  </form>
</table>

Note the error in the top is tags did not start how it ended, XHTML standards say that all tags should close as they started, You can relate to a term called Last In First Out (LIFO) here.

What I mean is that the last tag that's started should be the first one that should be closed.

 
Right Code
  <form> 
  <table>
    <tr>
      <td>My text</td>
     </tr>
  </table>
</form>

3. Start and Close all attributes with double quotes (")

XHTML standards follow the strict DOM (Document Object Rules) and have entities like elements and attributes.

An element is a tag like <img> and a attribute is a child tag of an element like <img xsrc="abcd.gif" />.

Each element that has an attribute should be started and closed with double quotes (").

Wrong code
<img xsrc=abcd.gif border=0>

Right code
<img xsrc="abcd.gif" border="0">

If you see this in browser it will work but if your view this as a regular text you will see that xsrc=abcd.gif border=0, with no differentiation between the src and border so it will look that the image source is abcd.gif border=0 to the reader so you need to start and the attributes with "

 
4. Use alt tags for all images

The image tags on your html page should specify a alt tag, which means alternate thing when the image is not avialable, this is necessary as you may have noticed a sign with a X in it when images cannot be renedered or shown, Using alt text will show a short description about what the image is all about.

Mind you this also very helpful for search engine crawlers as they are incapable of viewing images and these alt tags help them to know more about it.

Wrong Code
<img xsrc="xhtmltutorials.png" />

 
Bad images examples

Right code
<img xsrc="xhtmltutorials.png" alt="a tutorial about xhtml" />

 
Nice image with alt
 
So which of the two images do you think is informative, note i did not specify a height or width for the image that's why you see two sizes, well that is important too, to keep you page size consistent and not fluctuating be cause of images.
 
 
Well that's all I can muster right now, I will come up with a part 2 of this soon, watch out for a tutorial on how to create web pages using css and xhtml soon, and another one regarding how to create pages using AJAX sometime today.

Your comments are always welcome, let me know how you like this article, also if you have any other pointers please post them in the comments, Any further assitance required can also be asked.

Related posts:



Leave a reply...