New Elements in HTML.5

These are new elements in HTML.5

3.1. New Elements in HTML.5

The following elements have been introduced for better structure:

• section represents a generic document or application section. It can be used together with h1-h6 to indicate the document structure.
• article represents an independent piece of content of a document, such as a blog entry or newspaper article.
• aside represents a piece of content that is only slightly related to the rest of the page.
• header represents the header of a section.
• footer represents a footer for a section and can contain information about the author, copyright information, et cetera.
• nav represents a section of the document intended for navigation.
• dialog can be used to mark up a conversation like this:

 <dialog>
 <dt> Costello
 <dd> Look, you gotta first baseman?
 <dt> Abbott
 <dd> Certainly.
 <dt> Costello
 <dd> Who's playing first?
 <dt> Abbott
 <dd> That's right.
 <dt> Costello
 <dd> When you pay off the first baseman every month, who gets the money?
 <dt> Abbott
 <dd> Every dollar of it. 
 </dialog>

• figure can be used to associate a caption together with some embedded content, such as a graphic or video:

 <figure>
 <video src=ogg>…&lt;/video>
 <legend>Example&lt;/legend>
 </figure>

Then there are several other new elements:

• audio and video for multimedia content. Both provide an API so application authors can script their own user interface, but there is also a way to trigger a user interface provided by the user agent. source elements are used together with these elements if there are multiple streams available of different types.
• embed is used for plugin content.
• m represents a run of marked text.
• meter represents a measurement, such as disk usage.
• time represents a date and/or time.
• canvas is used for rendering dynamic bitmap graphics on the fly, such as graphs, games, et cetera.
• command represents a command the user can invoke.
• datagrid represents an interactive representation of a tree list or tabular data.
• details represents additional information or controls which the user can obtain on demand.
• datalist together with the a new list attribute for input is used to make comboboxes:

 <input list=browsers>
 <datalist id=browsers>
 <option value="Safari">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Firefox">
 </datalist>

• The datatemplate, rule, and nest elements provide a templating mechanism for HTML.
• event-source is used to “catch” server sent events.
• output represents some type of output, such as from a calculation done through scripting.
• progress represents a completion of a task, such as downloading or when performing a series of expensive operations.

The input element’s type attribute now has the following new values:

• datetime
• datetime-local
• date
• month
• week
• time
• number
• range
• email
• url

The idea of these new types is that the user agent can provide the user interface, such as a calendar date picker or integration with the user’s address book and submit a defined format to the server. It gives the user a better experience as his input is checked before sending it to the server meaning there is less time to wait for feedback.