Upload
annice
View
52
Download
2
Embed Size (px)
DESCRIPTION
Intro to HTML5 Semantic Tags. . HTML5 and WordPress. Since 2012 , most WordPress themes have been coded using the newer HTML5 standard. - PowerPoint PPT Presentation
Citation preview
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