HTML5 New Elements
The list of new elements added in HTML5 gives a few additional functionalities to build a dynamic and a desirable website. We can create our code in a simple way and much faster with the help of these elements.
Below are the list of new elements added in HTML5 that gives a few additional functionalities to build a dynamic and a desirable website. We can create our code in a simple way and much faster with the help of these elements.
New Elements -
Following table shows the total list of newly added elements with their descriptions.
| Tag | Description |
|---|---|
| <article> | Specifies Article of the html document. Indicates an individual part of text of a document, such as a newspaper article or blog entry. |
| <aside> | Describes content aside from the page content. Indicates a piece of substance that is only marginally linked to the rest of the page. |
| <bdi> | Separates a part of text that might be arranged in a variety of direction from another text outside it. |
| <details> | Specifies additional details that the user can view or hide. Indicates extra information or controls information the client can get on demand. |
| <dialog> | Specifies a dialog box or window or other interactive components. |
| <figcaption> | Describes a caption for <figure> element |
| <figure> | Indicates a piece of self-contained content, normally referenced as a single unit from the main document. |
| <footer> | Indicates a footer for a document or section. Footer can include information about the writer, copyright data, etc. |
| <header> | Specifies the header for a document or section. Indicates a group of introductory or directional aids. |
| <main> | Describes the main content of a document. |
| <mark> | Specifies marked/highlighted text. Indicates a text that is highlighted or marked for reference reasons or due to its significance in an additional context. |
| <meter> | Indicates a scalar measurement within a known range. Example - disc usage in the system. |
| <nav> | Describes Navigation links. Indicates a section of the document intended for navigation. |
| <progress> | Specifies the progress of the task. Indicates a conclusion of a task, such as downloading or when doing a series of costly operations. |
| <rp> | Describes alternative content for the browser which do not support ruby annotations. Specifies what to show in browsers when they do not support ruby annotations. |
| <rt> | Describes a pronunciation/explanation of characters. |
| <ruby> | Specifies ruby annotation. Together with <rp> and <rt> for marking up ruby annotations. |
| <section> | Specifies section in the document. Indicates a generic document or application section. |
| <summary> | Defines a noticeable heading for a <details> element. |
| <time> | Describes a time/date. |
| <wbr> | Represents a probable line-break. |
New Form elements
| <datalist> | Indicates predefined list of options for input controls. |
| <output> | Used as a container element to correspond to the calculation output or result a of client action. |
New <input> types
| Type | Description |
|---|---|
| color | Defines a color picker for the Input element. |
| date | Describes a date picker for the Input element. |
| datetime | Defines complete time and date with time zone information for the Input element. |
| datetime-local | Describes time and date without time zone information for the Input element. |
| Describes email model Confirmation for the Input element. | |
| month | Defines to submit month for the specific year for the Input element. |
| number | Defines Input field which chooses a numeric value only. |
| range | Range describes a numeric value picker with a provided range for the Input element. |
| search | Used to define a search field for the Input element. |
| tel | Identifies a monitor to register a telephone number for the Input element. |
| time | Identifies a monitor to register time value with no time zone for the Input element. |
| url | Identifies to join a URL for the Input element. |
| week | Describes a picker for week value for the specific year for the Input element. |
New input attributes
HTML5 introduces some new attributes to supplement the new input types that web designers frequently require -
| Attribute | Possible Values | Description |
|---|---|---|
| Autocomplete | on off |
A choice to turn off automatic form, end of values for a field. Potential values are “on” and “off”. |
| Autofocus | on off |
Adds the focuses automatically to the field coded with Autofocus as quickly as it has loaded. |
| Form action | URL | Applies for buttons that submit a form (e.g. <input type=”submit”> and <button> elements) that are to ignore the action attribute of the form; For example, if distinct buttons must submit the form to distinct URLs. No other JavaScript to do this! |
| Formenctype | application/x-www-form-urlencoded multipart/form-data text/plain |
Specifically,for buttons that submit a form that are to ignore the form’s stipulated encoding. |
| Formmethod | post get |
Describes the HTTP method for sending form-data to the action URL. This attribute ignores the method attribute of the <form> element. The formmethod attribute can be utilized with type="submit" and type="image". |
| Formnovalidate | formnovalidate | Attach to a submit button to bypass form validation. |
| Formtarget | _blank _self _parent _top |
Applies for buttons that submit a form are to ignore the form’s target attribute. |
| List | datalist_id | Links with a <datalist> element by its id, use its <option> components as ideas. |
| Max | number | Maximum available value for the field that can be placed in. |
| Min | number | Minimum available value for the field that can be placed in. |
| Multiple | multiple | Allows choice of multiple files for <input type=”file”> components, and multiple e-mail addresses divided by a comma. |
| Novalidate | novalidate | Applies only to the <form> component and prevents a form from being validated before submitted. |
| Pattern | regexp | Declaring what pattern must be used for validating a field’s value, in the form of a routine statement. |
| Placeholder | text | Planned to display a hint to conclude what is the input field and what to do with it. The hint is shown in the input field previously when the client enters a value. The placeholder attribute performs with the following input types: url, tel, text, search, email, and password. It should only be used for short descriptions. |
| Readonly | readonly | Specifies the field is read only and nothing to do with it. |
| Required | required | Specifies a field is required to submit the form. |
| Spellcheck | spellcheck | Specifies to understand by the web browser that an input field must spell check the substances. |
| Step | number | Describes the <input> element legal number of intervals. |
New Input Attributes
HTML5 allows four distinct syntaxes for attributes. The following example explains the various syntaxes used in an <input> tag -
| Type | Example |
|---|---|
| Empty | <input type="text" value="America" disabled> |
| Unquoted | <input type="text" value=America> |
| Double-quoted | <input type="text" value="America"> |
| Single-quoted | <input type="text" value='America’> |
All four syntaxes can be used in HTML5 based on what is essential for the attribute.
Graphics elements
| <canvas> | Used to draw animations graphics and visuals through scripting. |
| <svg> | Used to draw scalable vector graphics. |
Media elements
| <audio> | Describes sound/noise content. |
| <embed> | Describes a container for media/application/external(non-html) element or application |
| <source> | Specifies various media sources for the media elements. |
| <track> | Describes text tracks for < video > and < audio > files . |
| <video> | describes video or movie content within HTML document |