View on GitHub

HTML5-examples

HTML5 you can use!

download .ZIPdownload .TGZ

Notable Changes

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.

<!-- HTML4 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	 "http://www.w3.org/TR/html4/strict.dtd">

<!-- HTML5 -->
<!DOCTYPE html>

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.

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.

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.

<input name="year" type="text" required>

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.

<input name="search" type="text" placeholder="Search">

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.

<input name="first_name" type="text" autofocus>
<input name="last_name" type="text">

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.

<input name="drummer" list="drummers">
<datalist id="drummers">
	<option value="Dave Grohl">
	<option value="Joey Castillo">
	<option value="Jon Theodore">
</datalist>

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.

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.

<input id="color" name="color" type="color">

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.

<input type="date" name="start_date" min="2014-12-01" max="2014-12-31">

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

<input type="email" name="email">

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.

<input type="number" name="order_id" min="1" max="9999999">

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.

<input type="range" name="speed" min="0" max="260">

The tel input type is for telephone numbers.

<input type="tel" name="phone_number">

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.

<input type="url" name="home_page">

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.

The HTML in between the progress tags is the fallback for browsers that do not support this feature.

<progress max="100" value="75">75% Complete</progress>

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.

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 controls preload="auto" autoplay>
	<source src="music.mp3">
	<source src="music.ogg">
	<p>Your browser does not support native audio.</p>
</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.

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.

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

<video src="movie.mp4" controls width="480" height="360">	
	<p>Your browser does not support native video.</p>
</video>

Demos

Tools

References