Intro to html5 semantic tags
1 / 23

Intro to HTML5 Semantic Tags - PowerPoint PPT Presentation

  • Uploaded on

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.

I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
Download Presentation

PowerPoint Slideshow about 'Intro to HTML5 Semantic Tags' - annice

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.


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


<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="">

Breakdown overview
Breakdown overview

More info on rich snippets at

More information on ARIA landmarks at

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.



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









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








Or even


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








<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")


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: