It’s easy to make a site with lots of code — a program can blindly spit it out for you: unoptimized, a nightmare to edit, useless for accessibility. It takes skill to craft a beautiful site with the bare minimum of markup, but that site will be fast and search engine friendly, easy to edit and add on to, and easily made accessible and portable.
It’s easy to code superfluously. Your aim is to code succinctly. To that end, here are some quick tips on how to cut unnecessary tags from your HTML:
Avoid presentational markup like the plague
Presentational markup is non-semantic, i.e., it is not needed to make the content make sense in its unstyled state; it is purely for visual effect. Before adding another container element or an empty element, ask yourself if there is a way to not need it. Most of the following points contain solutions for avoiding presentational markup, but using CSS3 cuts out the need for a lot of it: use CSS for rounded corners, multiple backgrounds, gradients and border images.
Style the <html> tag
Developers sometimes forget to take advantage of this as an extra element to style. If you find yourself having to add another container within the body just to add or extend a background, see if moving the styles from body to html and from the extra container to body will work. For example, I’ve applied a background to the html element to match the site’s footer style (when it’s different from the main content background) so short pages will look like the footer fills the empty space at the bottom instead of ending up as a bar hanging mid-air.
Style pseudo elements
Pseudo elements are “elements that don’t exist explicitly in the document tree.” There are a few, but :before and :after are usually the ones leveraged to pull off clever styling tricks without additional markup. Find some tips here and here.
Don’t use an empty element to clear floats
Use a clearfix applied as a class, or use elements that always follow to clear by putting the ‘clear’ property on them. Understanding floats will help you know where to use which technique.
Use HTML5
…If you aren’t already. It saves a few bytes with its short-and-sweet doctype, and doesn’t require the type attribute on style, link and script tags. Be careful throwing around the new, semantic elements though. Not each individual image needs to be in a <figure> for example. You may be tempted to use the new elements for styling since they’re semantic so that means they’re ok, right? Not exactly. Consult the HTML5 Doctor to see when adding an HTML5 element makes sense.
Be conscious
Each time you go to add a new element to achieve some desired effect, think about different ways of doing it. If you find yourself stuck with adding presentational markup, do some quick searches to see if someone else has come up with a cleaner solution to your style issue. Make each element earn its way onto the page and soon you’ll be writing the leanest HTML you can.
