Update (November 12th 2011): Read a reply by Jeremy Keith1 to this article in which he strongly argues about the importance of pursuing semantic value and addresses issues discussed in the article as well as in the comments here on Smashing Magazine.
Disclaimer: This article is published in the Opinion column section in which we provide active members of the community with the opportunity to share their thoughts and ideas publicly. Do you agree with the author? Please leave a comment. And if you disagree, would you like to write a rebuttal or counter piece? Leave a comment, too, and we will get back to you! Thank you.
Meta-utopia is a world of reliable meta data. When poisoning the well confers benefits to the poisoners, the meta-waters get awfully toxic in short order.
Further Reading on SmashingMag: Link
- Sexy New HTML5 Semantics3
- Semantic CSS With Intelligent Selectors4
- A Detailed Introduction To Custom Elements5
Allow me to paint a picture:
- You are busy creating a website.
- You have a thought, “Oh, now I have to add an element.”
- Then another thought, “I feel so guilty adding a
div. Div-itis is terrible, I hear.”
- Then, “I should use something else. The
asideelement might be appropriate.”
- Three searches and five articles later, you’re fairly confident that
asideis not semantically correct.
- You decide on
article, because at least it’s not a
- You’ve wasted 40 minutes, with no tangible benefit to show for it.
This Just Straight Up Sucks Link
Mark-up structures content, but your choice of tags matters a lot less than we’ve been taught for a while. Let’s go through some of the reasons why.
The Web No Longer Consists Of Structured Content Link
In the golden days of the Web, Web pages were supposed to be repositories of information and meaning, nothing more. Today, the Web has content, but meaning is derived from users’ interactions with it.
XML, RDFA, Dublin Core and other structured specifications have very solid use cases, but those use cases do not account for the majority of interactions9 on the Web. Heck, no website really has the purity of semantic mark-up that such specifications demand. Mark Pilgrim writes about this10 much better than I do.
If you have content that demands semantic purity — such as a library database, a document that needs a table of contents, or an online book (i.e. anything for which semantic purity makes sense) — then by all means stick to the HTML5 outlining algorithm, and split hairs on which element should be an
article and which a
section. No customer-facing tool exists that takes advantage of this algorithm by producing a table of contents. No browser seems to exploit such tools either.
Is It Really Accessible? Link
If accessibility is your reason for using semantic mark-up, then understand that accessibility and semantic mark-up have very little correlation, due to the massive abuse of HTML mark-up on the Web. (I would love to link to Mark Pilgrim’s post on this, but it is dead, so this will have to do11.)
As stated on HTML5 Accessibility13, almost every new HTML5 element currently provides to assistive technology only as much semantic information as a div element. So, if you thought that using HTML5 elements would make your website more accessible, think again. (How much additional information do
<figcaption> bring? None14.)
Is It Really Searchable? Link
If SEO is your grand purpose for using semantic mark-up, then know that most search engines do not give more credence to a page just because of its mark-up. The only thing recommended in this SEO guide from Google16 is to use relevant headings and anchor links (other search engines work similarly). Your use of HTML5 elements or of
span tags will not affect how your content is read by them.
There is another way to provide rich data to search engines, and that is via micro-data17. In no way does this make your website rank better on search engines; it simply adds value to the search result18 when a relevant one is found for your website.
Is It Really Portable? Link
Another much-touted advantage of the semantic Web is data portability. Miraculously, all devices are supposed to understand the semantic mark-up used everywhere and be able to parse the information therein with no effort. Aryeh Gregor puts that myth to sleep19:
… +Manu Sporny said that semantic Web people had received feedback that out-of-band data was harder to keep in sync with content. I can attest that in MediaWiki’s case this isn’t true, though… The only times I can see where you’d want to use RDFa or microdata instead of separate RDF is if either you don’t have good enough page-generation tools, or you want the metadata to be consumed by specific known clients that only support inline metadata (e.g. search engines supporting schema.org or such). If the page is being processed by a script anyway, and if the script author has ready access to server-side tools that can extract the metadata into a separate RDF stream, then it’s normally going to be just as easy to publish as a separate stream as to publish inline. And it saves a lot of bloat on every page view.
What Now, Then? Link
- There is no harm using
divelements; you can continue using them instead of
article. I think we should use the new elements to make your mark-up readable, not for any inherent semantic advantage. If you want to use HTML5
articletags to enhance some particular textual documentation for a future document reader, do it.
- Tools exist today that take advantage of the
footerelements. NVDA now assigns implied semantics20 with these elements. The elements are straightforward to understand and use.
- There is good support21 for ARIA landmarks in screen readers, but be careful22 when using them with HTML5 elements.
What do you think? Link
This article is published in the Opinion column section in which we provide active members of the community with the opportunity to share their thoughts and ideas publicly. Do you agree with the author? Please leave a comment. And if you disagree, would you like to write a rebuttal or counter piece? Leave a comment, too, and we will get back to you! Thank you.
- 1 https://www.smashingmagazine.com/2011/11/12/pursuing-semantic-value/
- 2 http://www.well.com/~doctorow/metacrap.htm
- 3 https://www.smashingmagazine.com/2011/11/html5-semantics/
- 4 https://www.smashingmagazine.com/2013/08/semantic-css-with-intelligent-selectors/
- 5 https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/
- 6 http://www.andybudd.com/archives/2004/05/semantic_coding/
- 7 http://www.impressivewebs.com/aside-vs-blockquote-html5/
- 8 http://twitter.theinfo.org/29661575610630145
- 9 http://www.alexa.com/topsites
- 10 http://web.archive.org/web/20060428021228/http://diveintomark.org/archives/2002/12/30/the_tag_soup_of_a_new_generation
- 11 http://krijnhoetmer.nl/irc-logs/whatwg/20090604#l-877
- 12 http://www.w3.org/TR/2011/WD-html-aapi-20110414/
- 13 http://www.html5accessibility.com/
- 14 http://www.paciellogroup.com/blog/2011/08/html5-accessibility-chops-the-figure-and-figcaption-elements/
- 15 http://html5doctor.com/time-and-data-element/
- 16 http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=35291
- 17 http://schema.org/
- 18 http://www.google.com/support/webmasters/bin/answer.py?answer=1211158
- 19 https://plus.google.com/105458233028934590147/posts/Q2Wnvy1ysBD
- 20 http://www.accessibleculture.org/research/html5-aria-2011/
- 21 http://www.html5accessibility.com/tests/landmarks.html
- 22 http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/
- 23 http://platform.html5.org
- 24 http://www.highercomputingforeveryone.com/