HTML tutorial XHTML Tutorial: HTML Tag nesting skills, xhtml nesting

HTML tutorial XHTML Tutorial: HTML Tag nesting skills, xhtml nesting

Webjx: WEB Standard-HTML element nesting.

 

Let's take a look at the following code:

<Ul> <li>

Of course, I won't tell you that this code comes from FACEBOOK. Do you think there is any problem with the nesting of the above elements? We will discuss this later.

HTML4/XHTML nesting rules

In our impression, there will be such nested rules:

Inline elements cannot be nested with <p> elements and 

So what isBlock Element, What isInline Element?

The following are definitions of block and inline elements in W3C CSS2.1 specifications:

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the ‘display’  property make an element block-level: ‘block’, ‘list-item’, and ‘table’.
Inline-level elements are those elements of the source document that do not form new blocks of content; the content is distributed in lines (e.g., emphasized pieces of text within a paragraph, inline images, etc.). The following values of the ‘display’ property make an element inline-level: ‘inline’, ‘inline-table’, and ‘inline-block’. Inline-level elements generate inline-level boxes, which are boxes that participate in an inline formatting context.

We can understand this as follows: block elements generally start from a new line and inline elements are displayed in a row, we can also change an element to an inline element or block element through the 'inline' or 'block' of the CSS attribute display. Of course, this is the classification of elements in CSS, obviously, it is not rigorous to classify html elements using 'display' attribute values.

According to the above rules, FACEBOOK's practice is a wrong practice, because it embeds a block element in the inline element <a> element <div>, but careful readers should find that the above rule is based on the strict mode of HTML4/xHTML1, and FACEBOOK now uses the doctype of html5. is this rule applicable?

Element nesting rules of HTML5

The nesting rules of elements are closely related to the DTD stated in the page header. For the DTD basics, see my previous article "DTD details". so is there a new standard for element nesting in the latest HTML5 specification?

Let's first take a look at W3C's classification of elements in the latest HTML5 specification:

For example, the classification of an element is no longer classified as a block or Inline element (in fact, it is never classified as follows:Flow(Stream element ),Heading(Title element ),Sectioning(Chapter element ),Phrasing(Paragraph element ),Embedded(Embedded element ),Interactive(Interaction element ),Metadata(Metadata element ).

Flow(Stream element)

Most of the elements used in the main sections of applications and documents are classifiedStream Elements.

A, abbr, address, area (if it is the descendant of the map element), article, aside, audio, B, bdi, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, I, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, s, samp, script, section, select, small, span, strong, style (if the scoped attribute is set for this element ), sub, sup, svg, table, textarea, time, u, ul, var, video, wbr, text

Heading(Title element)

Title ElementDefine the title of a block/section (whether it is clear to use the element tag of the chapter content, or hidden by the title content itself.

h1， h2， h3， h4， h5， h6， hgroup

Sectioning(Unit Element)

Unit ElementIs an element used to define the title and footer range.

article， aside， nav， section

Phrasing(Paragraph element)

Paragraph ElementIs the text in the document, marking paragraph-level text elements.

A (if it only contains Paragraph elements), abbr, area (if it is the descendant of the map element), audio, B, bdi, bdo, br, button, canvas, cite, code, command, datalist, del (if it only contains Paragraph elements), dfn, em, embed, I, iframe, img, input, ins (if it only contains Paragraph elements), kbd, keygen, label, map (if it only contains Paragraph elements), mark, math, meter, noscript, object, output, progress, q, ruby, s, samp, script, select, small, span, strong, sub, sup, svg, textarea, time, u, var, video, wbr, text

Embedded(Embedded element)

Embedded ElementsIt is an element that references or inserts other resources into a document.

audio， canvas， embed， iframe， img， math， object， svg， video

Interactive(Interaction element)

Interactive ElementIs an element specially used for interaction with users.

A, audio (if the controls attribute is set), button, details, embed, iframe, img (if the usemap attribute is set), input (if the type attribute is not in the hidden state ), keygen, label, menu (if the type attribute is in the toolbar state), object (if the usemap attribute is set), select, textarea, and video (if the controls attribute is set)

Metadata(Metadata element)

Metadata ElementIs 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

base，command，link，meta，noscript，script，style，title

Each category may overlap or overlap, which means that in html5, elements may belong to one or more of the preceding categories.

Example (1):

Categories:

• Flow content.
• Heading content.
• Palpable content.

Contexts in which this element can be used:

• As a child of an hgroup element.
• Where flow content is expected.

Content model:

• Phrasing content.

「Categories"Indicates the category of the element ,「Contexts in which this element can be used"It indicates the scenario in which the element can be used, that is, its parent element ,「Content modelThis section describes the content that this element can contain. Because the elements on the page are nested layer by layer, an element may be both a parent element and a child element role 「Content modelThat is, to discuss the child elements that can be included.

So for h1 ~ H6 element:

• They both belongFlow content,Heading contentAndPalpable contentThree Categories
• Their Parent element can be
• The child elements they allow are paragraph elements.

Example (2): <div> element

• Categories:
  • Flow content.
  • Palpable content.
• Contexts in which this element can be used:
  • Where phrasing content is expected.
• Content model:
  • Flow content.

For <div> elements:

• Also belongsFlow content,Palpable contentCategory
• The parent element must be the child element that is a paragraph element.
• The child element is a stream element.

<Div> the child element allowed by the element is a stream element, which basically covers most elements on the page. Therefore, when using <div>, you do not have to worry about nested errors.

However, for Example (3): <a> element

• Categories:
  • Flow content.
  • Phrasing content.
  • Interactive content.
  • Palpable content.
• Contexts in which this element can be used:
  • Where phrasing content is expected.
• Content model:
  • Transparent, but there must be no interactive content descendant.

For <a> elements:

• Also belongsFlow content,Phrasing content,Interactive content,Palpable contentCategory
• The parent element must be the child element that is a paragraph element.
• The allowed child element is based on the child element allowed by its parent element, but cannot contain interactive elements.

In this way, the <a> element is quite interesting. The allowed child element depends on the child element that its parent element can contain.

Let's take a look at the Code mentioned at the beginning of the article.

<Ul> <li>

The parent element of <a> is Nested methods like FCAEBOOK are incorrect!

Let's modify the code:

<Ul> <li> <div> <a href = ""> <div> </a> </div> </li> </ul>

In this case, the parent element of <a> is <div>, and the child element allowed by <div> is a stream element, which contains the <div> element, in this case, nesting in <a> <div> is the correct method!

Nested errors may cause problems

The preceding section describes the new element classification method of HTML5 and ~ Element examples of Example (1): An error occurred while nesting the start and end labels.

<Div>

Test results:

Example (2): <p> element nesting <div> element

<P> <div> content </div> </p>

Test results:

Example (3): The <li> sibling element of the list element is <div>

<Ul> <li> content </li> <div> content </div> </ul>

Test results:

Example (4): <H2> <div> content </div>

Test results:

Example (5): <a> element nesting <a> element

<A href = ""> <a href = ""> content </a>

Test results:

The above example is summarized as follows:

• Element start and end label nesting error. The page can be parsed normally in most browsers, and IE9 will encounter a parsing error.
• Embedding <div> and other elements in <p> elements leads to parsing errors for all browsers.
• In
• Embedding the <a> element in the <a> element will cause parsing errors for all browsers.
• Inserting a non-list sibling element such as <li> <dt> <dd> In the list element may result in an incorrect parsing of IE6 \ IE7.

In fact, the parsing error is not very reasonable here. It should be said that the result parsed by the browser is inconsistent with the expected result, however, any nested error will not cause a huge error in page rendering.

We know that if Javascript code is written with a syntax error, the browser's JS interpreter will reject the execution and report an error, when the browser encounters HTML code that does not conform to the syntax, it will try its best to present it.

Strict nesting and semantic nesting Constraints

Through the above example, we find that the <a> element in the <p> element is nested with the <div> element or the <a> element will cause parsing errors for all browsers, this is actually a strict nesting constraint of W3C specifications. Strict nesting constraints must be observed, otherwise it will lead to resolution Errors for all browsers.

Strictly nested constraint rules:

• Interactive elements (such as <a>, <button>, and <select>) cannot be nested in element)
• <P> it cannot be nested. <div>,
• No more found at the moment. Please let me know.

Semantic nesting constraints:

Each element has its own nesting rules (that is, what a parent element can be and what a child element can be). In addition to strict nesting constraints, some rules are semantic nesting constraints, if semantic nesting constraints are not observed, the page may be normal, but the parsing may be incorrect, which is related to the fault tolerance mechanism described below.

Fault Tolerance Mechanism of browsers

Not every student checks validity after writing the page. Therefore, browser vendors have to make their browsers process webpages as loose as possible, each browser kernel has a considerable amount of Code dedicated to handling vague html tags and nesting, And will guess how the front-end users want to present the web page. This is the browser'sFault Tolerance Mechanism.

This tells us that the HTML code we have written does not comply with W3C specifications and may eventually be displayed. However, it is actually a fault tolerance mechanism of browsers, there is no reason for us to coding ourselves with a casual attitude, so we should be meticulous in our code, even if HTML5 is very broad-minded.

Embrace WEB standards

Originally, we thought that from HTML4 to XHTML was an era, and now we have moved from XHTMLHTML5We should open our minds to embrace the birth of new standards in the new era, rather than to reject them.

If you pay attention to or do not pay attention to the standard, the standard will be there and will only increase or decrease. We should thank W3C for setting new standards together with browser vendors. Otherwise, you may need to write your own code for each element referenced by JS in 1990s.

WEB standards will only make our meals more fragrant and sleep better. New technologies or standards will push us to coding with enthusiasm instead of repeating our work every day.