Many new elements are added in HTML5 to facilitate some extra functionality to write easy and fast code to create an engaging and effective website.
HTML 5 New Tags:
Some new tags were introduced in HTML 5 to provide a better document structure. These tags are listed below.
Structural or Semantic Tags:
| Tag |
Uses |
| <article> |
It is used to specify a blog, magazine, newspaper article, or any other independent content in a document. |
| <aside> |
Used to indicate that the specified article is somehow related to the rest of the document. |
| <bdi> |
Used for bi-directional isolation, i.e., to isolate a part of a content that is formatted in another direction from the outside text document. |
| <data> |
Used to facilitate a machine-readable version of the data. |
| <details> |
Used to define any additional information on a topic or a summary. |
| <dialog> |
Used to specify a window or a dialog box. |
| <figcaption> |
Used to specify a caption for a <figure> element. |
| <figure> |
Used to specify self-contained content like photos, diagrams, etc. |
| <footer> |
Used to specify a footer for a section. |
| <header> |
Used to specify a header for a section. |
| <main> |
Used to specify the main content of a document. |
| <mark> |
Used to mark or highlight the specified content. |
| <menuitem> |
Used to specify a command that the user can invoke from a popup menu. |
| <meter> |
Used to determine a scalar value within a given range. |
| <nav> |
Used to specify a navigation link in an HTML document. |
| <progress> |
Used to define the progress of a task. |
| <rp> |
Used to specify the content to show in a browser that doesn’t support ruby annotation. |
| <rt> |
Used to indicate an explanation or pronunciation of characters. |
| <ruby> |
Used to specify a ruby annotation along with <rp> and <rt>. |
| <section> |
Used to specify a section in an HTML document. |
| <summary> |
Used to define a visible heading for the HTML <details> element. |
| <time> |
Used to define a date or time. |
| <wbr> |
Used to specify a line break opportunity. |
HTML5 Form Tags:
| Tag |
Uses |
| <datalist> |
Used to facilitate an auto-complete feature for text field. |
| <output> |
Used to specify the output of a calculation or an outcome of the user action. |
Graphics Tags:
| Tag |
Uses |
| <canvas> |
Used to draw canvas in an HTML document. |
| <svg> |
Used to display shapes. |
HTML5 Media Tags:
| Tag |
Uses |
| <audio> |
Used to define an audio file in HTML. |
| <embed> |
Used to specify a container for an external file, application, or media. |
| <source> |
Used to specify multiple media resources for a media element. |
| <track> |
Used to specify the text tracks for an <audio> or a <video> element. |
| <video> |
Used to specify a video file in HTML. |
HTML5 New <input> types:
| Type |
Uses |
| color |
Used to define an input field to indicate a color selector. |
| date |
Used to define an input field to indicate a date selector. |
| datetime |
Used to display date and time along with the time zone information. |
| datetime-local |
Used to display date and time without the time zone information. |
| email |
Used to specify an input field with an email pattern validation property. |
| month |
Used to specify an input field to enter the month for the particular year. |
| number |
Used to specify a field that accepts a numeric value only. |
| range |
Used to create a numeric value selector for a range of 1 to 100. |
| search |
Used to create a search field. |
| tel |
Used to define a control to enter a telephone number. |
| time |
Used to define a control to enter time value with no time zone. |
| url |
Used to define an input field to enter a URL. |
| week |
Used to create a week value selector for a particular year. |