Here we will take a quick look at the elements added to HTML5, as well as those removed from it. At the end we will see how to add a custom made element into our HTML5 document.

New elements in HTML5

Semantic or structural elements:

  • <article>: For external content, like text from a news-article, blog, forum, or any other content from an external source
  • <aside>: For content aside from the content it is placed in. The aside content should be related to the surrounding content.
  • <bdi>: Defines a part of text that might be formatted in a different direction from other text
  • <details>: For describing details about a document, or parts of a document
  • <figure>: For grouping a section of stand-alone content, could be a video
  • <figcaption>: The caption of the figure section
  • <footer>: For a footer of a document or section, could include the name of the author, the date of the document, contact information, or copyright information
  • <header>: For an introduction of a document or section, could include navigation
  • <hgroup>: For a section of headings, using <h1> to <h6>, where the largest is the main heading of the section, and the others are sub-headings
  • <main>: For main content area consists of content that is directly related to, or expands upon the central topic of a document or the central functionality of an application
  • <mark>: For text that should be highlighted
  • <menu>: For list of commands used in toolbar, popup and other menu
  • <menuitem>: For a command that a user is able to invoke through a popup menu
  • <nav>: For a section of navigation
  • <rp>: Defines what to show in browsers that do not support ruby annotations
  • <rt>: Defines an explanation/pronunciation of characters (for East Asian typography)
  • <ruby>: Defines a ruby annotation (for East Asian typography)
  • <section>: For a section in a document. Such as chapters, headers, footers, or any other sections of the document
  • <summary>: A caption, or summary, inside the details element
  • <time>: For defining a time or a date, or both
  • <wbr>: For a position within text where the browser may optionally break a line

Form elements:

  • <datalist>: Represents a set of predefined options for other controls.
  • <keygen>: Represents a key-pair generator control .
  • <output>: Represents the result of a calculation .

Input type attributes:

  • autocomplete: Specifies whether or not the the input field should have autocomplete enabled.
  • autofocus: Specifies that the input field should have focus on page load (not for type="hidden")
  • form: Specifies one or more forms the input field belongs to
  • formaction: Overrides the form's action attribute. Must be a valid URL that defines where to send the data when the form is submitted (for type="submit" and type="image")
  • formenctype: Overrides the form's enctype attribute. Specifies how form-data should be encoded before sending it to the server (for type="submit" and type="image")
  • formmethod: Overrides the form's method attribute. Defines the HTTP method for sending data to the action URL (fo type="submit" and type="image")
  • formnovalidate: Overrides the form's novalidate attribute. If present the input field should not be validated when submitted
  • novalidate: Assigned to entire form and applies to all of its fields as "don't validate'. May be overriden by an element's formnovalidate attribute.
  • formtarget: Overrides the form's target attribute. Specifies the target window used when the form is submitted (for type="submit" and type="image")
  • height: Defines the height of an input (for type="image")
  • list: Refers to a datalist containing predefined options for the input field
  • max: Specifies the input field's maximum value. Use together with the "min" attribute to create a range of legal values
  • min: Specifies the input field's minimum value. Use together with the "max" attribute to create a range of legal values
  • multiple: If present the user is allowed more than one value
  • pattern: Specifies a pattern or format for the input field's value. Example: pattern="[0-9]" means that the input value must be a number between 0 an 9
  • placeholder: Specifies a hint to help users fill out the input field
  • required: Indicates that the input field's value is required in order to submit the form
  • step: Specifies the legal number intervals for the input field
  • width: Specifies the width of an input (for type="image")

Input element types:

  • color: Field may contain a color only
  • date: Field may contain a date only
  • datetime: User may select a date and time with time zone
  • datetime-local: User may select a date and time with time zone without time zone
  • email: Field may contain an email only
  • month: User may select a month and year
  • number: Field may contain numbers only
  • range: Field may contain a range of values
  • search: Used as a search field (behaves like text)
  • tel: Field may contain a telephone number only
  • time: User may select a time
  • url: Field may contain an url only
  • week: User may select a week and year

Graphic elements:

  • <canvas>: Represents a bitmap area that scripts can be used to render graphics, like graphs, game graphics, or any visual images on the fly.
  • <svg>: Defines an embedded vector image.

Media elements:

  • <audio>: Represents a sound , or an audio stream
  • <embed>: Embedded objects in the document
  • <source>: Allows authors to specify alternative media resources for media elements like <video> or <audio>
  • <track>: Allows authors to specify timed text track for media elements like <video> or <audio>
  • <video>: Represents a video , and its associated audio files and captions, with the necessary interface to play it

Progress and meter elements:

  • <meter>: Represents a scalar measurement (or a fractional value), within a known range.
  • <progress>: Represents the completion progress of a task.

Math elements:

  • <math>: For mathematical notations; it captures both the structure and content

Creating custom HTML elements

In the HTML5 we are allowed to create our own custom made element. The JavaScript method document.registerElement() may used to achieve that. This method must be passed as the name of the custom element that will be used as well as with an optional object that defines the API.

The following example shows how to create a custom element <custom-elm> and add it to existing page:

var myCustomElm = document.registerElement(custom-elm);

document.body.appendChild(new myCustomElm());

The end result would be a new element inside our document's body (<body>), like this:

<custom-elm></custom-elm>

NOTE: The name of your custom element must contain a dash (-) so that the browsers can understand that this is not a standard element but a custom made.

Elements removed from HTML5

Some HTML4 elements have been removed from HTML 5 completely. Below you can find the list of those elements:

 

›› go to examples ››