From my work experience and from reviewing other developer’s HTML mark-ups, I’ve seen many good as well as bad code. Most of the code I reviewed was written by Java developers, because of which the code may not confirm to the standards/best practices in HTML coding. Since the Java developers are very good at server side programming, but do not have much awareness about HTML good practices. In this post (and the forthcoming posts), I tried to summarize some of the simple to follow good practices, that if followed can really improve the quality of your HTML code. I’ll be happy if you can share your comments/tips/best practices via comments.
Stop Using Tables for Page Layout:
This is the mistake I’ve seen many developers make (even the designers who are starting with web designing). They simply create a BIG table with three rows to contain the header, content and the footer. And then, according to the page layout, either they will have inner tables, or they will use the combination of colspan and rowspan. If you are auto generating the HTML code from a WYSIWYG editor, then it is most likey that your HTML code is bloated with table based design and unnecessary HTML tags. But this style of design is so old and not recommended.
Tables should be used only for presenting tabular data. After all, that’s why the tables are for. For page layout, instead of tables, HTML DIV tags and CSS can and should be used. What ever we can do using table based design can be achieved using DIV+CSS combo and in a cleaner and better way.
If you look at the modern web sites, most of them has the almost similar structure – header, content, side bar and a footer. This structure can be easily constructed using a simle HTML and CSS combination.
Above code is just the barebone structure of a website. As you can see, we’ve defined the page sections such as header and content using HTML DIV tag. Now, lets apply the formatting for these tags using CSS styles.
The positioning and the height properties for our page are now defined thru the CSS. This approach gives us the following advantages.
- The content is separated from the presentation.
- The code is cleaner and more semantic.
- It confirms to the web standards.
- Maintaining this code is easy.
- Site will render perfectly even in mobile browsers which may have limited support for tables.
I hope now you know the good things of table-less design. In my next post, I’ll exploring some other good practices also.
– Image credit : http://www.flickr.com/photos/eelkedekker/
{ 1 trackback }
{ 0 comments… add one now }