这段时间开始重新拾起HTML+CSS，但是毕竟更新了HTML5和CSS3，有很多东西都不一样了，只好重头学起。刚好前段时间帮朋友设计了一个页面，就干脆拿出来练练手，自己写起来。整个页面写完之后，还原度还是非常高的，我挺满意，但是开始做页内锚点的时候出现了一个BUG，找了布布小天使来问，布布看完我的代码之后给出的答案是：全！部！错！

毕竟布布才是F2E，我当然听她的，之前她就替我解决了margin的折叠问题，所以这次她说全部错我也虚心听取。于是她抛出了有关HTML的标签嵌套问题，关于块级元素和内联元素的嵌套问题是有明显的规定的，但是我在之前的教程之中都没有看到关于这一部分的描写。布布给我丢来了一个页面，我表示全英文看不懂。后来终于找到了这个页面http://www.cs.tut.fi/~jkorpela/html/nesting.html，完美的解决了我的困惑，特地贴在下面。

Allowed nesting of elements in HTML 4 (and XHTML 1.0)

Nesting rules for HTML 4.01 Transitional

HTML

• HEAD
  • TITLE (required)
  • SCRIPT, STYLE
    • CDATA
  • ISINDEX, BASE, META, LINK (empty)
  • OBJECT (see content model below)
• BODY
  • INS, DEL (special rules apply)
    • flow
  • flow
    • block
      • P, H1, H2, H3, H4, H5, H6
        • inline
      • UL, OL
        • LI
          • flow
      • DIR, MENU
        • LI
          • inline exluding block
      • DL
        • DT
          • inline
        • DD
          • flow
      • PRE
        • inline excluding IMG, OBJECT, APPLET, BIG, SMALL, SUB, SUP, FONT, BASEFONT
      • DIV, CENTER, BLOCKQUOTE, IFRAME
        • flow
      • NOSCRIPT
        • flow
      • NOFRAMES
        • flow
      • FORM
        • flow excluding an enclosed FORM
      • ISINDEX, HR (empty)
      • TABLE
        • CAPTION
          • inline
        • COLGROUP
          • COL (empty)
        • COL (empty)
        • THEAD, TBODY, TBODY
          • TR
            • TH, TD
              • flow
      • ADDRESS
        • inline
        • P
          • inline
      • FIELDSET
        • #PCDATA
        • flow
        • LEGEND
          • inline
    • inline
      • #PCDATA
      • TT, I, B, U, S, STRIKE, BIG, SMALL, FONT, EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, ABBR, ACRONYM, SUB, SUP, Q, SPAN, BDO
        • inline
      • A
        • inline excluding an enclosed A element
      • OBJECT , APPLET
        • PARAM (empty)
        • flow
      • IMG, BASEFONT, BR (empty)
      • SCRIPT
        • CDATA
      • MAP
        • AREA (empty)
        • block
      • INPUT (empty)
      • SELECT
        • OPTGROUP
          • OPTION
        • OPTION
      • TEXTAREA
      • LABEL
        • LABEL excluding enclosed LABEL
      • BUTTON
        • flow excluding A, INPUT, SELECT, TEXTAREA, LABEL, BUTTON, FORM, ISINDEX, FIELDSET, IFRAME

Nesting rules for HTML 4.01 Frameset

HTML

• HEAD (content model as above)
• FRAMESET
  • FRAMESET (note recursion)
  • FRAME (empty)
  • NOFRAMES
    • BODY (see content model above) excluding NOFRAMES

In HTML 4.01 Frameset, the content model for NOFRAMES applies inside the BODY too, instead of the content model for NOFRAMES in HTML 4.01 Transitional.

The information here is based on the DTDs, basically the transitional DTD , in the 1999-12-24 version of theHTML 4.01 Specification .

Note that XHTML 1.0 is, as its subtitle says, “A Reformulation of HTML 4 in XML 1.0”, so the nesting rules are the same as in HTML 4.01. However, there are the following differences that affect the nesting rules:

• The content of script and style elements is CDATA in HTML 4 but #PCDATA in XHTML.
• In XHTML, a table element may have a tr element as its direct constituent. In HTML 4.01, that’s not allowed, but note that since the start and end tags of a tbody element are omissible in HTML 4.01, this is not a big difference. However, note that when a table element directly contains a tr element, an intervening tbody element is implied by HTML 4.01 rules but not by XHTML rules, and this matters e.g. when you have a style sheet which uses tbody as a selector.

Moreover, some of the restrictions on nesting are expressed differently; due to metalanguage differences, some limitations are described in prose only in the XHTML specification, and this implies that a validator will not catch such violations of the limitations when validating against XHTML DOCTYPE but will catch them when an HTML DOCTYPE is used. See section Differences with HTML 4 in the XHTML 1.0 Specification .

Date of last update: 2001-04-06

Interested in related documents? See a list of documents about WWW written or recommended by me.

Specifically, this document has a sister: Allowed nesting of elements in HTML 4 Strict (and XHTML 1.0 Strict) , which describes the rules for the Strict versions, which include all elements and attributes that have not been deprecated or do not appear in frameset documents.