Semantic HTML

A short rant…

I really love accessible, semantically correct markup. It is a beautiful language. But then you have the camp of web designers who code using the Ebonics of the web markup languages - those who are unappreciative of semantically correct (X)HTML.

Popularity: 28% [?]

Many designers have different conceptual ways in which they begin their web sites. When I create a site, I structure it as follows:

1. Create (X)HTML markup (separating top/content/navigation/footer areas with divs)
2. Create content for page
3. Use PHP for inclusion of common navigation areas (breadcrumb, sidebar, etc)
4. Use PHP for inclusion of header
5. Use PHP for inclusion of footer

Once it validates - then (and only then) do I create the external CSS file for it. Let me say that besides SEO’ing the markup (source order, meta, keyword densities, etc.), accessibility is integrated every step of the way.

Once the site passes the standard WAI (Web Accessibility Initiative) checklists (A, AA, AAA) - I begin my usability testing. So this my simple test of usability. You can get very detailed in your testing, but for the sake of the
title of this post, let me ask you to run this test on your sites. And also, do you run any type of usability test for your designs?

Here’s what I do, and let me know what you do:

1. Load my page, and squint my eyes (Yes, I’m serious). Can I still read the content, and differentiate between background/foreground colors?
2. Next I move my mouse out of reach (like behind my desk). Now, just using my keyboard, can I navigate my entire site?

Of course, this is an extremely simple test…but what do you all do for your usability testing?

Popularity: 21% [?]

I’m quoting from a presentation page on Semantic HTML that an author has on his site:

• Removed or deprecated some elements
  • ISINDEX
  • APPLET
  • CENTER
  • FONT
  • BASEFONT
  • STRIKE
  • S
  • U
  • DIR
  • MENU

You see, semantically correct html is more than just mere correct structure, but what you use is also just as important. Old school, depreciated HTML tags are not semantical. For example, the CENTER tag. That stands for “CENTER the object”, right? Well, that in itself is presentational in nature - and therefore should be left to CSS (Cascading Style Sheets) to do.

That’s where semantics take place…

Popularity: 20% [?]