Can a <small> tag be inside an HTML5 heading (i.e. h1, h2, h3, etc...)?
The specs for heading elements:
- http://dev.w3.org/html5/spec/the-h1-h2-h3-h4-h5-and-h6-elements.html#the-h1-h2-h3-h4-h5-and-h6-elements
says that it has phasing content model:
Content model:
Phrasing content.
Looking at the part of the specs for phasing content model:
- http://dev.w3.org/html5/spec/content-models.html#phrasing-content
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:
- Show hidden element inside another element on click
Just in case someone runs into this...
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.
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.
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