What are the commonly used grouping elements in html5

Commonly used grouping elements in html5: 1. p element, for paragraph grouping; 2. div element, for general grouping; 3. blockquote element; 4. pre element; 5. hr element; 6. ul, ol, li elements; 7, dl, dt, dd elements; 8, figure and figcaption elements.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

HTML5 common grouping element summary

HTML5 grouping element analysis

1, Create paragraph

##2, General grouping

Because the div itself does not In any sense, in the context of HTML5's strong demand for semantics, div is used as a last resort solution.

3. Define a list item in the list

The attributes are as follows:

value:

This integer attribute indicates the sequence number of this element in the ordered list (defined by the element). The value of this attribute can only be numeric, even if the list is displayed using Roman numerals or letters. Subsequent list entries are counted starting from the set value. The value attribute is not valid for unordered lists () or menus ().

type:

Specifies the type of number.

'a' represents a lowercase letter number;
• 'A' represents an uppercase letter number;
• 'i' represents a lowercase Roman numeral number;
• 'I' represents an uppercase Roman numeral number;
• '1' represents a numeric number (default).

• <ol type="I">
      <li value="3">third item</li>
      <li>fourth item</li>
      <li>fifth item</li>
  </ol>

Output:

III.third item
IV.fourth item
V.fifth item

Define an unordered list

<ul>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li>
</ul>

Output:

 - first item 
 - second item
 - third item

Define ordered list

<ol>
  <li>first item</li>
  <li>second item</li>
  <li>third item</li><
/ol>

Output

 - first item 
 - second item 
 - third item

4、 Generate a description list

## Represents a collection of content.

• Content title.
• Specific content

• <dl>
      <dt>Name</dt>    
      	<dd>Godzilla</dd>
      <dt>Born</dt>
      	<dd>1952</dd>
      <dt>Birthplace</dt>
      	<dd>Japan</dd>
      <dt>Color</dt>
      	<dd>Green</dd>
  </dl>

Output

:

Name
	    Godzilla
Born
	    1952
Birthplace
		Japan
Color
	    Green

5. figure, figcaption

figure represents an independent piece of content, showing referenced pictures, illustrations, tables, code snippets, etc.

• figcaption represents the description of the legend

• <figure>
      <img src="/media/examples/elephant-660-480.jpg"
           alt="Elephant at sunset">
      <figcaption>An elephant at sunset</figcaption>
  </figure>

6, mainEach page can only have one main Element, which represents the theme of this page.

<main>
    <article>
        <h1>自行车越野</h1>
        <p>自行车越野三生三世</p>
    </article>
</main>
<article>
    <h1>经济损失</h1>
    <p>在野外攀爬天然生成的岩壁。。。</p>
</article>

Related recommendations: "

html video tutorial

"

The above is the detailed content of What are the commonly used grouping elements in html5. For more information, please follow other related articles on the PHP Chinese website!