Intro to html5 semantic tags
This presentation is the property of its rightful owner.
Sponsored Links
1 / 23

Intro to HTML5 Semantic Tags PowerPoint PPT Presentation


  • 85 Views
  • Uploaded on
  • Presentation posted in: General

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.

Download Presentation

Intro to HTML5 Semantic Tags

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Intro to html5 semantic tags

Intro to HTML5 Semantic Tags

  • <header>

  • <nav>

  • <article>

  • <aside>

  • <section>

  • <footer>


Html5 and wordpress

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

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

Frameworks coded with HTML5:

  • Genesis

  • Headway

  • Ultimatum

  • Elegant Themes

  • iThemes

  • Pagelines

  • Gantry

  • And MORE!


These tags are important

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

BEFORE

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


After

AFTER

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


What is semantic markup

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?

Machine Readable =

  • Bots – Google, Bing, Yandex etc.

    !! Possible SEO Benefits !!


Example from genesis

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

Breakdown overview

More info on rich snippets at schema.org

More information on ARIA landmarks at accessibility.oit.ncsu.edu


The header tag

The <header> tag

As 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

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>


Intro to html5 semantic tags

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

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 tag 1

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

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

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

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

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

Lastly…(bonus) ;)

The <main> tag

There 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

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

Citations

  • http://www.w3schools.com/tags/tag_nav.asp

  • www.w3.org/html/wg/drafts/html/master/sections.html

  • http://www.w3.org/TR/html5/sections.html#the-aside-element


  • Login