HTML5 you can use! Ben Levy April 2014 

Background HTML was primarily designed as a language for semantically describing scientific documents. HTML is now used to display all types of documents, interactive experiences, as well as audio and visual media. Development on HTML5 began in the Web Hypertext Application Technology Working Group (WHATWG) in 2004. HTML5 attempts to improve the language with support for the latest multimedia, while maintaining readability by humans and consistent rendering across devices. 

Simplified Doctype The doctype declaration for HTML5 has been simplified. This new declaration works with browsers that don't support HTML5 features too by forcing the browsers into strict mode. Browsers will interpret features they support and ignore anything else. Can I use... is a great resource for checking compatibility across browsers. 

Structure Tags Generic div elements are usually used to structure content on a page. HTML5 introduces semantic elements that more accurately describe the content in the element. Div elements can still be used when no other suitable element exists or when an element is needed only for styling purposes or as a convenience for scripting. 

Structure Tags The article element describes a self-contained composition in a document. The article element could be used for a magazine article, news story, blog entry, or any other independent item of content. The section element should be used for a generic document or application section. Each section should be identified with a heading (h1- h6) element. 

Structure Tags The header section element defines a page header and typically contains the site name, logo, and the site's navigation. The nav section element contains the navigational links for the page. There can be several nav sections in one page. The footer section element defines the page's footer and typically contains things like a copyright and legal notice. An aside section element defines a section that doesn't belong to the main flow (ex: information boxes and advertisements). 

Required Input Attribute The required Boolean attribute has been added to input elements and prevents form submission until the input has a value. When a user tries to submit a form without filling out a required input, the browser highlights the required inputs and instructs the user to fill them out. The required property cannot be used with input elements with the type of hidden, image, or a button type. 

Placeholder Input Attribute The placeholder attribute allows you to add informative text to an input element. The placeholder text appears in the input box until a user starts typing. The placeholder text does not act as a default and will not be submitted if the user does not enter any text. The placeholder does not replace a label for an input for various reasons. There are cases where the placeholder attribute is never displayed to the user and the inputs should be clearly identified even when the form is filled out. 

Autofocus Input Attribute The autofocus Boolean attribute specifies which form control should have focus when a page loads. A common practice is to set this on the form control that a user should fill out first. Only one form control in a document can have the autofocus attribute and the autofocus attribute cannot be applied if the type of the input is hidden. 

List Input Attribute The list attribute suggests a list of predefined options to the user. The value of the list should equal the id of the datalist element in the same document. The datalist element contains a set of options that will be used in the list. 

New Input Types HTML5 introduces a new set of possible type attributes for the input element. The new values for type include color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, and week. You can read more about these new input types here: http://html5doctor.com/html5-forms-input-types/ 

Color Input Type The color input is used for specifying a color. This input type presents a color picker returns the selected the hex value of the selected color. 

Date Input Type The date input works similarly to date pickers that use JavaScript. The date type brings date picker controls and even supports minimum and maximum values. 

Email Input Type The email input type does basic validation for email addresses and also supports multiple email addresses when used with the multiple attribute. 

Number Input Type The number input type adds controls increment and decrement the value that is entered. This value can also be limited by with min and max values and the step can change the increment value. 

Range Input Type The range input type is similar to number type, but is useful for when a numeric value is within a given range and does not need an exact value. Browsers render simple slider controls rather than an input box. 

Tel Input Type The tel input type is for telephone numbers. 

URL Input Type The url input type is for web addresses. Browsers do simple validation on this type. If the multiple attribute is used, multiple web addresses can be entered. 

Progress The progress element is used to show the completion progress of a task. The style of the bar varies across browsers, but the style can also be customized using CSS. The progress element has the optional attributes max and value. Max is a floating point number that indicates how much of the task must be performed for it to be considered complete. The default value for max is 1.0. The value attribute is a floating point number that indicates the current progress of the task. If the value is not present, the progress is considered indeterminate. 

Progress The HTML in between the progress tags is the fallback for browsers that do not support this feature. Chrome on Win 7 Firefox on Win 7 Safari on OS X 75% Complete 

Audio The audio element now allows native audio playback without the use of plugins. The src attribute defines the location of the content. This location can also be defined in a source element. The HTML5 spec allows multiple sources and the browser will try each source (in order) until the browser finds an audio source it can play. The preload attribute can have the value "none", "metadata", or "auto". The none value does not preload the content, metadata just preloads the metadata, and auto lets the browser decide whether or not to preload the content file. 

Audio The controls, autoplay, and loop boolean attributes define whether or not the audio should display controls, begin playing automatically, and play repeatedly, respectively. The muted boolean attribute indicates whether or not the audio should be initially silenced (default is false). The volume attribute indicates the playback volume of the audio. The range for volume goes from 0.0 (silent) to 1.0 (loudest). 

Audio

Your browser does not support native audio.



Video The video element now allows native video playback without needing to use plugins (like Flash). The video element simplifies the syntax for embedding videos and aims to make it easier to show videos across many browsers. The src attribute defines the location of the content. This location can also be defined in a source element nested in the video element. 

Video The (optional) height and width attributes define the height and width of the video in CSS pixels. The poster attribute is a URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing will be displayed until the first frame of the video is available. The preload attribute can have the value "none", "metadata", or "auto". The none value does not preload the content, metadata just preloads the metadata, and auto lets the browser decide whether or not to preload the content file. If the preload is not set, the default value is browser-defined. 

Video The controls, autoplay, and loop boolean attributes define whether or not the audio should display controls, begin playing automatically, and play repeatedly, respectively. The muted boolean attribute indicates whether or not the audio should be initially silenced (default is false).

Your browser does not support native video.



Demos Forms http://ben010783.github.io/html5-examples/forms.html Multimedia http://ben010783.github.io/html5-examples/multimedia.html 

Tools HTML5 Boilerplate http://html5boilerplate.com I want to use http://www.iwanttouse.com Modernizr http://modernizr.com HTML5test http://html5test.com 

Sources Mozilla Development Network https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5 WHATWG http://www.whatwg.org The World Wide Web Consortium http://www.w3.org/TR/html5/ Dive into HTML5 http://diveintohtml5.info HTML5 Doctor http://html5doctor.com 

Questions? @ben010783