Home > Others

HTML tags that can be omitted and their practices (this article does not discuss XHTML and XML syntax)

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Original post address: http://moonless.net/demo/optional-tags/

The end tag of Some HTML elements is optional, such:Body,Colgroup,Dd,DT,Head,Html,Li,Optgroup,Option,P,Tbody,TD,Tfoot,Th,Thead,TrAnd so on

These tags do not need to end because in most cases, their end tags are implicitly declared through another tag in the document. For example, in most web pages, a paragraph<P>The following section is usually followed by another section or other block-level labels. the browser ends the current section based on the start label of the next section.

And Image<Colgroup>Such labels can contain or do not contain<Col>Such a specific tag. If<Colgroup>Not included<Col>, Even if you do not write</Colgroup>It will not cause any errors (the number of columns can be defined by the span attribute ).

√ Without the end tag, the page loading speed can be improved.

The biggest advantage of not writing the end tags is that because these tags actually occupy characters, omitting them can make the page size smaller. If you are looking for ways to increase the page loading speed, it is a good start to process these optional end labels. For pages with many paragraphs and tables, this can save a lot of cost.

√ Do not write the end label to avoid the appearance of textnode before and after the element.

According to the white-space processing modelWhite space charactersWhen the Dom is generated, it is ignored or merged according to the rules. The latter will beWhite space charactersMerge into a space, which brings a lot of trouble.

For exampleDisplayIsInline | inline-blockThen, it will be painful to process the space in the process.

× Possible problems caused by not writing the end tag

Here are several important topics:

The write end label is used to constrain the structure.
Although the web page with the ending tag omitted can be quickly loaded, it may become your maintenance burden immediately.
For example, it may be painful to add a new row or column to a table without the end label. Although it can be solved by inserting indentation, it also offsets the work efficiency improved by not writing the end tag.
CSS and JS depend on complete elements
Although most browsers can display and render elements whose labels are not closed, they can take the initiative to close the labels to identify JS and CSS behavior.
If you are using a very precise layout with no end tag, it also means that you have no control over precision and robustness-you have the browser determine the end position of the tag, but sometimes it's great, sometimes it's awesome ......
The end tag cannot be omitted sometimes.
In HTML5, </P>Labels can be omitted when they are directly followed by about 25 elements. But HTML5 contains more than 100 elements. Can you remember every situation where the end tag can be omitted? It may be easier to ignore them.
Optional HTML tags and their constraints

Note 1:The following table, unless otherwise stated,White space charactersInDocument,Before and after nodesBoth exist or ignore

2:"White space characters"Refers to space (U + 0020), tab (U + 0009), line feed (U + 000a), carriage return (U + 000d), and page feed (U + 000c ).

3:In the following table,Element"Indicates the DOM node with nodetype = 1)

Note 1:Omitting the start tag of an element does not mean that the start tag does not exist. It still exists implicitly. For example, an HTML document always has a root HTML element.<HTML>Does not appear in the document .)

NOTE 2:If the start tag contains any attribute definition, the start tag cannot be omitted.

Save tags Omitted premise
<HTML>
  • Its content cannot start with annotations.
</Html>
  • CurrentHtmlAnnotations cannot appear after an element.
<Head>
  • It is empty
  • Its content starts with an element.
</Head>
  • CurrentHeadElement nextsibling cannot be a blank character or comment
<Body>
  • It is empty
  • Its content cannot be blank characters, comments,ScriptElement,StyleElement as the start
</Body>
  • CurrentBodyAnnotations cannot appear after an element.
</LI>
  • In the currentLiThe element following the element isLi
  • CurrentLiThe element is the last child element of the parent element.
</DT>
  • In the currentDTThe element following the element isDTOrDd
  • the elements following the current DD element are DD or dt
  • the current DD element is the last child element of the parent element

  • the elements following the current P element are address , Article , and aside. , BLOCKQUOTE , dir , Div , and DL , fieldset , footer , form , H1 , and h2 , H3 , H4 , H5 , and H6 >, header , hgroup , HR , menu , and nav , ol , P , pre , and section , ul

    Note 5: table is also in the specification, but in fact, its default display is table , and errors are also closed in Some browsers. Therefore, we generally consider that a constraint should be added, that is, the default display label should be block

  • the current P element is the last child element of the parent element, and the parent element cannot be A
</RT>
  • In the currentRTThe element following the element isRTOrRP
  • CurrentRTThe element is the last child element of the parent element.
</Rp>
  • In the currentRPThe element following the element isRTOrRP
  • CurrentRPThe element is the last child element of the parent element.
</Optgroup>
  • In the currentOptgroupThe element following the element isOptgroup
  • CurrentOptgroupThe element is the last child element of the parent element.
</Option>
  • In the currentOptionThe element following the element isOptionOrOptgroup
  • CurrentOptionThe element is the last child element of the parent element.
<Colgroup>
  • It cannot be empty
  • Its content usesColElement is used as the start, and the elements before it cannot omit the end tag.Optgroup.
</Colgroup>
  • CurrentOptgroupElement nextsibling cannot be a blank character or comment
</Thead>
  • In the currentTheadThe element following the element isTbodyOrTfoot
<Tbody>
  • It cannot be empty
  • Its content starts with the tr element, and the element before it cannot omit the end tag.Tbody,Thead,Tfoot.
</Tbody>
  • In the currentTbodyThe element following the element isTbodyOrTfoot
  • CurrentTbodyThe element is the last child element of the parent element.
</Tfoot>
  • In the currentTfootThe element following the element isTbody
  • CurrentTfootThe element is the last child element of the parent element.
</Tr>
  • In the currentTrThe element following the element isTr
  • CurrentTrThe element is the last child element of the parent element.
</TD>
  • In the currentTDThe element following the element isTDOrTh
  • CurrentTDThe element is the last child element of the parent element.
</Th>
  • In the currentThThe element following the element isTDOrTh
  • CurrentThThe element is the last child element of the parent element.
References:

Http://webdesign.about.com/od/htmltags/qt/optional-html-end-tags-when-to-include-them.htm

Http://www.w3.org/TR/html5/syntax.html#optional-tags

Http://www.w3.org/TR/html5/syntax.html#raw-text-elements

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
xml tags and attributes html codes and tags html tags and functions html tags and examples all html tags and attributes html tags and functions pdf what html tags and attributes

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More