What is <div> Soup?

<div> Soup is a concept for scoring how semantic a website is. Using a <div> here and there is fine, but when you use it for everything instead of the semantic alternatives, you're making your site harder to use and understand.

Enter a website, generate the report, and see how you did!

How do I fix my score?

Open the generated report and you can see the guidelines. The main criteria is this, the more <div> nesting you lose more points. You won't be penalized for using <div> on their own, but nest them multiple times, and you will start losing points rapidly.

Can I get this as a browser extension?

It actually started as one! Clone this repo locally and load it into your browser as an unpacked extension, I haven't tested it with browsers other than Chromium. If you'd like to help with cross browser testing of the extension, drop an issue and we can talk!

What else can I do to help with soup-ification?

Unlearn using <div> wrappers, prefer a <></> or <Fragment></Fragment> or your chosen frameworks equivalent.

Practice your CSS skills while you're unraveling your soup. Could any of these properties be merged into a single div?

Don't abstract unnecessarily and familiarize yourself HTML and it's semantic elements! Components are your friend, but you don't need <Article> and <ArticleTitle and <ArticleSummary and <ArticleByLine>. Well crafted and thoughtful HTML will convey more to users, fellow developers, and future you. Does this need to be a component with a <div> like this?

<div class="article--wrapper article--wrapper__card">

<article class="card">