The newly added tags in HTML5 can be mainly divided into several categories. The following is expressed and summarized according to the categories.
HTML5 new tag classification
Structural tags
<header>: Defines the header of a document or section.
<nav>: Define navigation links.
<section>: Defines independent sections in the document.
<article>: Defines separate content areas in documents, pages, applications, or websites.
<aside>: Defines the sidebar content of the page.
<footer>: Defines the footer of a document or section.
<main>: Defines the main content of the document.
Multimedia tags
<video>: Define a video or movie.
<audio>: Define audio content.
<source>: Defines media resources for <video> and <audio> elements.
<track>: Defines text tracks for <video> and <audio> elements.
<embed>: Define embedded content, such as plug-ins.
<canvas>: Used to draw graphics on web pages.
Form Tags
<datalist>: Defines a list of options, used in conjunction with the <input> element to provide "autocomplete" functionality.
<output>: Define different types of output, such as the output of a script.
Other tags
<time>: Defines a date or time.
<mark>: Defines the highlighted text.
<progress>: Defines the progress of any type of task.
<meter>: Defines scalar measurements within known ranges or fractional values.
<details>: Define additional details visible or hidden by the user.
<summary>: Defines the visible title of the <details> element.
<figure>: Specify independent streaming content (images, charts, photos, codes, etc.).
<figcaption>: Defines the title (caption) of the <figure> element.
9 unknown page tags in HTML5
1. Figure tag
Figure tag is one of the new tags added in HTML5, representing an independent streaming content (text, image).
When using the figure tag, the content of the tag should be related to the main content; but if deleted, it should not affect the document flow.
Example:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>figureTag usage</title> </head> <body> <p>Guilin，Located in northeastern Guangxi，It is a world-famous tourist destination and historical and cultural city。Located on the west bank of the Li River，Produce osmanthus、Osmanthus trees become famous for their forests。</p> <figure> <p>Guilin山水甲天下</p> <img src="" width="300" height="155" /> </figure> </body> </html>
In the above code, add a text description and picture to the figure tag to form an independent stream unit. Equivalent to a div.
2. figcaption tag
The figcaption tag is located in the figure tag and is used to define the caption of the figure tag. By default, the figcaption tag should be placed in the position of the first or last subtag of the figure tag.
Example:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>figcaptionTag application</title> </head> <body> <p>Shaolin Temple，Located in Songshan, Dengfeng, Zhengzhou City, Henan Province, China，It is the birthplace of Shaolin martial arts。</p> <figure> <figcaption>Shaolin Temple</figcaption> <img src="" width="388" height="296" /> </figure> </body> </html>
As can be seen from the above code, in the figure tag, a "Shaolin Temple" title is added to the figure tag using the figcaption tag.
3. details tag
In HTML5, details tags are mainly used to describe the details of a document or a part.
It is often used with the "summary" tag, which defines the title for the details tag.
When running in the browser, the title is visible, and when the user clicks on the title, the content in the details tag is displayed.
Currently, details tags are only recognized in Chrome browsers.
The following is an example running in the Chrome browser to illustrate the application of the details tag.
Example:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>detailsTag application</title> </head> <body> <details> <summary>Red Flag Canal</summary> <p>Red Flag Canal是20century60Era，The people of Lin County under extremely difficult conditions，Project to the Zhang Forest Construction built from the hillside of Taihang。It is a national key cultural relics protection unit，Called by the world“Artificial Tianhe”，Known internationally as“The Eighth Miracle of the World”。</p> </details> </body> </html>
In Chrome, you can see that the content in the details tag is not displayed by default, only the title in the summary tag is displayed.
Click the title "Red Flag Canal" in the details tag, and the content in the details tag will be automatically displayed.
4. markLabel
Mark tags are mainly used in HTML 5 to define text with tokens. If the user needs to highlight a certain text when editing a text, you can use the mark tag.
Example:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>markLabel</title> </head> <body> <p>today，Good weather， <mark>Feeling</mark> fine！</p> </body> </html>
From the above code, use the mark tag to set the "Mood" text to highlight, and the default background color is yellow.
5. progress tag
In HTML5, the function of the progress tag is to define the progress (process) in operation.
For example, you can use progress tags to display the progress of time-consuming functions in JavaScript.
Common properties of progress tags are introduced as follows:
- max value Defines the completed value.
- value Value Defines the current value of the process.
Example:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>progressTag application</title> </head> <body> The project download progress is： <progress value="20" max="100"> </progress> </body> </html>
In the above code, add a project download progress bar. Define the current completion progress to 20 and the download completion value is 100
6. meter tag
In HTML, meter tags are mainly used to represent known ranges and measurable rank scalars or fractional values, such as disk usage ratio, keyword matching degree, etc.
It should be noted that the meter tag cannot be used to represent any values without a known range, such as weight or height, unless the range of their values has been set.
The meter tag attributes are introduced as follows:
- value represents the current actual value; if no specification is made, the first number in the label will be considered as its current actual value.
- Min The current minimum value; if not specified, it is 0.
- Max The current maximum value; if not specified, it is 1; if the specified maximum value is less than the minimum value, the minimum value will be considered the maximum value.
- Low The current low value zone; must be less than or equal to the max value; if the low value zone number is less than the minimum value, it will be considered the minimum value.
- High Current high value area. Optimum; its range is in the minimum and maximum ranges and can be in the high range.
Example:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>meterTag application</title> </head> <body> <p>11Personal work completion progress in the month：</p> <p>Fu Qiang： <meter value="10" optimum="100" high="90" low="10" max="100" min="0"> </meter> <span> 10% </span> </p> <p>Zhang Hong： <meter value="60" optimum="100" high="90" low="10" max="100" min="0"> </meter> <span> 60% </span> </p> <p>Wang Lin： <meter value="89" optimum="100" high="90" low="10" max="100" min="0"> </meter> <span> 89% </span> </p> </body> </html>
In the above code, the work progress of 3 people is displayed in the form of a progress bar. The maximum completion progress is 100% and the minimum is 0%.
7. menu tag
The menu tag is an old tag re-enabled in HTML 5 and already exists when HTML 2.
It was once abandoned at HTML 4, but was reused in HTML 5 and given new functional meanings.
It is often used in combination with the li list tag to define a list-like menu.
Its commonly used properties and descriptions are as follows:
- autosubmit If true, it will be submitted automatically when the form control changes.
- label Defines a visible label for the menu.
- type defines which type of menu to display, the default value is list.
Example:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>LabelmenuUse</title>
<style type="text/css">
body {
font-size:12px;
}
menu {
padding:0;
margin:0;
display:block;
border: solid 1px #365167;
width:100px
}
menu li {
list-style-type:none;
margin:2px;
height:25px;
width:80px
}
menu li:hover {
border: solid 1px #7DA2CE;
background-color:#CFE3FD
}
</style>
</head>
<body>
<p>Choose your favorite color：</p>
<menu>
<li><input type="checkbox" />red</li>
<li><input type="checkbox" />yellow</li>
<li><input type="checkbox" />green</li>
<li><input type="checkbox" />blue</li>
</menu>
</body>
</html>The above code is an example of selecting a personal favorite color, first add a menu tag to the page, and then add a li list tag to the tag.
Finally, add the css style to realize the effect of displaying the selection of an option in the menu when a user moves the mouse to a certain li tag.
8. Command Tag
Command tag is a new important tag added to HTML 5, which is used to define various types of buttons (including command buttons, single selection buttons, picture buttons) and check boxes.
Use the url attribute of this tag to add images and realize the image button effect;
Common properties of command tags are as follows:
- checked Defines whether it is selected. Only for radio or checkbox types.
- disabled Defines whether command is available.
- icon Defines the url of the image displayed as command.
- label command defines the visible label.
- radiogroup groupname defines the group name to which command belongs. Used only if type is radio.
- type Defines the type of the command. The default is "command".
Command tags can be used in conjunction with menu tags, and the corresponding action will be performed when an option in the menu is clicked.
9. NAV tags
The nav tag is a navigation tag of the page.
Links with navigation properties can be summarized into an area to make the page's tag more semantic.
Example:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>navTag application</title> </head> <body> <nav draggable="true"> <a href=" " rel="external nofollow" >Baidu</a> <a href="" rel="external nofollow" >Sina</a> <a href="" rel="external nofollow" >Google</a> </nav> </body> </html>
In the above code, three links are placed into the nav tag to form an area.
Summarize
These new tags provide more semantic elements for HTML5, making the web page structure clearer, easier to understand and maintain. At the same time, new tags related to multimedia and forms also provide more interactive and multimedia content support for web pages.
This is the end of this article about the 9 unknown page tags added to HTML5. For more information about the 9 commonly used tags added to HTML5, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!