New Elements in HTML5
Given below is a new HTML5 elements list along with a description of what they are used for.
New Semantic/Structural Elements
HTML5 offers new elements for better document structure:
| Tag | Description |
|---|---|
| <article> | It is used to define an article in the document |
| <aside> | It is used to define content aside from the page content |
| <bdi> | It is used to define a part of text that could have been formatted in a different direction from other text |
| <details> | It is used to define additional details that the user can view or hide |
| <dialog> | It is used to define a dialog box or window |
| <figcaption> | It is used to define a caption for a <figure> element |
| <figure> | It is used to define self-contained content, like illustrations, diagrams, photos, code listings, etc. |
| <footer> | It is used to define a footer for the document or a section |
| <header> | It is used to define a header for the document or a section |
| <main> | It is used to define the main content of a document |
| <mark> | It is used to define marked or highlighted text |
| <menuitem> | It is used to define a command/menu item that the user can invoke from a popup menu |
| <meter> | It is used to define a scalar measurement within a known range (a gauge) |
| <nav> | It is used to define navigation links in the document |
| <progress> | It is used to define the progress of a task |
| <rp> | It is used to define what to show in browsers that do not support ruby annotations |
| <rt> | It is used to define an explanation/pronunciation of characters (for East Asian typography) |
| <ruby> | It is used to define a ruby annotation (for East Asian typography) |
| <section> | It is used to define a section in the document |
| <summary> | It is used to define a visible heading for a <details> element |
| <time> | It is used to define a date/time |
| <wbr> | It is used to define a possible line-break |
You can learn more about HTML5 Semantics.
New Form Elements
| Tag | Description |
|---|---|
| <datalist> | It is used to define pre-defined options for input controls |
| <keygen> | It is used to define a key-pair generator field (for forms) |
| <output> | It is used to define the result of a calculation |
you can study all about old and new form elements in HTML Form Elements.
New Input Types
| New Input Types | New Input Attributes |
|---|---|
|
|
You can study all about old and new input types in HTML Input Types.
You can study all about input attributes in HTML Input Attributes.
HTML5 - New Attribute Syntax
HTML5 gives four different syntaxes for attributes.
This example is used to demonstrate the different syntaxes utilised 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'> |
depending on the need of the attribute, all four syntaxes may be used in HTML%.
HTML5 Graphics
| Tag | Description |
|---|---|
| <canvas> | It is used to define graphic drawing using JavaScript |
| <svg> | It is used to define graphic drawing using SVG |
You can learn more about HTML5 Canvas.
You can learn more about HTML5 SVG.
New Media Elements
| Tag | Description |
|---|---|
| <audio> | It is used to define sound or music content |
| <embed> | It is used to define containers for external applications (like plug-ins) |
| <source> | It is used to define sources for <video> and <audio> |
| <track> | It is used to define tracks for <video> and <audio> |
| <video> | It is used to define video or movie content |
You can learn more about HTML5 Video.
You can learn more about HTML5 Audio.