Writing Elegant HTML

The other day I was thinking to myself, "Self, I wonder if there are any books on writing elegant HTML and CSS."  I'm sure there are I thought, and spent some time looking on Amazon for a book.  I was hoping for something that would essentially teach me the correct way to do things since I am pretty much self taught in the area of web development and would like to know what I am doing right and what I am doing wrong.  Unfortunately I didn't find a book that was suitable for what I was looking for.  However I did find a site that I found just as good, if not better. The website, Webplatform.org, has a lot of nice tutorials on it, with explanations why to do it that way.

So far I have only gone through the HTML and part of the CSS tutorials, but I have already found plenty of flaws in the HTML I used to write and definitely plan on changing the way I write it to become more semantic of the page I am writing.  By writing html that is more semantic it makes everything clearer to other developers what the element does, and it also helps out those with disabilities that need to use things like screen readers.


Here are some of the major changes that I plan on incorporating in my HTML going forward.  I hope everyone does as well,

1. Using HTML 5 page layout elements like header, footer, nav, article, section, and aside instead of divs with classes.
   
   I had always stayed away from using these because I figured that older browsers don't support them and that I can do the same with div tags with the appropriate classes.  While this is all true, using the appropriate element tags makes the HTML more semantic, and for older browsers they will just be rendered as inline tags, which I wasn't aware of. Thus if I just include a tag that formats them as block display they will render as they should for browsers with HTML 5 support.  Also, going back to my earlier point, it makes things like screen readers have an easier time decipher whats going on.
   


2. It is OK and even appropriate to use tags like em, strong, b, and i.
   
   Previously I would have  have attempted to use span elements with classes to represent these instead of using these tags.  I was under the impression that these tags should not be used, and I was not entirely wrong.  The idea is to use these tags when you want to display a semantic difference instead of just a presentational one.  For example if I use the <em> tag I am saying in my HTML that I am emphasizing that particular block of text.  I am not defining it should be bolded, italicized, or anything else.  Some inline tags like <font> should still not be used.  Some other syntax elements with meaning can be found at the following article Lesser known syntax elements.
   


3. Always keep in mind screen readers and those with disabilities.
   
   By using semantically appropriate HTML you can help screen readers and other programs to assist those with disabilities.  In addition there are some other things that you can do like add attributes on images like longdesc to give the user more information on the image if they are visually impaired.
   


4. Other various elements I've never heard of or seen of before.
   
   There were a few elements that I've never heard of before like <dl>.  More information on the description list tag.
   

I am in the middle of' the CSS section and there are already some good tricks there.  I highly suggest taking a look at the site, even if you have been doing web development for a few years like myself.