Note that I (try) to mark up as semantically as possible because I like they way it looks and feels, but not because I'm aware of any other stunning advantages. The point of my question is to be able to educate othersWell, I've seen a lot of articles and tutorials which often state Let's mark this up in the most semantic possible way.But a strange thought came to me, why?Why would one need (or want) to bother with the specific elements which convey the correct semantic meaning? Specifically, I'm referring to the new HTML5 elements, such as <time>, <output>, or <address>. Especially, if the page works (it renders nicely in all browsers).Why would I want to use elements like <time> or <address>, where nothing at all (or at the worst case, a generic <span>) works just as nicely?I'm asking this because I'm seeing a multitude of (very popular) websites (this one included) which does not follow these so-called best practices.
Why would one bother marking up properly and semantically?
html;html5;semantics;markup
Free FunctionalityProperly using <label>s means you can click the label to enter the text field. Many browsers will add logical default functionality to many tags per the official specification, meaning you can use fewer JavaScript plugins and write less code than a site made entirely out of <div>s and <span>s. AccessibilityRelated to free functionality, semantics mean a lot to screen reader software. Text in front of an input field won't be read in quite the same way as a <label> will. Screen readers will ignore most of your CSS, so it's mostly up to the structure of your HTML.Logical CSSWhy use a div #header when you can use a <header> and style that directly? Semantic tags make it easier to mark things up and make your style much more portable; if you have a certain style for strikeout and always use <del> elements the style is much more portable. <del> means the same thing to everyone, but everyone will name their .deletedText class differently. It also helps keep everyone on the same page in large projects; no one enjoys learning other people's esoteric class naming conventions.SEOSearch engines like Google have made increased use of semantic HTML and metadata. Google's Rich Snippets also use special metadata meant to convey semantic content.Why it's not all that commonIt takes work, and people are used to judging a website by how it looks and works. Often there's no accounting for semanticness because people who write the business case for apps don't understand it or why it's important. It's very hard for non technical people to understand or evaluate HTML semantics.If a website looks good and it appears to work, why fret? Many people may not even know there is anything more to it. Similar to accessibility, this tends to get ignored until someone on your team really understands this.If you want semantic HTML to be a priority on your project, you need to present the case for it. Showing your team/boss how your website works in a screen reader is also a helpful tool.