Installation
Simply drag the "SemView" button into your bookmarks bar.
Usage
Click on the "SemView" button in your bookmarks bar to view the semantic HTML of the current page.
SemView will outline the various important semantic elements of a page for you to check and see if it makes sense logically.
Sections
<main/>
Used once per-page. Describes the "main" (aka, not the header and footer) content.
Should not include the header, footer, primary navigation, etc. Can contain other elements like sections and asides.
<header/>
Typically used once per page to describe the document header. If contained within other sematic elements (like the section tag) it can be used to describe the header of that element.
<footer/>
Typically used once per page to describe the document footer. If contained within other sematic elements (like the section tag) it can be used to describe the footer of that element.
<section/>
Used to describe a non-descript group of content. Content logically grouped together should be within the same section tag.
<aside/>
Used to describe side data not critical to the main page content. Typically used for things like sidebars and CTAs.
<article/>
Used to describe the article content of the page (E.g. for a blog post). Can be used to describe multiple instance of articles (E.g. in a blog listing page).
<nav/>
Used to describe navigation menus. Typically nested within things like the header and footer of the page.
<figure/>
Used to describe an image.