Tami Weiss

Hello,

I am a web designer and sometimes developer in the Milwaukee area. I created beautiful, standards compliant webpages that are not only usable, but deliciously delightful. Check out my portfolio.

• The Case For Semantic HTML

  May 5th, 2009

  First, to understand why we should use semantic HTML, we need to understand it. It its most simplest form, semantic HTML is using HTML the way it was designed to be used. Sounds simple enough? I think so; yet the majority of pages out there are not written semantically. If they’ve even progressed to tableless (and so many haven’t) then they’re div heavy and have no meaning semantically. A div is just a page division, and should be used as such, not a generic holding container.

  Instead, we should be working towards marking up code based on the content. If something is a block of text that resembles a paragraph, then the p tag should be used. If it needs some extra positioning or style changes, then it should be applied to that tag, not an additional div or span thrown around it and the styling set on that.

  So now we understand what it is, we can talk about why its important.

  • Search engine “friendly”. Already one step towards search engine optimization.
  • Easier to validate. If you use a div as an actual page division, it is highly unlikely you’ll use it incorrectly in, say, a paragraph.
  • Easier for multiple people to work on. If everyone is coding the same way, and the code makes logical sense with the content, then anyone can easily pick up where someone else left off without spending hours trying to figure out what the other person was doing.
  • Future proofing. If we’re coding semantically, we’re more likely to have our code continue to work in future browsers because we’re using it as the standards defined. If we’re not using the correct HTML, we run the risk of our code not working as we originally intended if a browser becomes more strict.
  • Prepare for web 3.0, the semantic web. It is believed that the next phase of the web will be the semantic web, where all data is defined by what it contains. For example, we won’t see paragraphs, we’ll see paragraphs about old houses. Likely, xhtml will gravitate more like xml with descriptive tags. For example, a shopping cart might have a <product> tag and in that, a <price> tag. Starting to use current xhtml semantically prepares us for that transition.XHTML 2 is abandoned, sadly.
  • Page load time. According to Yahoo, extra DOM objects will slow down a page. So the more extraneous divs you have, and the more problems you’re going to have in the long run with page load times. For small sites with minimal visitors, this might not be such a bad thing, but larger sites with heavy traffic could see a big impact.

  It amazes me in today’s day and age there is still any question about the value of writing semantic markup. Yet read the comments over at Smashing Magazine and you can see how many people out there not only don’t get it, but argue vehemently about why the wrong way is better. Yet if you want to make flexible, long lasting sites, this is the only way to do it. Its all right there in the w3c specs.

  
  Posted In: Coding and Markup | No Comments »