New HTML5 Tags and Input Types
HTML5 is a markup language used for structuring and presenting content on the World Wide Web. It is the fifth and current version of the HTML standard, and was published in October 2014 by the World Wide Web Consortium (W3C).
HTML5 is a broad and comprehensive standard that defines how to structure and present content on the web. It includes new features such as the ability to play audio and video natively in the browser, improved support for graphics and animations, and new semantic elements for better structure and organization of content.
HTML5 also introduces new APIs (Application Programming Interfaces) that allow web developers to create interactive and dynamic web applications.
List of New HTML5 Tags
These tags include semantic/structural, form, graphics, and media tags.
| Tag | Description |
|---|---|
<article> |
Defines an independent piece of content, such as a blog post or newspaper article |
<aside> |
Defines content that is tangentially related to the content around it, such as a sidebar |
<audio> |
Defines sound content, such as music or audio clips |
<canvas> |
Defines a graphic canvas that can be used to draw graphics using JavaScript |
<command> |
Define a command the user can invoke. |
<datalist> |
Defines a list of options for an input element |
<details> |
Defines additional details that the user can view or hide |
<dialog> |
Defines a dialog box or window |
<embed> |
Define external content |
<figure> |
Defines a piece of self-contained content, such as an illustration or code snippet |
<footer> |
Defines the footer of a page or section |
<header> |
Defines the header of a page or section |
<hgroup> |
Defines a group of headings within an h1 to h6 element |
<main> |
Defines the main content of a page |
<mark> |
Defines marked or highlighted text |
<meter> |
Define data within a certain range |
<nav> |
Defines a section of navigation links |
<output> |
Defines the result of a calculation |
<picture> |
Defines a container for multiple image resources |
<progress> |
Defines the progress of a task |
<rp> |
Provide fall-back parentheses for browsers that do not support display of ruby annotations |
<rt> |
Specifies the ruby text component of a ruby annotation |
<ruby> |
Define supplementary annotations for East Asian character pronunciations |
<section> |
Defines a section in a document |
<source> |
Definepecify multiple media resources for the picture, audio, or video elements. |
<summary> |
Defines a summary or caption for a <details> element |
<template> |
Defines a template to be used with JavaScript’s DOM .content property |
<time> |
Defines a date or time |
<track> |
Define timed text tracks of videos or audio files |
<video> |
Defines video content |
<wbr> |
Represents a word break opportunity |
List of New HTML5 Input Type
Here is a table showing new input types introduced in HTML5:
| Input Type | Description |
|---|---|
<color> |
Allows the user to select a color from a color picker. The value is returned as a hexadecimal color code. |
<date> |
Allows the user to select a date from a calendar. The value is returned in the format “YYYY-MM-DD”. |
<datetime-local> |
Allows the user to select both a date and a time, with timezone information. The value is returned in the format “YYYY-MM-DDTHH:mm:ss.sss” (ISO-8601). |
<email> |
Allows the user to enter one or more email addresses. The value is checked to ensure it is a valid email address. |
<month> |
Allows the user to select a month and a year. The value is returned in the format “YYYY-MM”. |
<number> |
Allows the user to enter a numerical value. The value is checked to ensure it is a valid number. |
<range> |
Allows the user to select a value from a range of values using a slider. The value is returned as a number. |
<search> |
Allows the user to enter a search query. |
<tel> |
Allows the user to enter a telephone number. The value is checked to ensure it is a valid telephone number. |
<time> |
Allows the user to select a time. The value is returned in the format “HH:mm:ss.sss” (ISO-8601). |
<url> |
Allows the user to enter a URL. The value is checked to ensure it is a valid URL. |
<week> |
Allows the user to select a week and a year. The value is returned in the format “YYYY-Www” (ISO-8601). |