HTML5 Accessibile Markup Standards

HTML5 is a new version of HTML and XHTML. The HTML5 specification defines a single language that can be written in HTML or XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of web Applications, an area previously not adequately covered by HTML. (source).

We will use the HTML5 Doctype and HTML5 features when appropriate and serve it up at html, not xml.

Although HTML5 clearly represents a big step forward for web applications and what they are capable of, getting started with HTML5 is not all that difficult, especially if you already have a solid knowledge of HTML4.

In fact, the syntax of coding up a standard web page will be largely the same in many respects (differing mainly in instances where new tags or functionality are introduced). This is because HTML5 is designed to be backwards compatible so as not to break the millions of existing webpages already coded in HTML 4. Switching the entire web over to HTML5 will take years if not decades, and therefore it’s important to make HTML5 backwards compatible to previous versions of the HTML standard.

The HTML5 Specification

So while the syntax of writing simple HTML on the front end might not be a drastic departure, it’s important to note that the HTML5 specification covers much greater ground than HTML4 ever did. This is because HTML5 is intended as a successor not just to HTML4, but also to XHTML 1.1, and DOM Level2. These standards have now been rolled into HTML. The HTML5 spec also contains detailed parsing rules that are intended to greatly improve the interoperability of browsers and how they interpret webpages.

Of course, as a web developer or web designer, these back-end changes won’t be your major concern. So the most relevant part of the new standard will be places where HTML5 does diverge from HTML 4 in terms of the actual code, and understanding all the extra new features that have been added in to HTML5.

Each element in HTML falls into zero or more categories that group elements with similar characteristics together. The following broad categories are used in this specification:

Sectioning content, heading content, phrasing content, embedded content, and interactive content are all types of flow content. Metadata is sometimes flow content. Metadata and interactive content are sometimes phrasing content. Embedded content is also a type of phrasing content, and sometimes is interactive content.

Other categories are also used for specific purposes, e.g. form controls are specified using a number of categories to define common requirements. Some elements have unique requirements and do not fit into any particular category.

1. Doctype

A proper Doctype which triggers standards mode in your browser should always be used. Quirks mode should always be avoided.

A nice aspect of HTML5 is that it streamlines the amount of code that is required. Meaningless attributes have been dropped, and the DOCTYPE declaration has been simplified significantly. Additionally, there is no need to use CDATA to escape inline JavaScript, formerly a requirement to meet XML strictness in XHTML.

<!DOCTYPE html>

2. Character Encoding

All markup should be delivered as UTF-8, as its the most friendly for internationalization. It should be designated in both the HTTP header and the head of the document.

Setting the character set using <!meta> tags.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

In HTML5, just do:

<!meta charset="utf-8">

3. Semantic Elements

Elements such as header, footer, section, article, and others, can be used multipletimes on a page, and more than once within one or the other even. In cases where there will be more than one of the same element, that is used for the same thing such as using article for each blog post of a page and each article having a header and footer, adding a class to them can help separate them from any other places you may use these elements on the page. That way you can target the elements more specifically in your CSS. However this is not always necessary, depending on the structure of the page and the way you define your selectors.

New Semantic Elements in HTML5

Many web sites contain HTML code like:
<div id=”nav”> <div class=”header”> <div id=”footer”>
to indicate navigation, header, and footer.

HTML5 offers new semantic elements to define different parts of a web page:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

4. Validation

We will test our markup against the W3C validator , to ensure that the markup is well formed. 100% valid code is not a goal, but validation certainly helps to write more maintainable sites as well as debugging code.

5. Forms in HTML5

Forms also see major updates in functionality as part of HTML5. In fact, improvements to forms were one of the main goals of HTML5 from the beginning, with the earlier Web Forms 2.0 specification being integrated into the HTML5 spec. The result is new forms and input types that allow you to create more powerful forms and inputs. HTML5 adds new controls to choose from such as date pickers, color pickers and numeric stepper controls, as well as new input types such as email, search and URL.

All of this intends to provide much richer functionality around HTML forms. HTML5 also introduces support for the put and delete form methods, allowing for submission of form input to a much wider array of applications.

See also Adobe AEM 6.0 best practices examples for form building.

6. HTML5 APIs

HTML5 introduces a number of integrated APIs which intend to make developing rich web applications much easier and standardize functionality that was previously only available via plugins. These APIs include the video and audio APIs, an offline apps API, an API to make page content directly editable, drag and drop functionality, local storage, and an API to control application protocols and media types. Other APIs like geolocation and web messaging will also be available to developers, although they are not technically considered part of the HTML5 spec.

7. Best Practices

Items in list form should always be housed in a <ul>, <ol>, or <dl>, never a set of <div>s or <p>s.
Use the <label> element to label each form field, the for attribute should associate itself with the input field, so users can click the labels. If the form label and input are wrapped in a <label> element, the association is inherit and the for attribute is not required, but should be used as not all assistive technologies interpret the wrapping properly.
Use microformats where appropriate, specifically hCard and adr.
A <table> is for tabular data ONLY and never layout control.
For tabular data, make use of <thead>, <tbody>, <tfoot>, and <th> elements (and the scope attribute) when appropriate.
Reduce superflous markup. Reduce the number of div elements (parent and child) if possible. This is especially true in a CMS and framework environement like AEM and Bootstrap.
Reduce page size at every turn. This is a responsive site and mobile devices can be severly bandwidth contstrained!
Use relative measurements such as EM or REM instead of pixed measurements like PX.
Create class names that are SEMANTICAL and not presentational. Choose a name that indicates what it IS and not how it looks.
Be aware of CSS specificity ! Use !important ONLY as a last resort, if at all.
Try not to nest more than 3 levels in LESS.
Look at using the new <picture> element for providing images sized to the appropriate device type.
Wait for the DOM and CSSOM to finsih loading before loading/executing javascript whenever possible. Load js as the last item on the page to improve rending times (perceived response time).
Combine and minify CSS files and JAVASCRIPT files to reduce HTTP requests. Use YSLOW to see what the waterfall is doing!
Test, test, test and re-test! Do code reviews with your peers before turning over code for further development and/or testing.
Test all relevent device types and sizes, as well as browsers. Yes, life is complicated now for FEDs! Use a service if necessary, but better to find a physical device to insure validation of code.

Appendix A: New Elements in HTML5

A number of new elements are introduces in HTML5 that are intended to help browsers and applications better understand the structure and meaning of HTML pages.

HTML5 Tags Ordered Alphabetically

NOTE: Several new attributes have also been added to
existing elements to improve their functionality. All links are to external sites.

Tag	Description
<!–…–>	Defines a comment
<!DOCTYPE>	Defines the document type
<a>	Defines a hyperlink
<abbr>	Defines an abbreviation or an acronym
<acronym>	Not supported in HTML5. Use <abbr> instead. Defines an acronym
<address>	Defines contact information for the author/owner of a document
<applet>	Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet
<area>	Defines an area inside an image-map
<article>	Defines an article
<aside>	Defines content aside from the page content
<audio>	Defines sound content
<b>	Defines bold text
<base>	Specifies the base URL/target for all relative URLs in a document
<basefont>	Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo>	Overrides the current text direction
<big>	Not supported in HTML5. Use CSS instead. Defines big text
<blockquote>	Defines a section that is quoted from another source
<body>	Defines the document’s body
<br>	Defines a single line break
<button>	Defines a clickable button
<canvas>	Used to draw graphics, on the fly, via scripting (usually JavaScript)
<caption>	Defines a table caption
<center>	Not supported in HTML5. Use CSS instead. Defines centered text
<cite>	Defines the title of a work
<code>	Defines a piece of computer code
<col>	Specifies column properties for each column within a <colgroup> element
<colgroup>	Specifies a group of one or more columns in a table for formatting
<datalist>	Specifies a list of pre-defined options for input controls
<dd>	Defines a description/value of a term in a description list
<del>	Defines text that has been deleted from a document
<details>	Defines additional details that the user can view or hide
<dfn>	Represents the defining instance of a term
<dialog>	Defines a dialog box or window
<dir>	Not supported in HTML5. Use <ul> instead. Defines a directory list
<div>	Defines a section in a document
<dl>	Defines a description list
<dt>	Defines a term/name in a description list
<em>	Defines emphasized text
<embed>	Defines a container for an external (non-HTML) application
<fieldset>	Groups related elements in a form
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content
<font>	Not supported in HTML5. Use CSS instead. Defines font, color, and size for text
<footer>	Defines a footer for a document or section
<form>	Defines an HTML form for user input
<frame>	Not supported in HTML5. Defines a window (a frame) in a frameset
<frameset>	Not supported in HTML5. Defines a set of frames
<h1> to <h6>	Defines HTML headings
<head>	Defines information about the document
<header>	Defines a header for a document or section
<hr>	Defines a thematic change in the content
<html>	Defines the root of an HTML document
<i>	Defines a part of text in an alternate voice or mood
<iframe>	Defines an inline frame
<img>	Defines an image
<input>	Defines an input control
<ins>	Defines a text that has been inserted into a document
<kbd>	Defines keyboard input
<keygen>	Defines a key-pair generator field (for forms)
<label>	Defines a label for an <input> element
<legend>	Defines a caption for a <fieldset> element
<li>	Defines a list item
<link>	Defines the relationship between a document and an external resource (most used to link to style sheets)
<main>	Specifies the main content of a document
<map>	Defines a client-side image-map
<mark>	Defines marked/highlighted text
<menu>	Defines a list/menu of commands
<menuitem>	Defines a command/menu item that the user can invoke from a popup menu
<meta>	Defines metadata about an HTML document
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<noframes>	Not supported in HTML5. Defines an alternate content for users that do not support frames
<noscript>	Defines an alternate content for users that do not support client-side scripts
<object>	Defines an embedded object
<ol>	Defines an ordered list
<optgroup>	Defines a group of related options in a drop-down list
<option>	Defines an option in a drop-down list
<output>	Defines the result of a calculation
<p>	Defines a paragraph
<param>	Defines a parameter for an object
<pre>	Defines preformatted text
<progress>	Represents the progress of a task
<q>	Defines a short quotation
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<s>	Defines text that is no longer correct
<samp>	Defines sample output from a computer program
<script>	Defines a client-side script
<section>	Defines a section in a document
<select>	Defines a drop-down list
<small>	Defines smaller text
<source>	Defines multiple media resources for media elements (<video> and <audio>)
<span>	Defines a section in a document
<strike>	Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text
<strong>	Defines important text
<style>	Defines style information for a document
<sub>	Defines subscripted text
<summary>	Defines a visible heading for a <details> element
<sup>	Defines superscripted text
<table>	Defines a table
<tbody>	Groups the body content in a table
<td>	Defines a cell in a table
<textarea>	Defines a multiline input control (text area)
<tfoot>	Groups the footer content in a table
<th>	Defines a header cell in a table
<thead>	Groups the header content in a table
<time>	Defines a date/time
<title>	Defines a title for the document
<tr>	Defines a row in a table
<track>	Defines text tracks for media elements (<video> and <audio>)
<tt>	Not supported in HTML5. Use CSS instead. Defines teletype text
<u>	Defines text that should be stylistically different from normal text
<ul>	Defines an unordered list
<var>	Defines a variable
<video>	Defines a video or movie
<wbr>	Defines a possible line-break

Accessible Markup Standards