HTML5 New Elements
The following table represents all the new elements that have been added or have been reclassified as HTML5. All of the tags have been ordered alphabetically.
Many of these new tags are geared towards a Semantic Web, a Web that is not just understandable by humans but also by machines. The goal being much a more efficient exchange of information.
Tim-Berners-Lee the inventor of the World Wide Web (or at least the protocols responsible for it’s vast explosion — HTML and HTTP) said the following:
“I have a dream for the Web, in which computers become capable of analyzing all the data on the Web – the content, links, and transactions between people and computers. A “Semantic Web“, which makes this possible, has yet to emerge, but when it does, the day-to-day mechanisms of trade, bureaucracy and our daily lives will be handled by machines talking to machines. The “intelligent agents” people have touted for ages will finally materialize.“
| Element | Description | Browsers |
|---|---|---|
| <article> | Specifies the article | |
| <aside> | Specifies an area aside on the html page which is related to the main | |
| <audio> | Specifies sound content on an HTML document | |
| <bdi> | Specifies bi-directional content area | |
| <canvas> | Specifies an area for graphics based canvas | |
| <data> | Specifies an area for machine readable data | |
| <datalist> | Specifies an “auto-complete” dropdown list | |
| <details> | Works in conjunction with <summary> tag, to create an area that expands/contracts on user input | |
| <dialog> | Specifies an area that is interactive, such as popup dialog box. | |
| <embed> | Specifies an embeddable data from external source | |
| <figcaption> | Specifies a caption used in figures. | |
| <figure> | Specifies a area to mark up a picture or image in a document | |
| <footer> | Specifies a footer for a section of the page usually contains details about author, copyright information, etc. | |
| <header> | Specifies a header for a section of the page | |
| <keygen> | Specifies control for key pair generation | |
| <main> | Specifies the main content area of the HTML document | |
| <mark> | Marks or highlights an area of text for reference purposes. | |
| <menu> | Specifies a popup menu | |
| <menuitem> | Specifies the command a user can invoke from a popup menu | |
| <meter> | Specifies the value as a gauge | |
| <nav> | Specifies an area for navigational links | |
| <output> | Specifies some type of output, usually through some calculations | |
| <progress> | Similar to <meter> tag, displays a progress bar | |
| <rb> | Marks the base text component of ruby annotations | |
| <rp> | Used in browsers that do not support ruby annotations | |
| <rt> | Specifies the ruby text component in ruby annotations | |
| <ruby> | Specifies the ruby annotation | |
| <section> | Specifies a section in an HTML5 document | |
| <source> | Specifies one or more media resources for media elements such as <video> and <audio> tags | |
| <summary> | Works in conjunction with <details> tag, to create an area that expands/contracts on user input | |
| <template> | This element is a mechanism for holding client-side content that is not to be rendered when a page is loaded but may subsequently be instantiated during runtime using JavaScript | |
| <time> | Specifies the date and time | |
| <track> | Specifies the text track for audio and video | |
| <video> | Specifies the video content of an HTML document |
Other Related Posts
- HTML5 Introduction
Learn the basics with this easy to follow introduction to HTML5, its features and new elements - HTML5 Elements
This post describes all the new elements that have been introduced to HTML5 with an emphasis on the Semantic Web. - HTML5 Web Forms 2.0
Learn the basics of building HTML5 forms for building web page controls, such as labels, text fields, password fields, hidden fields, radio buttons, checkboxes, fieldsets, legends, reset buttons, and submit buttons.
Please Share Us on Social Media
Leave a Reply