Commonly used HTML5 list tags

This time I will bring you the commonly used HTML5 list tags, what are the precautions when using HTML5 list tags, the following is a practical case, let's take a look.

1. Function of list tag

Function: add list semantics to a bunch of data, that is, tell the search engine Tell the browser that this bunch of data is a whole

2. List tag classification:

1. Unordered list unorderd list : Add list semantics to a pile of data, and all the data in the pile of data are in no particular order

Format:

<ul>
    <li>需要显示的条目内容</li>
</ul>

Note: The ul tag adds semantics to the list content It is not about adding small dots; the ul tag and the li tag are a whole and appear together; it is not recommended to include other tags in the ul tag. You can add other tags

to the li tag. Quickly write ul format: ul>li*3 Press the tab key to generate a pair of ul tags, 3 pairs of li tags

The application scenario is news/product list/navigationitems

2. Ordered list:

<ol>
       <li>xxx<li>
  </ol>

3. Definition list definition list:

<dl>
    <dt></dt>
    <dd></dd>
</dl>

dt: definition title definition title

dd: definition description definition description of the title

Application scenario: description information at the bottom of the website; mixed graphics and text

Note: dl, dt, and dd are a whole and appear together. It is recommended to only put dt and dd in dl; one dt may not have a corresponding dd, or it may have multiple dds. It is recommended that one dt corresponds to one dd; when you need to enrich the interface, you can add other tags to the dt and dd tags

I believe you have mastered it after reading the case in this article For more exciting methods, please pay attention to other related articles on the php Chinese website!

Recommended reading:

H5 file asynchronous upload

##Detailed explanation of the use of indexeddb database

H5 drag and drop API for drag and drop sorting

The above is the detailed content of Commonly used HTML5 list tags. For more information, please follow other related articles on the PHP Chinese website!