HTML.5 Elements

According to my bloglines, these are new elements in HTML.5, but somehow I reckon it’s RSS is up the creek. Someone, anyone, convince me I am not crazy.

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.

Advertisements