Lint HTML Code With CSS

Preview:

Description:

A CSS-driven HTML linter & validator to debug your HTML code and highlight HTML elements that made common mistakes.

Available linters:

• Inputs and labels without id or for attribute
• Links that have No href, an empty href and a ‘#’ href
• Images without alt attribute
• Forbidden nesting
• Lists that have something other than an <li> inside
• Prevent page load jank and CLS by finding <img>‘s missing height and width attributes
• Elements with a tabindex other than 0 or -1.
• Buttons without type attribute
• Input fields without any label
• Buttons without any label
• Tables without caption
• Headers out of order (i.e. h2 before h1, etc.)
• <picture> elements that don’t contain a webp <source>
• <img> and <iframe>‘s without native lazy loading
• Prevents the absence of lang attribute
• SVG without focusable=false when decorative or hidden
• Mismatched [dir] && [lang]
• SVG without title or aria-label and not considered as decorative
• Unsecure [target=blank]
• Summary must be the first child
• Fieldset where legend isn’t the first child
• No divs inside inline elements
• No headings inside inline <a> tag
• <img> without height and width that will cause cumulative layout shift
• <embeds> or <iframes> without height and width that will cause cumulative layout shift
• Not utilizing srcset for responsive images
• Empty buttons or links without any kind of labeling

How to use it:

Just insert the linthtmlwithcss.min.css into your document and done.

<link rel="stylesheet" href="linthtmlwithcss.min.css" />