1 / 23

Intro to HTML5 Semantic Tags

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.

annice
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. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Intro to HTML5 Semantic Tags • <header> • <nav> • <article> • <aside> • <section> • <footer>

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

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

  4. Frameworks coded with HTML5: • Genesis • Headway • Ultimatum • Elegant Themes • iThemes • Pagelines • Gantry • And MORE!

  5. 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.

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

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

  8. 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

  9. Machine Readable? Machine Readable = • Bots – Google, Bing, Yandex etc. !! Possible SEO Benefits !!

  10. 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">

  11. Breakdown overview More info on rich snippets at schema.org More information on ARIA landmarks at accessibility.oit.ncsu.edu

  12. 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.

  13. 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>

  14. 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>

  15. 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!

  16. 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.

  17. 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.

  18. 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>

  19. <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.

  20. 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

  21. 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

  22. 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

  23. 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

More Related