HTML5 New Elements
Since 1999, HTML 4.01 has changed a lot. Today, several of the HTML 4.01 have been deprecated, and these elements have been deleted or redefined in HTML5.
In order to better handle today's Internet applications, HTML5 adds a lot of new elements and features, such as: graphics rendering, multimedia content, better page structure, better form of processing, and several api drag and drop elements, positioning, Including web application caching, storage, web worker, and so on.
New Elements in HTML5
Below is a list of the new HTML5 elements, and a description of what they are used for.
New Semantic/Structural Elements
HTML5 offers new elements for better document structure:
| Tag | Description |
|---|---|
| <article> | Defines an article in the document |
| <aside> | Defines content aside from the page content |
| <bdi> | Defines a part of text that might be formatted in a different direction from other text |
| <details> | Defines additional details that the user can view or hide |
| <dialog> | Defines a dialog box or window |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Defines self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | Defines a footer for the document or a section |
| <header> | Defines a header for the document or a section |
| <main> | Defines the main content of a document |
| <mark> | Defines marked or highlighted text |
| <menuitem> | Defines a command/menu item that the user can invoke from a popup menu |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links in the document |
| <progress> | Defines the progress of a task |
| <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> | Defines a section in the document |
| <summary> | Defines a visible heading for a <details> element |
| <time> | Defines a date/time |
| <wbr> | Defines a possible line-break |
Read more about HTML5 Semantics.
New Form Elements
| Tag | Description |
|---|---|
| <datalist> | Defines pre-defined options for input controls |
| <keygen> | Defines a key-pair generator field (for forms) |
| <output> | Defines the result of a calculation |
Read all about old and new form elements in HTML Form Elements.
New Input Types
| New Input Types | New Input Attributes |
|---|---|
|
|
Learn all about old and new input types in HTML Input Types.
Learn all about input attributes in HTML Input Attributes.
HTML5 - New Attribute Syntax
HTML5 allows four different syntaxes for attributes.
This example demonstrates the different syntaxes used in an <input> tag:
| Type | Example |
|---|---|
| Empty | <input type="text" value="John" disabled> |
| Unquoted | <input type="text" value=John> |
| Double-quoted | <input type="text" value="John Doe"> |
| Single-quoted | <input type="text" value='John Doe'> |
In HTML5, all four syntaxes may be used, depending on what is needed for the attribute.
HTML5 Graphics
| Tag | Description |
|---|---|
| <canvas> | Defines graphic drawing using JavaScript |
| <svg> | Defines graphic drawing using SVG |
Read more about HTML5 Canvas.
Read more about HTML5 SVG.
New Media Elements
| Tag | Description |
|---|---|
| <audio> | Defines sound or music content |
| <embed> | Defines containers for external applications (like plug-ins) |
| <source> | Defines sources for <video> and <audio> |
| <track> | Defines tracks for <video> and <audio> |
| <video> | Defines video or movie content |
Read more about HTML5 Video.
Read more about HTML5 Audio.