Smashing magazine defines the reasoning and importance of HTML5 semantic markup as follows:
Excerpted from this page https://coding.smashingmagazine.com/2011/11/18/html5-semantics/ "Along the way, we’ll see that HTML5 semantics are carefully designed to extend the current capabilities of HTML, while always enabling users of older browsers to access the content. We’ll also see that semantic markup is not “nice to have,” but is rather a cornerstone of Web development, because it is what enhances accessibility, searchability, internationalization and interoperability.
"
My recommendation gleaned from much initial research (which turned out to be a dead end) but then after reading this book The Truth about HTML5 Micro-Semantics and Schema.org by Luke Stevens, I I was a changed man.
My recommendation is to do Aria roles and Schema.org and Google's rich snippets but don't worry about the HTML5 spec because it is not very good.
Sorry then that the majority of this page is about what I eventually rejected, the stupid HTML5 semantic markup specs which are impossible to implement correctly.
Excerpt of a reply post by Luke Stevens on a Smashing magazine article that gave me the truth that I needed.
After reading this then buying and reading Lukes book The Truth about HTML5 I was convinced Luke was correct and I changed my mind and I changed my method and I am grateful for Luke Steven's research and perspective.
Luke Stevens said in his reply
"HTML5 semantics, in terms of structural elements, are dead on arrival. No search engine here and now asked for, or needs them as currently spec’d (they’ve defined what the actually want with Schema.org), no non-HTML-book-writing HTML authors understand them correctly (ask a HTML5-aware designer what their backwards compatible document outline looks like), and no one *will* be able to use them meaningfully as per the spec because the spec has become, as Hickson often says he wants to avoid, a word of fiction in terms of real world use of these elements."
Luke has a great style and he delves into who created the spec and why and just how did HTML5 end up in the hands of one person? the aforementioned Mr.Ian Hickson aka Hicksy. See wiki on Ian Hickson, Hicksie's personal website and Google+ page.
Under this dross is the bits about what I actually use namely Aria roles, Schema.org and Google's rich snippets but I need to expand the relevant bits, sorry about that.
In 2011 The W3C released it's long awaited specification for HTML5.
I have listed the sectioning elements on this page.
Note <header> <footer> <h1>-<h6> and <address> are sectioning elements but are not sectioning content elements which are required to make a document outline.
If you think that is confusing read this paragraph on sectioning roots by HTML5Doctor.
<blockquote> <figure> <details> <fieldset> and <td> are sectioning roots and produce separate document outlines.
When fully implemented this may spell the death knell of successfull SEO for table based layouts.
All y are listed below and the links below take you to parts of this page with part of the W3C explanation followed by a code example.
<body> <article> <section> <nav > <aside> <h1> to<h6><header> <footer> and <address>
More complex code examples are below.
and when to use either article or section.
<header> (link to W3C page with further information)
Below is part of the W3C explanation of how the element <header> can be used followed by a W3C HTML5 code example.
The header element represents introductory content for its nearest ancestor sectioning content or sectioning root element.
A header typically contains a group of introductory or navigational aids.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
A header element is intended to usually contain the section's heading (an h1–h6 element), but this is not required.
The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
Note:The header element is not sectioning content; it doesn't introduce a new section
Code example using new semantic markup elements <header> and <nav>
<body>
<header>
<h1>Little Green Guys With Guns</h1>
<nav>
<ul> <li><a href="/games">Games</a> <li><a href="/forum">Forum</a> <li><a href="/download">Download</a> </ul>
</nav>
<h2>Important News</h2>
<!-- this starts a second subsection -->
<!-- this is part of the subsection entitled "Important News" -->
<p>To play today's games you will need to update your client.</p>
<h2>Games</h2> <!-- this starts a third subsection -->
</header>
<p>You have three active games:</p>
<!-- this is still part of the subsection entitled "Games" -->
<nav> (link to W3C page with further information)
Below is part of the W3C explanation of how the element <nav> can be used followed by a W3C HTML5 code example.
The <nav> element represents a section of a page that links to other pages or to parts within the page: a section with navigation links.
In cases where the content of a nav element represents a list of items, use list markup to aid understanding and navigation.
Not all groups of links on a page need to be in a nav element — the element is primarily intended for sections that consist of major navigation blocks.
In particular, it is common for footers to have a short list of links to various pages of a site, such as the terms of service, the home page, and a copyright page.
The footer element alone is sufficient for such cases; while a nav element can be used in such cases, it is usually unnecessary.
User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).
Code example using semantic markup elements <nav> and <header> and <main> and <article> and <time> and also using microdata.
Thatch's note WTF! why is <div itemprop="articleBody"> necessary? Surely there is a better way?
Note the <main> element being used to wrap the main content of the page.
In this case, all content other than content within < header> and <footer>.
OK I get it an example of not using <article> to define the article...how bizarre.
<body itemscope itemtype="https://schema.org/Blog">
<header>
<h1>Wake up sheeple!</h1> <p><a href="news.html">News</a> - <a href="blog.html">Blog</a> - <a href="forums.html">Forums</a></p> <p>Last Modified: <span itemprop="dateModified">2009-04-01</span></p>
<nav>
<h1>Navigation</h1> <ul> <li><a href="articles.html">Index of all articles</a></li> <li><a href="today.html">Things sheeple need to wake up for today</a></li> <li><a href="successes.html">Sheeple we have managed to wake</a></li> </ul>
</nav>
</header>
<main>
<article itemprop="blogPosts" itemscope itemtype="https://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">My Day at the Beach</h1>
</header>
<div itemprop="articleBody"> <!--WTF...really!?-->
<p>Today I went to the beach and had a lot of fun.</p> ...more content... </div>
<footer>
<p>Posted
<time itemprop="datePublished" datetime="2009-10-10">Thursday</time>.</p>
</footer>
</article> ...more blog posts...
</main>
<footer>
<p>Copyright © <span itemprop="copyrightYear">2010</span> <span itemprop="copyrightHolder">The Example Company</span> </p>
<p><a href="about.html">About</a> - <a href="policy.html">Privacy Policy</a> - <a href="contact.html">Contact Us</a></p>
</footer>
</body>
<section> (link to W3C page with further information)
Below is part of the W3C explanation of how the element <section> can be used followed by a W3C HTML5 code example.
The <section> element represents a generic section of a document or application.
A section, in this context, is a thematic grouping of content, typically with a heading.
Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information.
Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element.
The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline.
Code example using <section> and <header> and <article> which are both sectioning elements.
Note how the use of <section> means that the author can use <h1> elements throughout, without having to worry about whether a particular section is at the top level, the second level, the third level, and so on.
This could be important for SEO.
<article>
<header>
<h1>Apples</h1> <p>Tasty, delicious fruit!</p>
</header>
<p>The apple is the pomaceous fruit of the apple tree.</p>
<section>
<h1>Red Delicious</h1> <p>These bright red apples are the most common found in many supermarkets.</p>
</section>
<section>
<h1>Granny Smith</h1> <p>These juicy, green apples make a great filling for apple pies.</p>
</section>
</article>
<article> (link to W3C page with further information)
Below is part of the W3C explanation of how the element <article> can be used followed by a W3C HTML5 code example.
The <article> element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
Code example using <article> and <header> and <time> and <footer> also microdata.
<article itemscope itemtype="https://schema.org/BlogPosting">
<header>
<h1 itemprop="headline">The Very First Rule of Life</h1>
<p><time itemprop="datePublished" datetime="2009-10-09">3 days ago</time></p>
<link itemprop="url" href="?comments=0">
</header>
<p>If there's a microphone anywhere near you, assume it's hot and sending whatever you're saying to the world. Seriously.</p> <p>...</p>
<footer> <a itemprop="discussionUrl" href="?comments=1">Show comments...</a> </footer>
</article>
<footer> (link to W3C page with further information)
Below is part of the W3C explanation of how the element <footer> can be used followed by a W3C HTML5 code example.
The footer element represents a footer for its nearest ancestor sectioning content or sectioning root element. A footer typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like.
When the footer element contains entire sections, they represent appendices, indexes, long colophons, verbose license agreements, and other such content.
Contact information for the author or editor of a section belongs in an address element, possibly itself inside a footer. Bylines and other information that could be suitable for both a header or a footer can be placed in either (or neither). The primary purpose of these elements is merely to help the author write self-explanatory markup that is easy to maintain and style; they are not intended to impose specific structures on authors.
Footers don't necessarily have to appear at the end of a section, though they usually do.
When the nearest ancestor sectioning content or sectioning root element is the body element, then it applies to the whole page.
The footer element is not sectioning content; it doesn't introduce a new section
<aside> (link to W3C page with further information)
Below is part of the W3C explanation of how the element <aside> can be used followed by a W3C HTML5 code example.
The aside element represents a section of a page that consists of content that is tangentially related to the content around the aside element, and which could be considered separate from that content. Such sections are often represented as sidebars in printed typography.
The element can be used for typographical effects like pull quotes or sidebars, for advertising, for groups of nav elements, and for other content that is considered separate from the main content of the page.
Code example using semantic element <aside> and <article> and new HTML element <q>
Apparently it shows how an <aside> can be used to mark up a pull quote within an <article>
<article>
<p>He later joined a large company, continuing on the same work. <q>I love my job. People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. Some people wonder what they would do if they didn't have to work... but I know what I would do, because I was unemployed for a year, and I filled that time doing exactly what I do now.</q></p>
<aside>
<q> People ask me what I do for fun when I'm not at work. But I'm paid to do my hobby, so I never know what to answer. </q> </aside>
<p>Of course his work — or should that be hobby? — isn't his only passion. He also enjoys other pleasures.</p>
<article>
<address> (link to W3C page with further information)
Below is part of the W3C explanation of how the element <address> can be used followed by a W3C HTML5 code example.
The address element represents the contact information for its nearest article or body element ancestor. If that is the body element, then the contact information applies to the document as a whole.
The address element must not be used to represent arbitrary addresses (e.g. postal addresses), unless those addresses are in fact the relevant contact information. (The p element is the appropriate element for marking up postal addresses in general.)
Typically, the address element would be included along with other information in a footer element.
Code example using semantic markup elements <address> and <footer> and HTML5 element <small>
Note: <address> is a sectioning element but <footer> is not.
<footer>
<address>
For more details, contact <a href="mailto:js@example.com">John Smith</a>.
</address>
<p>
<small>© copyright 2038 Example Corp.</small>
</p>
</footer>
<main> (link to W3C page with further information)
Below is part of the W3C explanation of how the element <mainr> can be used followed by a W3C HTML5 code example.
The main element represents the main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.
The main element is not sectioning content and has no effect on the document outline
The main content area of a document includes content that is unique to that document and excludes content that is repeated across a set of documents such as site navigation links, copyright information, site logos and banners and search forms (unless the document or applications main function is that of a search form).
User agents that support keyboard navigation of content are strongly encouraged to provide a method to navigate to the main element and once navigated to, ensure the next element in the focus order is the first focusable element within the main element. This will provide a simple method for keyboard users to bypass blocks of content such as navigation links.
Authors must not include more than one main element in a document.
Authors must not include the main element as a descendant of an article, aside, footer, header or nav element.
Code example using semantic markup elements <main> and <article>
<!-- other content -->
<main>
<h1>Skateboards</h1>
<p>The skateboard is the way cool kids get around</p>
<article>
<h2>Longboards</h2> <p>Longboards are a type of skateboard with a longer wheelbase and larger, softer wheels.</p> <p>... </p> <p>... </p>
</article>
<article>
<h2>Electric Skateboards</h2> <p>These no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the board, fed by an electric battery.</p> <p>... </p> <p>... </p>
</article>
</main>
Google background on Rich Snippets and Structured data
Below are links to Google instructions for 3 markup schemas and how the translates into:
Rich Snippets for Products note
Rich Snippets for an Event see also sub event types Social Event and Music Event
Code example of microdata markup for a basketball game deemed an Event
And how it looks.
See Google SERP for search for "next game at Yankees stadium" only one website has rich snippets.(stubhub.com)
Google FAQ page beginning with the question
What is Schema.org?
Answer:
schema.org is a collaboration by Google, Microsoft, and Yahoo! to improve the web by creating a structured data markup schema supported by major search engines. On-page markup helps search engines understand the information on webpages and provide richer results. A shared markup vocabulary makes it easier for webmasters to decide on a markup schema and get maximum benefit for their efforts.
Link to How to start using Schema.org to markup your webpages.
Top
WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications)
https://en.wikipedia.org/wiki/WAI-ARIA
