My New XHTML/CSS Coding Practices
While at UCSD, I was introduced to the world of HTML version 4.0. Back in that time, around the year 2000, I began my coding for web content with something that looked similar to:
HTML 4.0 example:
<center>
<table width="400px">
<tr>
<td>
<p><font face="arial" size="2" color="white">Here is some white text in Arial font at a 12 pixel size.</font></p>
</td>
</tr>
</table>
</center>
Granted at the time I was being educated through the Art Department (specifically ICAM Department), which tended teach a less-technical and more ‘what ever means necessary’ method of programming. So HTML basics were all I knew.
Little did I know that at that time the W3C had issued the new and ever more elegant XHTML. It wasn’t until the end of my undergraduate education that I had discovered how archaic HTML 4.0 had become.
After a little research and much trial and error I began to learn how to use XHTML and CSS in a semi-proper fashion (Note: The following code has the same/similar look):
CSS
div#content {
margin: 0 auto;
}
div.whitetext {
color: #FFFFFF;
font-size: 12px;
}
XHTML
<div id="content">
<div class="whitetext">
<p>Here is some white text in Arial font at a 12 pixel size.</p>
</div>
</div>
Over the last few years I have learned a few ‘good’ practices when coding in XHTML and CSS. First and foremost, limit the use of ‘div’ tags. In the beginning I used ‘div’ tags way too much. Even worse I gave every single div tag an id and/or class attribute. In the end there is no problem with doing it this way, however, it is overkill. The overall site design will benefit from simplifying the base XHTML. It will also make CSS coding more efficient and easier to read.
The best coding practice I can advise is to code all XHTML without CSS adjustments first. In this case, the code will stand up in any ‘Worse Case Senario’. More over if you plan on having ‘mobile accessibility’ (the worst case) the site can be easily converted. Once the XHTML is complete for layout(s), add CSS to make the site visually stimulating.
The best time to use ‘class’ attribute is for the areas of the site that have a number of repeat ‘elements’ on a given page. For example, images that need right alignment is a great time to use the class attribute. The align attribute for images does not have proper margins. By supply an image with a class, the proper adjustments can be made.
I can go into more detail on the subject in the future, however for now I will end on this note: By all means avoid the ‘table’, ‘tr’, ‘td’ tags whenever possible. And please, don’t ever use ‘font’ tags.
About this post:
- Published: 16.10.2007 / 6:41 pm
- Category: Web Design, XHTML, CSS
Comment by Jesse
18.10.2007 / 3:29 pm #
Yello cousin. I thought I’d make an internet pit-stop and BAM you have a whole new layout. I like it. Makes me feel good.
Interesting stuff about the coding. I’ve been making Dreamweaver do all the work for me but I peek behind the scenes a lot to see the code. Definitely interested to know more, so keep writing. So what do you use for tables if not the table, tr, and td tags?
Anyway, hope all is well.