Mvp.css – build your landing page with only semantic HTML
The trouble with “<i>only</i> semantic HTML” (read: “HTML with no class attributes ever”) is when you try to represent things for which there <i>are</i> no semantic elements defined. I then observe that <i>most</i> projects like this then end up abusing other elements. In this case, the use of <aside> is unequivocally wrong, but <a href="https://github.com/andybrewer/mvp/issues/2" rel="nofollow">https://github.com/andybrewer/mvp/issues/2</a> was closed in the end simply because there was no way to get what was desired without using class or similar. Other things that are also unequivocally semantically incorrect are the button links (a > b, a > i, a > strong, a > em), and raised text notification bubbles (sup).<p>The first rule of web accessibility is that doing nothing is better than doing the wrong thing. <a href="https://www.w3.org/TR/wai-aria-practices/#no_aria_better_bad_aria" rel="nofollow">https://www.w3.org/TR/wai-aria-practices/#no_aria_better_bad...</a> explains a bit.<p>There’s a reason why the class attribute exists. You can also validly use custom elements and attributes, which are approximately any name containing a -.