Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

HTML5 new element


May 03, 2021 HTML5


Table of contents


HTML5 new element

With the update iteration of the HTML version, there are many elements that are changing, and this section will cover some of the new elements in HTML5!

HTML5 new element

HTML 4.01 has changed a lot since 1999, and today, several of the elements in HTML 4.01 have been discarded and these elements have been removed or redefined in HTML5.

In order to better handle today's Internet applications, HTML5 adds many new elements and functions, such as: graphics drawing, multimedia content, better page structure, better form processing, and several api drag-and-drop elements, positioning, including web application cache, storage, network workers, etc.


New elements

Label describe
<canvas> Tag define graphics, such as charts and other images.This tag is based on JavaScript drawing API


New multimedia elements

Label Describe
<audio> Define audio content
<video> Define video (video or movie)
<source> Defining multimedia resources .
<embed> Define embedded content, such as plug-ins.
<track> Specify external text tracks for media such as the .lt;video> and the .lt;audio> elements.


The new form element

Label Describe
<datalist> Define a list of options. Use the input element with the input element to define the possible values for the input.
<keygen> Specifies the key pair generator field used for the form.
<output> Define different types of output, such as the output of a script.

Tip: You can view the form elements used by the full HTML in the HTML Forms section of this site!



New semantic and structural elements

HTML5 provides new elements to create a better page structure:

Label describe
<article> Define the page independent content area.
<aside> Define the contents of the sidebar of the page.
<bdi> Allows you to set a piece of text to leave it from the text direction of its parent element.
<command> Define command buttons, such as radio buttons, check boxes or buttons
<details> Details used to describe a part of a document or document
<dialog> Define dialogs, such as prompts
<summary> Tag contains the title of the Details element
<figure> Specify separate stream contents (images, charts, photos, code, etc.).
<figcaption> 定义 <figure> 元素的标题
<footer> Define the footage of section or document.
<header> Define the head area of the document
<mark> Define text with a mark.
<meter> Define the metric balance.Used only for the metrics known to the maximum and minimum.
<nav> Define the part of the navigation link.
<progress> Define the progress of any type of task.
<ruby> Define Ruby Comments (Chinese Vagadors or Characters).
<rt> Define the interpretation or pronunciation of characters (Chinese phonetic or characters).
<rp> Use in Ruby comments to define the contents displayed by the browser that does not support the Ruby element.
<section> Define the section in the document (section, section).
<time> Define the date or time.
<wbr> It is specified to add a chamber in the text.


The removed element

The following HTML 4.01 elements have been removed in HTML5:

  • <acronym>
  • <applet>
  • <basefont>
  • <big>
  • <center>
  • <dir>
  • <font>
  • <frame>
  • <frameset>
  • <noframes>
  • <strike>
  • <tt>