Analyze HTML Elements & Microformats w/ Semantic Checker

SMS Text

Semantic Checker is a new and still experimental Firefox addon (download it here) highlighting semantic elements in the web page you are currently viewing.

The tool should be used for on-page analysis as well for educational purposes (to see which sites are introducing new HTML elements and microformats, for example).

Here are the elements the tool supports:

Semantic HTML4 elements

  • Shortened words: <abbr> and <acronym> (by the way, if you are wondering about the difference, find it here);
  • Headings: h1-h6;
  • Quoting: blockquote, cite (more info can be found here)
  • Lists: dl, dir, menu (more information here, the latter two are deprecated)
  • Emphasis tags: <em>,<strong>
  • More elements: code, dfn, address, legend, samp

Semantic HTML5 elements

For all those interested, here’s a cool list of HTML5 tags. The tool supports the following ones:

  • Sections: article, aside, header, footer, nav;
  • Content, media, data etc tags : figure, mark, meter, audio, video, progress, time, command, datagrid, details, datalist, keygen, bb, outpu, ruby
  • Input-attributes: datetime, datetime-local, date, month, week, time, number, range, email, url, search, color


  • hCard, hCalendar
  • rel-license, rel-nofollow, rel-tag
  • Vote Links

Now let’s try to use the tool at a number of popular web pages.

Twitter Profile:

Semantic checker Twitter

Facebook Group Page

Semantic Checker: Facebook group

Stumbleupon Favorites Page:

Semantic checker: stumbleupon

My verdict:

I liked the tool for the following of reasons:

  • It’s a great way to track new HTML elements and microformats being implemented;
  • The tool can also be used for on-page diagnostics (to analyze headers, nofollow attribute, etc);
  • The addon is quite invisible: it won’t bug you until you click it.

Note: huge thanks to Webnauts for sharing the tool with me.

The tool was reviewed under SEJ policy.

Ann Smarty

Ann Smarty

Brand amd Community Manager at Internet Marketing Ninjas
Ann Smarty is the blogger and community manager at Internet Marketing Ninjas. Ann's expertise in blogging and tools serve as a base for her writing,... Read Full Bio
Ann Smarty
Get the latest news from Search Engine Journal!
We value your privacy! See our policy here.
  • Steve Potosky

    Would it be possible to add a print this button to your articles to save having to cut and paste into another doc in order to print w/o the ads, (tee hee, use Chrome often to read emails) – I find it handy to keep a file to reference all the tasks my firefox extensions can achieve. Just suggesting ….

  • All it should require to make these pages printer friendly would be a to add a stylesheet call with the attribute media=”print” with the class .NoPrint{display:none} This class could then be referenced by any object that shouldn’t be printed (e.g. ads and menus). Additional rules can be added to change the formatting of other objects to make them print more gracefully.

    Using this method along a good semantic structured referenced in the article above, one can create a printer friendly website without having to spit out separate “printer friendly” pages that can cause duplicate content penalties.

  • Firefox addons is now haveing Semantic Checker… Awesome!! So, i am definitely going to try it… 😀

  • Thank you for your positive review of my Extension, Ann.

    @All: If you like the tool, please leave a short review on Mozilla Addon Download Page. It helps getting the public status for Semantic Checker.