In this topic, we described about the below sections -
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.
|<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
|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 -
|A choice to turn off automatic form, end of values for a field.
Potential values are “on” and “off”.
|Adds the focuses automatically to the field coded with Autofocus as quickly as it has loaded.|
|Specifically,for buttons that submit a form that are to ignore the form’s stipulated encoding.|
|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.|
|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 -
|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.
|<canvas>||Used to draw animations graphics and visuals through scripting.|
|<svg>||Used to draw scalable vector graphics.|
|<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|