Lint your HTML with CSS

html-lint.css

/* Headers out of order (i.e. h2 before h1, etc.) */
h2 ~ h1,
h3 ~ h1,
h4 ~ h1,
h5 ~ h1,
h6 ~ h1,
h3 ~ h2:first-of-type,
h4 ~ h2:first-of-type,
h5 ~ h2:first-of-type,
h6 ~ h2:first-of-type,
h4 ~ h3:first-of-type,
h5 ~ h3:first-of-type,
h6 ~ h3:first-of-type,
h5 ~ h4:first-of-type,
h6 ~ h4:first-of-type,
h6 ~ h5:first-of-type {
  outline: 2px solid red;
}


/* Images should have an alt attribute */
img:not([alt]) {
  outline: 2px solid red;
}


/* Ensure any lists only contain `li`s as children. */
ul > *:not(li),
ol > *:not(li) {
  outline: 2px solid red;
}


/* Forms require `action` attributes */
form:not([action]){
    outline: 2px solid red;
}


/**
 * Various form-field types have required attributes. `input`s need `type`
 * attributes, `textarea`s need `rows` and `cols` attributes and submit buttons
 * need a `value` attribute.
 */
textarea,
input{
    outline:5px solid red;
}
input[type]{
    outline:none;
}
textarea[rows][cols]{
    outline:none;
}
input[type=submit]{
    outline:5px solid red;
}
input[type=submit][value]{
    outline:none;
}


/* Definition lists should only contain DT and DD elements */
dl > * {
    outline:5px solid red;
}
dl > dt,
dl > dd {
    outline:none;
}


/* Double-check any links whose `href` is something questionable. */
a[href="#"],
a[href*="javascript"]{
    outline:5px solid yellow;
}


/* Double-check any links whose `href` missing or empty */
a[href=""],
a:not([href]){
    outline:5px solid red;
}

Check out these resources:

• https://github.com/nternetinspired/debug-css/blob/master/debug.css
• https://github.com/imbrianj/debugCSS/blob/master/debugCSS.css
• https://twitter.com/alexanderadam__/status/1274982660666986496
• https://twitter.com/Una/status/1277657662432391168