Intro to HTML5 Semantic Tags

<header> <nav> <article> <aside> <section> <footer>

HTML5 and WordPress

Since 2012, most WordPress themes have been coded using the newer HTML5 standard.

If you have been using a newer theme the chances are very good that you are already using a theme that has been coded using HTML5

WordPress Frameworks

Most popular WordPress frameworks, whether base theme frameworks or frameworks that don’t start with a template are also coded using HTML5

Frameworks coded with HTML5:

Genesis Headway Ultimatum Elegant Themes iThemes Pagelines Gantry And MORE!

These tags are IMPORTANT

In terms of document structure – and context – HTML5 tags are important for screen readers; i.e. for accessibility and for general readability.

BEFORE

<div class="article">  <div class="header">    <h1>My blog post</h1>   </div>  <!-- ... content ... --></div>

AFTER

<article>  <header>    <h1>My blog post</h1>  </header>  <!-- ... content ... --></article>

What is Semantic markup?Semantic markup is the process of

defining content and giving it contextual meaning

It helps to ensure that your content is MACHINE READABLE

Machine Readable?Machine Readable =

Bots – Google, Bing, Yandex etc.

!! Possible SEO Benefits !!

Example (from Genesis)

Some frameworks are already using HTML5 along with microdata to boost SEO

Example taken from a Genesis theme:

<header class="site-header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader">

Breakdown overview

More info on rich snippets at schema.orgMore information on ARIA landmarks at accessibility.oit.ncsu.edu

The <header> tagAs we just saw, the header tag can

also be used to contain other data like microdata.

The header tag is generally used as a container – some elements that you might find therein:

Navigation (menu) – Site Logo – Site Title and the tagline.

Example<header>

<div class="site-logo"><img src="images/logo.png" alt="site logo" /><nav>

<ul><li>link</li><li>link</li>

</ul></nav></header>

OR<header>

<div class="site-logo"><img src="images/logo.png" alt="site logo" />

</header><nav>

<ul><li>link</li><li>link</li>

</ul></nav>

OR EVEN…<header>

<div class="site-logo"><img src="images/logo.png" alt="site logo" />

</header><nav>

<ul><li>link</li><li>link</li>

</ul></nav><header class="entry-header">…content…</header>

There can be more than one <header> on a web page!

The <nav> tag1

The <nav> tag defines a set of navigation links.

Notice that NOT all links of a document should be inside a <nav> element. The <nav> element is intended only for major block of navigation links.

Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content.

The <article> tag2

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.

The <section> tag

The section tag can be used to define an area of content such as team members on an "about us" page. It usually also contains a title using <h1>, <h2>, <h3>, <h4>, <h5> or <h6> tags - e.g:

<section><h2>Team Members</h2> …….</section>

<div> vs. <section>

You may style sections, but you may not add sections for the sole purpose of styling if the contained element do not represent a logical subdivision of your content.

The <aside> tag3

The <aside> tag represents content that is tangentially related to the content on the web page.

Typical areas include: Sidebars/widget areas e.g. Twitter

feed Pull-quotes

(ARIA Role equivalent: role="complementary")

HINT

Lastly…(bonus) ;)

The <main> tagThere is only one <main> tag

allowed per document. Adding more than one <main> tag will invalidate your code.

Placement hint: <main><!– main content of page --></main>

More info: html5doctor.com

Resources

http://www.marcofolio.net/webdesign/html5_microdata_what_is_it_and_why_should_you_care_.html

http://blog.paciellogroup.com/2012/06/html5-accessibility-chops-when-to-use-an-aria-role/

http://rawgithub.com/w3c/aria-in-html/master/index.html

Citations

1. http://www.w3schools.com/tags/tag_nav.asp2. www.w3.org/html/wg/drafts/html/master/sections.h

tml3. http://www.w3.org/TR/html5/sections.html#the-asi

de-element