Details about HTML Tag nesting and details about tag nesting

Details about HTML Tag nesting and details about tag nesting

First, there are two types of HTML tags:

1. Block-level elements

Div, h1 ~ H6, address, blockquote, center, dir, dl, dt, dd, fieldset, form, hr, isindex, menu, noframes, noscript, ol, p, pre, table, ul......

　　Features:Always start on a new line. The height, row height, and top and bottom margins are all controllable. The width defaults to 100% of its container unless a width is set.

　　Function:It is mainly used to build website architecture, page layout, and carry content.

2. Line Element

Span, a, abbr, acronym, B, bdo, big, br, cite, code, dfn, em, font, I, img, input, kbd, label, q, s, samp, select, small, strike, strong, sub, sup, textarea, tt, u, var ......

　　Features:And other elements are on one line. Height, Row Height, top, and bottom margin cannot be changed. width is the width of the text or image and cannot be changed.

　　Function:Used to enhance content display and control details, such as bold and italic.

Although there are many HTML tags, and we can create an infinite number of nested pages, there are also rules for nesting, not arbitrarily nested.

Some labels are fixed nested rules, such as ul containing li, ol containing li, dl containing dt and dd, and many other independent labels. To write better pages, follow the following rules:

1. Block-level elements and block-level elements, and inline elements;

<Div> <span> </span> <p> </div> // span is an internal element, and p is a block-level element, therefore, this is an incorrect nesting <div> <span> </span> <a> </div> // This is the correct nesting.

2. A block-level element can contain inline elements or some block-level elements, but an inline element cannot contain block-level elements. It can only contain other inline elements;

<div><span></span></div><span><span></span></span>

3. Several Special Block-level elements can only contain inline elements, but cannot contain block-level elements;

h1、h2、h3、h4、h5、h6、p、dt

4. Block-level elements cannot be placed in tag p;

5. li labels can contain div labels, because both li and div labels are packed in the content container.

　3. HTML5 New Features

In HTML5, elements are not differentiated by the display attribute, but by the content model:

Metadata content is an element that can be used to describe the performance or behavior of other content, or establish a connection between the current document and other documents;

Sectioning content is an element used to define the title and footer range;

Heading content defines the title of a block/chapter;

Flow content is a majority of elements used in the main parts of applications and documents;

Phrasing content is an element used to mark paragraph-level text;

Embedded content is an element that references or inserts other resources into a document;

Interactive content is an element specifically used to interact with users.

An element does not belong to any category and is called penetrating. An element may belong to more than one category and is called a hybrid element.

Next, we will summarize the nested rules of common labels.

1. subelements of

2.

3. The child element of <a> is transparent (subject to the child element allowed by its parent element), but does not include interactive content)

4. <form> not nested <form>

5. The <button> child element is a statement-type element and cannot be nested with an interactive content element)

6. <caption> not nested <table>

7. <dt>, <th> cannot be nested