Explaining semantic mark-up

I think it’s important for a web developer to view HTML documents without any external formatting applied. That means without CSS, no JavaScript enhancement, and, if you want, no images as well; instead just the raw content. Look at it, read it through. Does it make any sense? Do you understand which parts are more important than others, which texts are headings, which parts are connected to each other?

If the answer is yes, the document is probably marked up in a nice understandable semantic fashion.

That’s all well and good, and addresses what. But Robert closes with, more importantly, is why:

The benefits of using good semantics in a document are:

• It will be more accessible to people seeing the document in an environment where CSS cannot be applied.
• It will be understandable and coherent to people having it read to them with the help of a screen reader.
• It will help to get a better search engine ranking, since search engines can easier distinguish the importance level of the document’s different parts and what message is being conveyed.
• It will be a lot easier for web developers to maintain the code, and to separate content (HTML) from presentation (CSS).
• In most cases, there will be less code, which isn’t cluttered by formatting, meaning that the web page will be faster to load.

Well, just because everybody else is blogging about it doesn’t mean I shouldn’t.

When I’m formatting content for a site I’m always Googling for the proper codes for encoding character entities. Copyright symbols. Trademark symbols. Curly quotation marks. Em and en dashes. Etc. This neat little online tool will be invaluable in the future. Just type in something similar to what you’re looking for and “Bob’s your uncle.”

I knew I would link to this post after reading through just a few items, but I couldn’t pick just one (or just five) to quote here. There are just too many gems to pick from so I’ll leave it at this: go read the whole thing, now!

Only use block-level elements in blockquotes:

Something I see quite a bit of around the Web is the blockquote element being slightly abused. […] That’s right, the blockquote element is not allowed to have text or inline elements as direct descendants.

That’s the great thing about this industry: there’s always more to learn, even when it comes to the basics. Putting raw text in a <blockquote> tag probably became a habit for me 10 years ago.

This article, Guidelines for creating better markup, isn’t telling me anything I don’t already know, but it’s always nice to review. People think HTML is easy, and for the most part it is, but that doesn’t mean it should be sloppy.

I’ve mentioned several times here that I feel writing markup (or any other code, for that matter) is a craft. I take pride in writing as lean and clean code as possible. From the looks of things there aren’t a whole lot of other Web professionals that feel that way, but we do exist.