Creating Effective Semantic Markup

by Mani Sheriar | November 13, 2009 | Script Junkie

[cross section]

WHAT ARE WEB STANDARDS?

One of my favorite descriptions of Web standards comes from Russ Weakley, of MaxDesign:

“The term web standards can mean different things to different people. For some, it is “table-free sites”, for others it is “using valid code”. However, web standards are much broader than that. A site built to web standards should adhere to standards (HTML, XHTML, XML, CSS, XSLT, DOM, MathML, SVG etc) and pursue best practices (valid code, accessible code, semantically correct code, user-friendly URLs etc).

In other words, a site built to web standards should ideally be lean, clean, CSS-based, accessible, usable and search engine friendly..”

To me, more than anything else, Web standards mean a total separation of style and content, as well as content that is accessible across all platforms, browsers, and devices and available to the widest possible spectrum of users and user agents.

WHY SHOULD YOU CARE?

As a person writing front-end or back-end code, you have several reasons to care about the quality of the (X)HTML you create. Among them, writing high-quality code can do the following:

• Make it easier (and thus faster and cheaper) for yourself or others in the future to update, add on to, or redesign the site or application you’re working on
• Reap the well-touted benefits of faster downloads, higher SEO rankings, better accessibility, and future-proofing
• Gain the respect of your colleagues and clients (which, you know, can help you make a living)

And, my personal favorite if you are a back-end person:

• Make front-end colleagues love you and love working with you (which, again, can translate into more work and thus more money, because folks like me are going to be much more stoked about working with you again).

HOW DO YOU DO IT?

I like to try to write my code as if I might get hit by a bus tomorrow. I enjoy the idea that anyone with a modicum of coding knowledge could come in, get up to speed, and take over where I left off in a minimal amount of time (and with minimal frustration). I accomplish this in a few ways …

Envision the Unstyled Document

When I am writing my (X)HTML and I come across any question in my mind about the best way to code something (whether to use a blockquote or a div, a definition list or a table, a heading or bolded text), I ask myself one surprisingly simple question, which almost always yields the proper response: “How would I code this if I were doing so for a text-only browser?” Of course, on some level you need to consider your design, but as a designer, I say to you consider it very little when you are writing your markup. Consider it in terms of the containers and the minimal hooks for CSS that you might need to accomplish your layout, but otherwise, when it comes to figuring out the semantics of your actual tags, don’t consider it at all.

Read the rest of this article at the source.