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; }