Tools

Analyze HTML Elements & Microformats w/ Semantic Checker

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

Microformats

  • 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 Analyze HTML Elements & Microformats w/ Semantic Checker

Facebook Group Page

semantic checker facebook Analyze HTML Elements & Microformats w/ Semantic Checker

Stumbleupon Favorites Page:

semantic checker stumbleupon Analyze HTML Elements & Microformats w/ Semantic Checker

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.

f8d69258525dec38624a29eb3d570d8c 64 Analyze HTML Elements & Microformats w/ Semantic Checker
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, tutorials and her guest blogging project, MyBlogGuest.com.
f8d69258525dec38624a29eb3d570d8c 64 Analyze HTML Elements & Microformats w/ Semantic Checker

You Might Also Like

Comments are closed.

4 thoughts on “Analyze HTML Elements & Microformats w/ Semantic Checker

  1. 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 ….

  2. 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.

  3. 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.