In HTML5 there are lots of new elements are added to provide extra functionality and to create an attractive and dynamic website.
Structural or Semantic Elements:
| Tag | Description |
|---|---|
| <article> | It defines an independent or self-contained content of a document, such as a blog or newspaper article. |
| <aside> | It defines the content which provide information about the main content. |
| <bdi> | It isolates the part of the text which might be formatted in another direction. |
| <details> | It defines additional information that the user can view on demand. |
| <dialog> | It defines a dialog box or window. |
| <figcaption> | It is used to set a caption to the <figure> element in a document. |
| <figure> | It defines self-contained content and typically referenced as a single unit from the main flow of the document. |
| <footer> | It defines the footer section of the webpage. |
| <header> | It defines a header or introductory content for a document. |
| <main> | It defines the main content of the HTML document. |
| <mark> | It defines the text which is highlighted or marked for reference. |
| <meter> | It defines a scalar value within a known range. |
| <nav> | It defines a section of the document that contains navigation links. |
| <progress> | It represents a progress bar that shows completions progress of a task. |
| <rp> | It is used to define alternative content for the browser which does not support ruby annotations. |
| <rt> | It is used to define explanations and pronunciations of characters in ruby annotations. |
| <ruby> | It is used to define ruby annotations (Specifically for Asian language). |
| <section> | It is used to define a section within an HTML document. |
| <summary> | It is used to define a summary for an <details> element which can be clicked to change the state of <details> element. |
| <time> | It is used to define data/time in an HTML document. |
| <wbr> | It is used to define a line break opportunity (Where line break possible). |
New HTML5 Form Elements:
| Tag | Description |
|---|---|
| <datalist> | It is used to define a predefined list for input <option> element. |
| <output> | It is used to represent the output of a calculation or outcome of user action. |
HTML5 Graphics:
| Tag | Description |
|---|---|
| <canvas> | It is used to draw graphics and aminations via scripting. |
| <svg> | It is used to draw scalable vector graphics. |
New HTML5 Media Elements:
| Tag | Description |
|---|---|
| <audio> | It defines sound content. |
| <embed> | It is used to define a container for external files/applications/media. |
| <source> | It is used to define multiple media resources for media elements. |
| <track> | It is used to define text tracks for <audio> and <video> files. |
| <video> | It is used to define video content within an HTML document. |
HTML5 New <input> types:
| Tag | Description |
|---|---|
| color | It specifies an input field which defines a color selector. |
| date | It specifies an input field which defines a date selector. |
| datetime | It is used to define a full date and time display with time zone information. |
| datetime-local | It is used to define date and time without time zone information. |
| It is used to define an input field with email pattern validation. | |
| month | It is used to define the input field to enter month for the particular year. |
| number | It is used to define a field that selects a numeric value only. |
| range | It is used to define a numeric value selector with a given range of 1 to 100. |
| search | It is used to define a search filed. |
| tel | It is used to represent control to enter a telephone number. |
| time | It is used to represent a control to enter time value with no time zone. |
| url | It represents an input field to enter a URL. |
| week | It is used to define a selector for a week value for the particular year. |