Dont Trust This Guy why not take my word for it? A blog by Jim Jeffers

HTML is often overlooked in development projects. Rendering errors and other visual debacles tend to shift a developer’s focus away from HTML’s actual purpose: semantics. It’s been said before but I feel we still need to emphasize the fact that HTML has nothing to do with the visual presentation of the layout we are attempting to create whether it be for the web or any other medium.

Don’t Think Like a Designer

Table based layouts are the greatest hack of all time. When CSS was young and poorly implemented complex layouts could only be achieved by putting all of our HTML into table elements, and layers of nested table elements to follow. But this totally contradicted the point of HTML. The goal of HTML is to provide a clear, well described document. If you have a list of sections that you’re reader might be interested in browsing to then those links should be described as just that, a list. A transcribed dialogue communicated by different people should use a definition list tag. Most importantly, if we have a form with fields we need labels. What better element to use than a label tag?

All of this sounds remarkably straightforward but if you’re not thinking like a definer and instead are thinking like a designer then you’ve gotten you’re approach to HTML all wrong. Dead wrong. Worry about the design later. Right now the focus is entirely on the content. How is this content best segmented? How is it best described?

Preview Your Work as Basic HTML

When writing HTML don’t get tempted to start writing any of the CSS yet. Especially any inline-styles. There are few times you should say never, but use of inline-styles is something you should never do. As you write your HTML preview it in your browser as only HTML. No CSS. Just HTML. This will help you visualize how your document is viewed naturally by machines and is a true testament to the portability of your document. Without CSS you’re document should be well laid out and presented as if it were an outline or a basic one column word doc. Line lengths, columns, other layout crap - worry about all of that presentation later. Just keep your focus on making that plain text document as clear and legible as possible. Here are some tips for previewing pages:

• If you have an existing site use firefox and get firebug or the web developer toolbar to disable your stylesheets.
• Run the W3C validator on your page and be sure to check the ‘Show Outline’ option to ensure the hierarchy of your content makes sense.

Names Things What They Are - Not What They Look Like

Let me introduce you to your new hypothetical friend Joe. We call him Joe because that’s Joe. His name isn’t Brown-haired-middle-aged-guy. What if Joe died his hair green? Would his name still make sense? People don’t often legally change their names, but they do change their appearance quite often. So does your HTML, yet a lot of us still use that poor approach to naming items in our HTML markup. Make sure you name your content for what it is - not where it goes, or how it looks. If you have a sidebar don’t name that div with an ID of ’sidebar’! That data might be presented visually as a sidebar but that’s not what the div actually is. What’s inside of that div? A list of related messages? Maybe that div shouldn’t be a div at all. Maybe it should be an unsorted or ordered list with an id of ‘related-messages’.

Break the Connection - Make the Separation in Your Mind

The key thing to walk away with here is to break your thinking that HTML is the markup that makes your site design. That is all done entirely external from the HTML in your CSS code. When you’re assigning class names, ID’s, or choosing what HTML element to use to describe something just remember. This should be about what it means, not what it looks like.