HTML5 linting

[thumphries]

As per @russmaxdesign 's suggestion, we can now pretty easily write a linting pass that warns or prevents a range of HTML5 antipatterns.

This could include

• Picking out deprecated or misspelt elements
• Inline elements must not wrap around block level elements
• Terminal block-level elements must not have children (h1 .. h6, p)
• Void elements like img must not have children

Technically, this will probably involve normalising/reducing every template all the way down (which we were planning to do anyway) and applying a set of predicates recursively.

[thumphries]

Russ provided a nice authoritative list:

As per the discussion during todays meeting:

1. inline elements must not wrap around block level elements. This has
nothing to do with visual formatting, but has to do with the semantic
nature of HTML elements

For this reason, elements are defined as either block or inline.
Structurally, there is no inline-block - this is a visual formatting
paradigm.

The only exception - added in HTML 5 - is that the A element is allowed to
wrap around block level elements as long as no child element can receive
focus (ie, no links, no form controls, no buttons etc).

Below is a list of block and inline elements

--------------------
Block level elements
--------------------

ADDRESS
ARTICLE
ASIDE
BLOCKQUOTE
CANVAS
DD
DIV
DL
FIELDSET
FIGCAPTION
FIGURE
FOOTER
FORM
H1
H2
H3
H4
H5
H6
HEADER
HGROUP
HR
NOSCRIPT
OL
OUTPUT
P
PRE
SECTION
TABLE
TFOOT
UL
VIDEO

--------------------
Inline elements
--------------------

A
ABBR
ACRONYM
B
BDI
BDO
BIG
BR
BUTTON
CITE
CODE
DEL
DFN
EM
I
IMG
INPUT
LABEL
MAP
OBJECT
Q
SAMP
SCRIPT
SELECT
SMALL
SPAN
STRIKE
STRONG
SUB
SUP
TEXTAREA
TT
VAR

--------------------
Terminal block level elements
--------------------

Generally speaking, block level elements can contain an unlimited number
child block level elements. For example, a DIV element can contain multiple
child DIV elements.

however, some block level elements are defined as "Terminal block level
elements". This means that these elements form a terminal node and they
cannot contain other block level elements.
These include:

H1
H2
H3
H4
H5
H6
P

Several elements that were previously considered to be terminal elements
have become non-terminal elements in HTML 5 including:

ADDRESS
CAPTION
DT

HTH
Russ