Linting HTML using CSS
You can use the following CSS to lint your HTML. Avoid inline styling: Check to see if a link has no or meaningless href value, and check for empty interactive elements:
You can use the following CSS to lint your HTML.
Avoid inline styling:
*[style] {
border: 5px solid red;
}
Check to see if a link has no or meaningless href value, and check for empty interactive elements:
a:not([href]), a[href="#"], a[href=""], a[href*="javascript:void(0)"], a:empty, button:empty { border: 5px solid red; }
`Check to see if a img has a alt value:
img:not([alt]), img[alt=""] { border: 5px solid red; }
Make sure the document has a language attribute value:
html:not([lang]), html[lang=""] { border: 5px solid red; }
Check the document meta elements for not being set to UTF-8.
meta[charset]:not([charset="UTF-8"])::before { content: " • Bad charset: " attr(charset) " "; display: block; color: red; }
See if its the first element after the opening <head> tag.
meta[charset]:not(:first-child)::after { content: " • Bad charset: not first child"; color: red; }
Check for unaccessible viewport attributes:
meta[name="viewport"][content*="user-scalable=no"]::after, meta[name="viewport"][content*="maximum-scale"]::after, meta[name="viewport"][content*="minimum-scale"]::after { content: " • Bad viewport: " attr(content); color: red; }
Check for attributes in our HTML that are deprecated or no longer needed:
script[type="text/javascript"]::before { content: " • Unnecessary type attribute on script: " attr(type); color: red; }link[rel="stylesheet"][type="text/css"]::before { content: " • Unnecessary type attribute on link: " attr(type); color: red; }
Check for unlabelled form elements, and check to see if any form elements are missing both name and id attributes:
input:not([id]), select:not([id]), textarea:not([id]), input:not([name]), select:not([name]), textarea:not([name]) { border: 5px solid red; }label:not([for]) { border: 5px solid red; }form:not([name]):not([id]) { border: 5px solid red; }
