HTML Tutorial XHTML Tutorial: HTML markup Nesting Tips

Web page Production WEBJX article introduction: Web Standard-html element nesting.

Let's take a look at the following code:

<ul> <li>

Of course, I'm not going to tell you this code comes from Facebook, do you think the nesting of the above elements is problematic? We're going to discuss this later.

Nesting rules for html4/xhtml

There are nested rules in our impressions:

Inline elements cannot nest block elements <p> elements and

So what exactly is a block element and what is an inline element ?

The following is the definition of block elements and inline elements in the CSS2.1 specification:

block-level Elements is those elements of the source document that is formatted visually as blocks (e.g., Parag raphs). The following values of the ' Display ' property do an element block-level: ' block ', ' List-item ', and ' table '.

inline-level Elements is those elements of the source document that does 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 do an element inline-level: ' inline ', ' inline-table ', and ' Inline-block '. Inline-level elements generate inline-level boxes, which is boxes that participate in an inline formatting cont Ext.

We can understand this: The block elements are generally starting from the new line, inline elements are displayed in a row, we can also through the CSS property display ' inline ' or ' block ' to change the element is an inline element or block elements, of course, this is the CSS in the classification of elements, obviously with The attribute value of ' display ' to classify HTML elements is not rigorous.

If you follow the rules above, then Facebook is a mistake, because he nested elements of elements in the inline element <a> elements <div>, but careful readers should find that the above rules are based on html4/ XHTML1 's strict model, and Facebook is now using HTML5 's doctype, does this rule still apply?

Element nesting rules for HTML5

Nested rules of elements and Page Header declaration of the DTD is inextricably linked, DTD basis please check my previous article "DTD details", then in the latest HTML5 specification is there a new specification for element nesting?

Let us first understand the classification of elements in the latest HTML5 specification:

For example, the classification of an element is no longer classified as a block element or inline element (which is never the case), but is divided by thefollowing categories: Flow (flow Element),Heading(title Element),sectioning (chapter Element),phrasing(paragraph element),Embedded(embedded Element),Interactive(interactive element),Metadata(metadata Element).

Flow(flow Element)

Most of the elements that are used in the body part of the application and document are categorized as streaming elements .

A, abbr, address, area (if it's descended from the map element), article, aside, audio, B, BDI, BDO, blockquote, BR, button, canvas, cite, code, comm And, DataList, Del, details, DFN, Div, Dl,em, embed, fieldset, figure, Footer, form, H1, H2, H3, H4, H5, H6, header, Hgrou P, 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 element has the scoped attribute set), Sub, SUP, SVG, tab Le,textarea, Time, U, UL, Var, video, WBR, text

Heading(title Element)

A header element defines a block/chapter (section), whether it is an explicit element tag that uses a chapter-style content, or a caption that is implied by the title content itself.

H1, H2, H3, H4, H5, H6, Hgroup

sectioning(chapter Element)

A chapter-style element is an element used to define the title and footer range.

Article, aside, NAV, section

phrasing(paragraph element)

The paragraph element is the text in the document and the element that marks the paragraph-level text.

A (if it contains only paragraph elements), abbr, area (if it is descended from the map element), audio, B, BDI, BDO, BR, button, canvas, cite, Code, command, DataList, Del (if it contains only paragraph elements), DFN, EM, embed, I,iframe, IMG, input, INS (if it contains only paragraph elements), KBD, keygen, label, map (if it contains only 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 elements are elements that are referenced or inserted into other resources in the document.

Audio, canvas, embed, iframe, IMG, Math, object, SVG, video

Interactive(interactive Element)

Interactive elements are elements that are designed to interact with the user.

A, audio (if the Controls property is set), button, details, embed, iframe, IMG (If the Usemap property is set), input (if the Type property is not hidden state), keygen, label , menu (if the Type property is toolbar state), object (if the Usemap property is set), select, TextArea, video (if the Controls property is set)

Metadata(Meta data Element)

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

Base,command,link,meta,noscript,script,style,title

There is a cross or overlapping of the categories, which means that in HTML5, the element may belong to one or more of the above categories.

Example (1):

• Categories:
  • Flow content.
  • Heading content.
  • palpable content.
• contexts in which this element can be used:
  • As a child of a hgroup element.
  • Where flow content is expected.
• Content Model:
  • phrasing content.

where "Categories" describes the category of the element, "contexts in whichthis element can be used" explains what scenario the element can be used in, that is, what its parent element is, " The content Modelexplains what the element can contain, because the elements in the page are nested in layers, and an element can be both a parent and a child, so let's use the contentmodel That is, the child elements that can be included for discussion.

So for the H1~H6 element:

• They are also part of the Flow content ,Heading content , and palpable content three categories
• Their parent element can be
• They allow child elements to be paragraph-style 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:

• Flow content , palpable content category
• The parent element must be an element of those child elements that are paragraph-style elements
• Allowed child elements are streaming elements

The elements allowed by the <div> element are streaming elements, which basically cover most of the elements in the page, so we can use <div> without worrying about nesting errors.

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 is no interactive content descendant.

For <a> elements:

• It also belongs to Flow content , phrasing content,Interactive content,palpable content category
• The parent element must be an element of those child elements that are paragraph-style elements
• The allowed child elements are subject to the child elements allowed by its parent element, but cannot contain interactive elements

It's interesting to see the <a> element in this way, allowing the child elements to look at the child elements that the parent element can contain.

Then look at the code mentioned in the beginning of the article

<ul> <li>

At this point, the parent element of <a> is Fcaebook such a nested method is wrong!

Let's make a change to the code:

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

At this point, the parent element of <a> is <div>, and the <div> element allows the child element to be a streaming element, and the flow element contains <div> elements, so in this case the <a> nested <div> is the right way!

Problems that may arise from nested errors

It says that HTML5 's new classification of elements and the use of

Example (1): Start and end tag nesting errors

<div>

Test results:

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

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

Test results:

Example (3): List elements <li> sibling elements for <div>

<ul><li> Content </li><div> Content </div></ul>

Test results:

Example (4):

Test results:

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

<a href= "" ><a href= "" > Content </a></a>

Test results:

Through the above examples, we summarize the following:

• element start and end tag nesting error, the page can be parsed correctly in most browsers, IE9 will appear parsing error
• Embedding <div> elements within the <p> element causes parsing errors for all browsers
• Embed <div> elements within
• Embedding <a> elements within the <a> element causes parsing errors for all browsers
• Inserting non-list sibling elements in list elements <li><dt><dd> etc. causes IE6\IE7 parsing errors

In fact, it is said that parsing errors are not very reasonable, it should be said that the browser parsing results and we expect the results are inconsistent, but any nested errors will not cause the page rendering a great error.

We know that JS code If there is a syntax error, the browser's JS interpreter will refuse to execute and error, and the browser encountered in the syntax of non-conforming HTML code will do everything possible to render it.

Strict nesting constraints, semantic nesting constraints

By the above example we find that nesting <div> elements in <p> elements or <a> elements in <a> elements will cause all browsers to parse errors, which is actually a strict nesting constraint for the web-based specification. Strict nesting constraints must be adhered to, otherwise it will cause parsing errors for all browsers.

Strict nesting of constraint rules:

• Interactive elements cannot be nested within a element (<a>, <button>, <select>, etc.)
• <p> can not nest <div>,
• No more at the moment, some welcome to tell me

Semantic nesting constraints:

Each element basically has its own nested rules (that is, what the parent element can be, what the child element can be), except for strict nesting constraints, some rules are semantic nesting constraints, for semantic nesting constraints, if not adhered to, the page may be normal, but also can parse errors, which is related to the following fault tolerance mechanism.

Browser'sFault tolerance mechanism

Not every student after writing the page to do the legality check, so the browser manufacturers have to let their browser in the most relaxed way to deal with the Web page, each browser kernel has a considerable amount of code dedicated to dealing with those ambiguous html tags and nesting, And guess how the front end wants to render the page, which is the fault-tolerant mechanism of the browser.

This is actually telling us that the HTML code We write out of the web is not in line with the specification may eventually appear no strange, but that is actually a browser of a fault-tolerant mechanism, we have no reason to let oneself with an coding attitude, to treat their own code should be meticulous, Even if HTML5 's mind is broad-minded.

Embracing Web standards

Originally, we thought that from HTML4 to XHTML is an era, now from XHTML to HTML5, new era of the birth of standards, we should open our hearts to embrace, rather than exclusion.

If you are concerned or not concerned, the standard is there and only increases. We should be thankful for an organization that allows browser makers to set new standards with each other's hostility. Otherwise, maybe you'll be like the 90 's, JS referencing an element requires writing a set of your own code for a browser.

Web standards will only make us eat better, sleep more, and new technologies or standards will drive us to passionate coding instead of repeating our work every day.

HTML Tutorial XHTML Tutorial: HTML markup Nesting Tips