What is the purpose of the HTML5 details tag? Introduction to the use of <details> tags (with examples)

What are the functions of the HTML5 details tag and the use of <details> tags? For more details, let's take a look at the definitions and usage instructions for the HTML Details tab in this article, and how to use the HTML5 details tag.

HTML5 <details> Label definitions and instructions for use:

The new <details> tag in HTML5 allows the user to create an expandable component that contains some hidden information for a text or title.

<details> tags are used to describe the details of a document or part of a document.

The <details> tag specifies the supplemental details of the user's visible or hidden needs.

<details> tags are used to enable the user to turn off interactive controls. Any form of content can be placed inside the <details> tag.

The content of the <details> element is not visible to the user unless the Open property is set.

How to use HTML5 <details> tags:

In general, details are used to further explain what is displayed on the page. The effect is similar to the jquery accordion plugin.

Its approximate wording is as follows:

<details><summary>google Nexus 6</summary><p> Product Details:</p><dl><dt> screen </ dt><dd>5.96 "2560x1440 QHD AMOLED display (493 ppi) </dd><dt> battery </dt><dd>3220 mah</ dd><dt> camera </DT><DD>13MP rear-facing with optical image stabilization 2MP front-facing</dd> <dt> processor </dt><dd>qualcomm? Snapdragon? 805 processor</dd></dl></details>

The first is the <details> tag, which is followed by the title <summary>, the contents of which are generally short and summarized, and will be displayed on the page. You can then use any type of HTML element as a detail, which needs to be presented in a click <summary>.

Details is a new interaction element for H5, and details can be used to define a caption for details with the summary tag. By default, the contents of the details tag are not displayed. When the user clicks on the title, the details are displayed.

The appearance of the details tag brings us a better user experience, without having to write JS for the effect of this contraction.

Details has a newly added sub-label--summary, and when the mouse clicks on the content text in the summary tag, all other elements in the Details tab will expand or contract.

HTML5 detalis Label Example 1:

<! DOCTYPE html> 
What if the summary tag does not exist in details, in fact, when the details element does not have a summary tag, the browser will provide a default text when parsing, such as "view Details" such as localized text, The browser also offers an icon such as up and down arrows. For example, the following case 2 is a non-existent summary sub-label Example:

Example 2:

<! DOCTYPE html> 
Sometimes, we need to detalis content in the default to expand the status of what to do?

In fact, HTML5 has already thought for us, if has the aspect demand, we only need to add an attribute, like Case 3.

HTML5 the use of the open property of the Details tab:

Modify the code for Case 1 as follows:

Example 3:

<! DOCTYPE html> 
This shows that HTML5 has indeed brought great convenience for us.

HTML5 use of the general properties of the Details tab of the Details tab:

Open: The value is open, and the function is to define whether details are visible.

Subject: The value is sub_id, which is the ID number of the item to which the element is set.

Draggable: The value is true or false, and the function is to set whether the element can be dragged, and the default value is False.

A Simple details Example:


Currently only Chrome and Safari 6 support <details> tags.

Personally, the details of the label should have more browser support, because it appears, so that beginners to facilitate a lot, now more learning points are always good, and so on after the promotion can be used at will, this article on to here. If you have questions, you can ask questions below.

"Personal Recommendations"

What is the role of HTML em tags? The difference between <em> and <i> labels

HTML5 table Label Style introduction (also attached HTML5 table CSS Center instance)