Remember those pesky divs you typically saw on a lot of Drupal sites? Wouldn’t it be great if you could actually understand what each of those divs actually meant? Well worry no more, Drupal 8 Core comes packaged with HTML5 optimized markup!

If used HTML5 before, you’ll already know how big of an accessibility advantage this is. For those who haven’t, this blog is for you. Essentially the big difference between HTML5 and previous versions of HTML is semantics - how understandable and readable the code is. And HTML5 excels at it.
 

HTML5’s Semantic Markup

 The biggest different between HTML5 and previous versions of HTML is the emphasis on semantics. HTML5 is much easier to read and understand now with the inclusions of HTML5 tags as <article>, <section>, <header>, <aside>, <mark> and <nav>. Drupal 8 now supports email & phone elements natively, which is a big help for mobile users.

For developers, searching for a <nav> tag to find your navigation links saves more time than having to search through dozens of divs. Even elements such as tables have been changed throughout the site that make sense to accessibility devices.

In Drupal 8, All themes and core components use HTML 5 out of the box which will play a key role in making websites faster, accessible, mobile friendly, and semantic from the start.

ARIA and HTML5

In a previous blog post, we discussed the accessibility advantages that ARIA brings to Drupal 8 Core. What was not mentioned is how HTML5 and ARIA both work together. For instance, if a browser cannot read <header>, then the accompanying ARIA role will act as a backup.

This team particularly useful for screen readers that rely on code to translate the data back to the user. For instance, with images, HTML5 can use <figure> and <figcaption> to associate captions with images and hold <img> as well as <video>, <audio>, and other multimedia tags.

Search Engines benefit from HTML5

Good semantic markup means good results for search engines. Google and other search engines also love it when code is semantic, as it is much easier and faster to read through your code, meaning increasing the rankings of your website.

In addition, good semantic code potentially allows search engines and social media websites to display your information in a visually pleasing and distinct manner. You can also tell search engines what to look at.

No More Flash Needed

With HTML5, there is no more need to use the dying language of Flash. HTML5 comes equipped with Audio and Video tags which allow you to directly link videos on your website without requiring a flash input. This makes it faster and easier to stream audio and video content, especially on mobile devices. addition of audio, video, datalists, time, date, email, placeholder etc..

These are just the accessibility benefits that HTML5 has brought to Drupal 8. HTML5 can be used in a wide variety of other ways with websites or web applications. And it will be available to be used on Drupal 8. For more information about efforts to make Drupal 8 use HTML5 natively.

See more about this series on Drupal 8.