28

I'm not sure about the convention regarding headings in HTML5, but I wanted to know if I could add a <small> in a <h3>, like this (this could apply to any tag inside any heading tags):

<h3>Payment details <small>(this is your default card)</small></h3>
TylerH
  • 20,799
  • 66
  • 75
  • 101
Shaoz
  • 10,573
  • 26
  • 72
  • 100

4 Answers4

21

Yes, that markup validates. You can check it yourself on http://validator.w3.org/

Something to be aware of with HTML5 though is a change to the notion of block-level elements: https://developer.mozilla.org/en/HTML/Block-level_elements

Ian Oxley
  • 10,916
  • 6
  • 42
  • 49
7

The specs for heading elements:

says that it has phasing content model:

Content model:
    Phrasing content.

Looking at the part of the specs for phasing content model:

It says this:

Note: Most elements that are categorized as phrasing content can only contain elements that are themselves categorized as phrasing content, not any flow content.

Aside from this, you cannot put heading in another heading - this is from W3C validator:

Error Line 1, Column 23: Heading cannot be a child of another heading.

<!DOCTYPE html><h1><h2></h2></h1>

Although I could not find in the specs where it explicitly says this, there are restrictions that seem rather specific. This can yield to some very odd behavior such as that the above HTML would actually be parsed as

<h1></h1><h2></h2>

e.g. see this SOq for an example of indirect issues it can cause:

Just in case someone runs into this...

Community
  • 1
  • 1
icyrock.com
  • 27,952
  • 4
  • 66
  • 85
  • The section on [phrasing content](http://www.w3.org/TR/html5/dom.html#phrasing-content-1) lists valid elements, which doesn't include h1...h6 – Olaf Dietsche May 13 '14 at 16:36
  • Thanks @OlafDietsche! That is interesting though - the page that lists [h1..h6 elements](http://www.w3.org/TR/html5/sections.html#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements) specifically says that content model is phrasing content. On the other hand, [flow content](http://www.w3.org/TR/html5/dom.html#flow-content-1) specifically includes h1...h6. Looking from the conceptual point, I agree with your comment. – icyrock.com May 15 '14 at 00:56
6

I don't think there's any restriction on this in the spec. Only Void elements cannot have children. See http://dev.w3.org/html5/markup/syntax.html#void-element

Although generally the H1, H2, H3, etc. would be rendered in a single size and for a sub header like your "(this is your default card)" you might use a lower H e.g. H4.

planetjones
  • 12,469
  • 5
  • 50
  • 51
  • 4
    +1 for suggesting the user of a _lower_ heading tag instead of a tag. You could even wrap both heading tags in a
    – Ian Oxley May 05 '11 at 09:27
  • 3
    @planetjones: I don't think that's correct. For instance `

    bla

    bla

    ` does not validate because "a header can't be child of another header".     – RubenGeert Jan 28 '14 at 07:07
1

I don't think there's any restriction on this in the spec. Only void elements cannot have children. See http://dev.w3.org/html5/markup/syntax.html#void-element

A void element is an element whose content model never allows it to have contents under any circumstances. Void elements can have attributes.

The following is a complete list of the void elements in HTML:

area, base, br, col, command, embed, hr, img, input, keygen, link,
meta, param, source, track, wbr

Although generally the h1, h2, h3, etc. would be rendered in a single size. For a sub header like your "(this is your default card)" you might use a smaller header e.g. h4.

RaminS
  • 2,208
  • 4
  • 22
  • 30
automanualrepair ina
  • 11
  • 1
  • How is your answer different from [this answer](https://stackoverflow.com/a/5895142/883303) provided above? It seems as your answer is copy/paste. – Frederik Krautwald Aug 18 '19 at 10:06