Home » XHTML and what not

XHTML and CSS

XHTML and CSS is largely misunderstood subject. In India, the IT Training centers never teach the basics right. An attempt to find out the level of exposure to XHTML / HTML and CSS given in most of these centers turned out to be pretty bad.

As an initiative to inform HTML programmers (yes, they do write a programming language called HTML! Aagrrh) about what truely should be understood, we are furnishing the below details and steps to be taken care of when writing XHTML Code.

The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential. W3C is a forum for information, commerce, communication, and collective understanding. On this page, you'll find how to incorporate W3C Website guidelines in your website. We feel that we all should design our webpages in accordance with the Guidelines laid out by the governing body.

The following are some of the common errors which form a part of W3C XHTML Validations (see W3C Website Guidelines on W3C website). You all can take a look at the same, and try to adapt it to your websites as well. You can validate your website at the W3C HTML Validator

Complaince to W3C Standards is legaly complusary in some countries including in the UK, the USA or else some one might sue you! You can use various Validators to validate your HTML files, however I would advice that you follow the original W3C Validtor.

DOCTYPE: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

The above declaration is a compulsory. Though, the Delclaration may vary according to your settings, it is always advised to follow the latest Declarations. It comes above the <html>.

People in India are thought nothing about DOCTYPE. Some of the people are surprised to know that there is something known as DOCTYPE. Even in the Book published by some prominent state boards do not have any mention of DOCTYPE.

HTML Tag: <html>
Obviously, the above declaration is a compulsory.

Character Type

Its also important to have all the elements in lower case. You should code <html> instead of <HTML>

Elements

border="0"

Usage of border="0" is not allowed. instead use the style elements: style="border-width:0px;" etc.

topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" marginheight="0"

Instead use the alternative style elements: style="margin-left:0px; margin-right:0px;" etc.

Target="_blank" Target="_top" Target="_parent" Target="_self"

You will have to avoid using the target element. We can use JavaScript Window.Open property. Using JavaScript is a not entertained though because poping open windows can be very annoying.

" " (double quotes)

The double quotes are important for specifying values/ i.e. values have to be like [id="company"] [ alt="companyname-caption" ]

start tags for text and subtags

Text, or sub-tags (like input, select, img, a href etc.) should be in <div>*[text to be put inside <P>]<p> or <ul> <ol> <h1> etc.

Images

alt is necessary for images. border not applicable. read [border="0"] for more information

End tags

End tags for all start tags are compulsory. it is also important that you have to end the tag at proper location. use <br />, <img src="somefile" alt="something" style="border-width:0px; />"

<form name="frmsize" action="something" method="get">

A form tag has to contain the action="someaction.aspx"

<div id="name" name="name" class="name_id">

Avoid using name=" name " attribute

& in URIs / URLs

If you have to use & in any url (uri) please make special effort to make it &

<U>

You have to remove it and avoid using it. Use style="text-decoration:underline;". Alternatively, you can control the style using CSS.

<select class="text" id="selLanguage" onchange=jumpbox(); name="select_lang">

When you write the JavaScript element onchange=jumpbox(); , make sure you put "jumpbox();" in double quotes, avoid the name attribute

<select class="text" id="selLanguage">

The id should be declared compulsorily)

<input type="hidden" name="Language" />

/ necessary where ever an end tag in not specified.

Close of Head tag, scripts and styles

The close head tag has to be proper and the style tag to be included in head tag along with script tags.

Valign

Valign used in image tags, td/tr/table should be avoided. Instead use, "style:vertical-align:top;"

align

We have a strong habbit to use the ALIGN element. Avoid using ALIGH and start using the CSS property text-align:left; or right"style:vertical-align:top;"

Option Element

This element is used under the Select Tag. Well, here the only catch is <option></option> simply does not work for validation. If you want to have a blank one, then please put  

Flash Objects

Inserting Flash Objects can be tricky and would add to your woes when checking the document for your HTML document. It is better to use the following coding type which helps in attaining our goal of a completely Validated XHTML.

<object type="application/x-shockwave-flash data="c.swf?path=movie.swf" width="400" height="300">
<param name="movie" value="c.swf?path=movie.swf" />
<img src="noflash.gif" width="200" height="100" alt="" />
</object>

The solution for this comes from A List Apart article on the Embedding Flash While Supporting Standards

We would keep updating this section as and when we face problems with Validation. As of today, the above mentioned are the problems we have faced while working on websites. If you have an archive of the list of errors commonly faced apart from those listed above, you can ofcourse share with us. We will make sure that a special mention to your suggestions would be provided. You can drop that in from the contact form.

Featured Projects

JUNAIDMALIK.CA

We bid for Junaid's project on Serebra Connect and we won the bid. The website requirement was pretty clear. A end to end Realty solution. We used Open-Realty for this implementation and delivered the final product.