HTML 5 is a new revision of the standard language that moves the web. The increase in needs has brought new uses in HTML and new tags to support them, paying special attention to the semantic web. There are quite a few elements added to the new HTML standard to encapsulate different types of information:

New tags

  • <article /> This new element defines a portion of the content as an article. Perfect for newspapers or blogs.
  • <aside /> Represents a fragment of information that slightly relates with the rest of the content.
  • <dialog /> Depicts conversations.
  • <figure /> Used to associate a caption with an embedded content, such as graphics or video.
  • <footer /> Page section to hold author information, copyright statement, etc…
  • <header /> Page section to hold some introductory information.
  • <nav /> Section oriented to navigation.
  • <section /> Element that defines a generic section.
  • <audio /> and <video /> Provides multimedia content.
  • <embed /> Supports plugin contents.
  • <m /> Marked text.
  • <meter /> Used to display measures.
  • <time /> Used to display dates and/or time.
  • <canvas /> Used to show real-time renderized graphics, such as games. For example, Sierra adventure games.
  • <command /> Related with commands a user can invoke.
  • <datagrid /> Shows additional information if it is requested by the user.
  • <datalist /> Used together with the new attribute for <input /> can be used to create comboboxes.
  • <output /> Denotes what kind of output the page produces.
  • <progress /> Represents a progress bar in a time consuming task, such as donwloading a file.

New local attributes

There’s a few new attributes for some of the elements that were already present in HTML4.

  • media: for greater consistency with the link element.
  • ping: whitespace-delimited URLs list to which a ping will be produced when the link is followed. For the elements <area /> and <a />.
  • target: for greater consistency the <a /> element.
  • autofocus: indicates that the <input />, <select />, <textarea /> or <button /> element should get the focus at page load.
  • form: attribute for <input />, <ouput />, <select /> <textarea />, <button /> and <fieldset /> which allows them to be associated to a form. This way, they can now be placed anywhere on a page, not as children of the form element.
  • replace: will affect the element once changes are performed to it. For elements <input />, <button /> and <form />.
  • data: specifies data for the elements <form />, <select /> and <datalist />.
  • required: denotes a required element, for <input /> and <textarea />.
  • disabled: for the <fieldset /> element.
  • autocomplete, min, max, pattern, step: these attributes delimitate the possibilities of the <input /> element.
  • list: for <datalist /> and <select /> elements.
  • template: for <input /> and <button /> elements, it will be used to repeat templates.
  • scoped: for the <style /> element, enables the use of scoped style sheets.
  • async: for the <script /> element. AJAX turned into an attribute.

New global attributes

Some attributes that apply to the whole web page document:

  • contenteditable: denotes an editable area.
  • contextmenu: contextual menu supplied by the user.
  • draggable: … needs explanation?
  • tabindex: a numeric value representing the order of elements we will tour around when pressing the TAB key.
  • irrelevant: … need I say more?
  • repeat, repeat-start, repeat-min, repeat-max: these attributes refer to iterations.

HTMLDocument extensions

There are some improvements, and some other elements that finally get standarized:

  • getElementsByClassName(): selects elements given a class. Time responses seem to be dramatically improved by using this function.
  • innerHTML: present in all ECMAScript implementations, it was not a standard till now.
  • activeElement, hasFocus(): will allow us to know which is element is active and which one has the focus.
  • getSelection(): returns an object with the current selection.
  • designMode, execCommand(): used to edit documents.

HTMLElement extensions:

The DOM element has also had some changes:

  • getElementsByClassName(): returns the children of an element that has a given class.
  • innerHTML: reads/changes the content of a node.
  • classList: a very interesting implementation that, along with className, lets us interact with element classes, providing methods such as has(), toggle(), add() and remove().
  • relList: works as classList on the rel attributes of the elements <a />, <area /> and <link />.

This is just a quick overview of the most important changes that HTML will bring. But there’s many more not mentioned here. For a complete reference guide, consult the W3C official draft.

HTML 5 is still a draft. Its definition is not finished yet. But all major browsers are already starting to implement some of its features. There’s still many years to wait for HTML 5 to be as widespread as HTML 4.01 is today, but the improvements this new version bring are so impressive that may affect its adoption speed. The originally proposed name for HTML 5 was Web Applications 1.0, which provides a very good idea about the goal of this new standard.

Further reading

Related posts:

  1. CSS 3: one more step in the evolution of the web