There’s a lot of list based content around at the moment that has blatantly been posted as link bait on popular sites like Digg and Reddit, and whilst I usually have a quick read it’s very rare that I link out to such lists. However, Chris Coyier wrote an article last week that I agreed with 100% and felt that it deserved some recognition here for any of my readers that missed it on Smashing Magazine.
You can read the full article and explanations over at Smashing Magazine but to summarise, here are the main points Chris touches upon.
Strict Doctype
Unless you’re working on an old site that is a bit of a mess with inline styles and tables for layout then always use a strict doctype. If you’re starting from scratch then there’s really no reason not to.
Character set & encoding characters
If you’re going to use characters within your code then use the escaped version. It’s amazing how many people don’t do it but it’s really not hard to use &
Proper indentation
Indent your code properly, it’s much easier for debugging and spotting that missing closing tag if your opening and closing tags are indented equally.
Keep your CSS and JavaScript external
Pretty self explanatory. Keeps file size down, is cached by the browser and the main advantage is of course managing the layout from one place rather than having to make presentational changes in multiple HTML files.
Nest your tags properly
Inline elements cannot contain block level elements so <span><p>Content</p></span> would be invalid. Use <p><span>Content</span></p> instead and simply use CSS to control the presentation.
Eliminate unnecessary divs
The example Chris gives in his article is the most common mistake for web designers. You don’t need to surround every element with a div to be able to style it. Simply apply an ID to the UL, Heading, Paragraph (or any other element) and style it directly.
Use better naming conventions
Use naming conventions that describe what the class or ID does rather than how it looks visually. Don’t use left, right, red and blue but instead use navigtion, submenu, warning and information.
Leave typography to the CSS
If you want something all in capitals then that’s presentational. Leave it to the CSS by using text-transform: uppercase;
Class/id the body
This is something that I always do and has helped me out no end but I also take it a step further than Chris’ suggestion especially when templates are going to be used across multiple pages.
For example, I’ll apply a class on the body that is generic to the type of page but then also apply an ID that is unique to that individual page. Therefore my body tag will look something like…
<body id="red-widgets" class="category-page">
This provides me with the flexibility to be able to apply styles to all the pages that use the category-page layout but then if I want to be more specific and style a header or image differently for the red-widgets page to the blue widgets page then it’s easy by referencing these from the ID containing them. (I’ll probably go into this in more detail in a future blog post).
Validate
I’ve seen endless cases where a designer has had a problem with their page but hasn’t ensured that they’re written valid code. If a page isn’t working then this should be your first point of call and will quickly point out any missing end tags and other problem areas.
Logical ordering
Probably not one of the most important points but it’s something that I follow anyway as it does make reading the code when you revisit it much easier to understand. More importantly though is don’t complicate thing just for the sake of it so think about what you’re about to code and what the end result will be before you start typing away.
Just do what you can
This is very true as it may not always be possible to follow these rules but if you understand why you should be following and what the outcome will be if you don’t then you’ll have a better grasp when things don’t go quite as well as expected. If you stick to these principles though, then you should make your code cleaner and streamline the process of HTML and CSS development.
I like your design. Drop me please an email.
Basic stuff, but important to know.
Congratulations.
Indenting code is something I’ve only just really started to do.
It makes finding errors in the code so much easier.
I haven’t been building websites that long and thankfully I am finding a lot of wise counsel in the pages of your site. I’m sure I will be a frequent visitor to your site as each and every nuance of web building crops up into my designs and I let out an almighty AAAAAAAAARGGGGGGGHHHHHHH!