Question

I generally use a manual process:

1. Look at the page, figure out the semantic elements, and build the HTML
2. Slice up the images I think I’ll need
3. Start writing CSS
4. Tweak and repeat different steps as necessary

Got a better approach, or a tool?

Answer 1

I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:

1. The page title is a top level heading

   • Whether you make the site title or actual page title the h1 is up to you – personally I’d make About Us the h1 rather than Stack Overflow.

2. The navigation is a table of contents, and thus an ordered list – you may as well use an ol over a ul.

3. Section headers are h2, sections within those sections are h3s etc. Stack them up.

4. Use blockquotes and quotes where possible. Don’t just surround it with ‘.

5. Don’t use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you’d put emphasis on the word.

6. <label> your form elements.

7. Use <acronym>s and <abbr>s where possible, but only in the first instance.

8. The easiest: always, always give your images some alternate text.

9. There’s lots of HTML tags you could use that you probably haven’t – address for postal addresses, screen code output. Have a look at HTML Dog for some, it’s my favourite reference.

That’s just a few pointers, I’m sure I could think of more.

Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren’t allowed to touch the HTML. It’s actually harder than you think (but I’ve found it’s made me quicker).