Web Designing: Opting for XHTML 1.0 and CSS 2.0

Creating Web sites is no more a new thing for the current generation. Considering the fact that here in Mumbai | INDIA even a 9th standard student is taught HTML and making web-pages in school explains the fast transition the Internet and web in particular has made. Moving ahead and to the point, choosing the right version of HTML and CSS surely makes sense and speaks volumes while answering questions in future on compatibility, code maintenance, leveraging W3C and browser standards, performance tuning, etc.

Hence the topic – opting for XHTML 1.0 and CSS 2.0.

A nice practice

The best part about opting XHTML for your design over HTML 4.01:

• It is a stricter and cleaner version of HTML.
  
  

• Provides a rational methodology of writing CODE where XHTML bears the data and CSS bears the styling. Both of them should not be interchanged.

• All tags should be closed (including inline elements like <br>)

• Tags should be properly nested.

• The presentation part of the design/layout should be handled by CSS (internal/external/inline).

• The single part attributes in HTML 4.01 should also have values (example: selected=”selected” in <option>).

Now read the following point over the above carefully :

• XHTML 1.0 is W3C’s recommendation over HTML 4.01. XHTML 1.0 became a W3C Recommendation on January 26, 2000.

• All browsers currently (including IE6) support XHTML. Going ahead, it would be XHTML 1.0 and HTML 5 (implicitly follows XHTML) that will have it's presence on the web.

• Developing the design in XHTML makes it easy for others to understand the code and maintain it later. This in fact, is one of the top reasons why you should go for XHTML in place of the now obsolete HTML 4.01 and its variants.

• Quite a lot of elements, attributes have been deprecated. Check the list Here.

CSS 2.0 isn’t a shift in approach like XHTML was from HTML 4.01. It has some fine feature additions and enhancements over CSS 1.0. Here are some of them :

• CSS pseudo classes like :link, :visited, :hover, :active, :focus, :before, :after, :first-child, :first-letter, :first-line.

• The behavior attribute for Internet Explorer to customize events has become prominent.

• Border and Outline : Custom styling w.r.t. color, width, style for top, bottom, left, right border and outline.

• Text : Introduced the ‘ text-shadow ‘ property. This attribute ceases to work as expected in IE. This property is not recommended for use.

• Absolute positioning : The ‘ position ‘ selector can now take ‘ absolute ‘ property. You can use the top, bottom, left, right selectors to specify the coordinates and position an element on a page.
 

A good practice in using CSS is to use external style-sheets. This not only keeps the CODE compact but also helps making future modifications faster for the entire Website. Make sure you avoid internal style-sheets as much as possible.


Some interesting facts which you might not have noticed :

• Google recommends and advocates the use of XHTML 1.0 and CSS 2.0 but a closer look at the code of Gmail, Orkut and Blogger says a different story.

• One of the primary goals and concerns for a Web-site from a client’s perspective is to convert the existing code-base to XHTML 1.0 and CSS 2.0. This explains the reason why you should keep up to both the version for any new code.

• SEO (Search Engine Optimization) yields positive results if done on a code-base written in XHTML 1.0, CSS 2.0 and validated from W3C Markup Validation Service.

• Microsoft’s site is one of the fewest I found amongst the technology heavy-weights which correctly implements both the standards.

• No matter which programming language you use like PHP, C#.Net, Ruby, JSP, etc. on any platform say ASP.Net, J2EE, Ruby-on-Rails, etc. – what you eventually receive on the side of client is HTML, CSS and JavaScript (irrespective of versions).

Post a Comment