Skip to content

HTML5 is good for HTML5 and SEO

Quick Nagivation for this article

HTML5’s potential for SEO and accessibility
Browser support
Why SEO keeps an eye on HTML5
SEO myths regarding HTML5
Accessibility
Standards
3 quick accessibility checks
Forms
Concrete examples

HTML5’s potential as seen through the eyes of SEO and accessibility professionals

  • Improved UX
  • New tags to classify content
  • Great alternative to Flash & Silverlight
  • Heavily used in apps and games
  • Improved crawling and indexing
  • Improved Forms
  • Used in apps and games

Browser support update thanks to HTML5accessibility.com

Safari 68/100 Chrome + Opera 94.5/100 Firefox   91/100 Internet Explorer 37/100 Edge ??/100

SEO

When it doubt Google. So if you Google SEO, you get the following definition:

Search engine optimization (SEO) is the process of affecting the visibility of a website or a web page in a search engine’s “natural” or un-paid (“organic”) search results.

There are 3 pillars for SEO: technical, content, links.

Why SEOs keep an eye on HTML5?

  • It is great for rich media websites
  • Code bloat can be kept in check
  • It helps understand content
  • It helps make Ajax SEO-friendly

There’s no evidence that HTML5 affects SEO but it has great potential to change the way search engines index and understand content.

SEO Myth 1: Rankings

Search engines are not forthcoming on the impact HTML5 has on search engine rankings. However, search engines are going the semantic route so semantic elements make it easier for crawlers to understand the intent of each element.

Fun facts

SEO experts hate nothing more than a website in Flash. Ok, maybe they hate a parallax website that does not use History API.

  • Rich Media: great ALT support for audio and video elements
  • Code bloat: we get to use a simpler HTML Doctype with HTML5
  • Content: semantic markup helps crawlers get what blocks of code are doing in the page
  • Ajax: changing the URL in the address bar without refreshing it great with History API

Betting on tags

Here are some tags that may turn out to be critical to the SEO success of a website

<article> for an independent block of content.

<section> for a subsection of a block of content.

<header> to specify the header of a page or the header section of a self-contained block of content.

<footer> for an entire HTML document or the footer of an <article>.

<nav> for main site navigation, previous/next article links, pagination.

<aside> for content related but not part of the main document.

<video> to provide a cross-browser compatible way to display video.

Semantic HTML speaks louder than a thousand divs. Semantic markup speaks to software and in turn allows webmasters to speak to search engines

Rich content

Audio: <audio> means that ultimately, we will no longer have to rely upon third party plugins in order to render audio.

Image: <figure> and <figurecaption> allow SEOs to explain images better to search engine and users.

Video: <video> specifies a standard way to embed a video in a web page. SEOs can tell search engines about content related to the video, such as <captions> and <subtitles>.

Myth 2: HTML5 and Video SEO (VSEO)

HTML5 allows for the use of labels, captions, and subtitles on video content.

Rich Snippets: HTML5 Microdata

Google supports Rich Snippets for other data types including products, recipes, reviews, events and software application information.

Previously you would get this type of markup with regular HTML:

<div>
  My name is Bob Smith but people call me Smithy. Here is my home page:
  <a href="http://www.example.com">www.example.com</a>
  I live in Albuquerque, NM and work as an engineer at ACME Corp.
</div>

This is what it looks like with HTML5:

<div itemscope itemtype="http://schema.org/Person">
  My name is <span itemprop="name">Bob Smith</span>
  but people call me <span itemprop="nickname">Smithy</span>.
  Here is my home page:
  <a href="http://www.example.com" itemprop="url">www.example.com</a>
  I live in Albuquerque, NM and work as an <span itemprop="title">engineer</span>
  at <span itemprop="affiliation">ACME Corp</span>.
</div>

HTML5 supports geolocation micro data when location-based content is marked-up semantically which is great for mobile and local SEO.

Myth 3: the great h1 debate

1.You can use multiple H1 tags without killing your SEO

2.RULE OF THUMB: One H1 per section

3.RULE OF DUMB: SEO experts often recommend a single H1 because clients never implement content hierarchy properly.

This is where SEO and Accessibility may differ in opinions:  navigation menus and footers should not be part of the content hierarchy as H tags as they often add nothing to help understand the overall theme of a page.

Conclusion:

Oftentimes, if you take care of the SEO technical checklist, you’ve managed to cover 70% of the accessibility technical checklist as well.

Accessibility

A comprehensive definition of accessibility

Accessibility for the web means making sure that our web pages and applications are available to everyone, including people with disabilities. A website is accessible when it is compatible with adaptation technologies (software).

The four key areas disability accessibility seeks to address are:

  • Hearing
  • Mobility
  • Cognitive
  • Visual

Using semantic HTML improves accessibility

Semantic HTML means the HTML tags in a page should describe the content in a way that has to do with its meaning rather than its presentation.

Ajax – HTML5 enables a refreshing of the page without reloading the content which in turns allows the user to continue browsing without starting all over again.

HTML5 helps keep in line with the W3C POUR model:

P = Perceivable

O = Operable

U = Understandable

R = Robust

Disabilities – a few statistics

Between 110 million and 190 million adults have significant difficulties in functioning. That’s roughly 15% of the world’s population.

Since this talk is presented in Canada, this translates to disregarding 13.7% of the country’s adult population.

Norms and standards

Worldwide Standard – WCAG 2.0 (Web Accessibility Content Guidelines)

In Québec, there are 3 standards :

  • SGQRI-008-01
  • SGQRI-008-02
  • SGQRI-008-03

Ontario has an accessibility law based on the characteristics of companies. If you have 50 or more employees, any new company website or website refresh/redesign must be accessible.

  • Level A– put into effect in January 2014
  • Level AA – deadline for January 2021
  • Level AAA

3 Quick accessibility tests you can do with a11yproject.com in under 10 minutes

Quick Test: Check Comprehension Level – Using these tools you can check the reading level of your written content.

Quick Test: Check contrast with your mobile device – Using an ordinary mobile device you can check your site’s readability.

Quick Test: Navigate using just your keyboard – A quick 5 second accessibility test that you can run on your sites right now.

Testing tips:

  • Test a page on your website that has all types of contents to see how components work (navigation menu, main graphics, main content, blocks of information, contact form).
  • There’s a very good Github repository for all things HTML5 and accessibility by the Paciello Group.

HTML5 forms – required attributes

Forms can cause problems for people using screen readers if you don’t make sure it’s possible for them to access all the information they need to fill out the form.

With a required attribute, the browser will check a field and provided an error message  if it is not filled in. Screen readers interpret it and let the user know that the field is required when it’s initially encountered.

Input types give hints to the browser about the type of keyboard layout to display for on-screen keyboards.

HTML5 – Audio, video and accessibility

HTML5 allows browsers to natively play audio and video files. One of the great things for accessibility when you use these elements is that since the browser provides the controls, they are much more likely to be accessible.

Concrete examples

Simplified doctype:

<!DOCTYPE html>

Figure element for images

There isn’t any easy or semantic way to associate the caption, wrapped in a paragraph tag, with the image element itself. HTML5 rectifies this, with the <figure> element. When combined with the <figcaption> element, we can now semantically associate captions with their image counterparts.

[codepen_embed height=”268″ theme_id=”0″ slug_hash=”LNWGeG” default_tab=”html” user=”mjessier”]See the Pen LNWGeG by Myriam Jessier (@mjessier) on CodePen.[/codepen_embed]

Forms allow for a new required attribute, which specifies, naturally, whether a particular input is required. Dependent upon your coding preference, you can declare this attribute in one of two ways:

<input name="someInput" required="" type="text" />

Or, with a more structured approach.

<input name="someInput“ required=" required="" type="text" />

With this code, and within browsers that support this attribute, a form cannot be submitted if that “someInput” input is blank.

The example on the right can be found on Github.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *