Use HTML Semantically

After years of hacks using tables for positioning elements with tables, you may be surprised to find that HTML has become increasingly expressive. You can now use HTML tags to indicate the role of elements on the page and CSS has become powerful enough to position elements without tables. For those of you that deal with backward compatibility issues and continue to use positioning hacks, I feel your pain!  Within the next few years, it is imperative that you move towards using HTML in a semantic way. The HTML police won't be coming for you anytime soon, but semantic HTML is a means for communicating to fellow developers and software that reads websites including screen readers and search engines.  The goto tag has become div. There are reasons for this. The excessive usage in examples for libraries like Bootstrap has certainly influenced the ecosystem. There is also some sensible default styling with the element.

Going forth, make the following promises to yourself:

  • Use h1-h6 for headers.
  • Use ul/ol + li for lists.
  • Use header for headers, footer for footers, main for the core
  • Use nav for navigational elements

If you start using these elements appropriately, you'll be well ahead of your peers. If you are concerned about using new elements due to older IE versions, there are a number of shims available.

You may also like