4 ms·
Some CSS libraries suggest not using HTML semantics and just use CSS. So H1 isn't used, rather SPAN with corresponding CSS to make it look like an H1. I guess
by brainless 6y ago
Some CSS libraries suggest not using HTML semantics and just use CSS. So H1 isn't used, rather SPAN with corresponding CSS to make it look like an H1.
I guess this makes things hard for a screen reader since HTML isn't saying what's what anymore.
- enriquto 6y agoIs there a "rationale" for this sort of thing? It seems quite silly to do that, on a first look.
- nargek 6y agoAt the end it looks the "same" for a normal user. Semantics in html is butchered a lot (remember the alignment with tabs ?)
- rimliu 6y agoToo lazy to learn is one of the reasons. Should use framework/lib is the other. Now people think that by not using frameworks you will have messy code and happily create even bigger mess of frameworks rope spaghetti.
- enriquto 6y agoAh, "frameworks rope spaghetti", the best kind of spaghetti!
- jtxx 6y agoI only use spans and divs. header, paragraph, etc elements have intrinsic styles I rarely want, esp wrt margins
- nlightcho 6y agoYou should use a CSS reset stylesheet like https://github.com/necolas/normalize.css https://github.com/necolas/normalize.css instead.
- jtxx 6y agothanks, I didn’t know that was a thing
- onion2k 6y agoEric Meyer wrote a good CSS reset more than 10 years ago. He made an updated version 8 years ago. https://meyerweb.com/eric/tools/css/reset/ https://meyerweb.com/eric/tools/css/reset/
- the_other 6y agoYou need a “style sized solution to a style sized problem”. As the sibling posters have said, you can use reset stylesheets, or write your own. At a deeper level, you have to appreciate that browsers are built around the “separation of concerns”: - html for content - css for layout, look and feel - javascript for behaviour The front-end community has some loud voices at the moment telling us that these are the wrong separations; that the styles for a component go hand-in-hand with their behaviour and semantics. I’m not getting into that debate here. But I do want to say that this newer interpretation of the “concerns” applies to code you write for your application, and is (currently) not how browsers are constructed. It may make more sense for you as a web application developer to structure your code by colocating your layout and behaviour solutions in one file, and in that way you’re more likely to use <div> and <span> over more expressive elements. But that’s not what your users’ browsers are expecting you to do. They’re built around the older separation of concerns. And they’re built to amplify the strengths of the three languages they interpret. So that <div> tells the browser “i want you to treat this content just the same as you treat any other content”, where a <h1> tells the browser “add this content to your document outline, expose it as a section heading to the accessibility tree” as well as reminding it to apply the default styles. Attack the problem (unwanted styles) at the right level of separation (at the styles level).
- jtxx 6y agohey, i really appreciate you breaking down the importance of using the expressive elements. i figured the use of ARIA would mitigate this, but after reviewing the MDN docs I saw > developers should prefer using the correct semantic HTML element over using ARIA so I guess that’s not as reliable. I was unfamiliar with CSS resets as well. will give this all a go
- 9HZZRfNlpR 6y agoCSS reset concept is over 10 years old? I don't see what's the point.
- jtxx 6y agonever heard of it, thanks for putting me onto it. developing for 2~ years
- Grumbledour 6y agoAfter over a decade of discussion about the semantic web and accessibility, after so many best practices and recommendations from experts, it breaks my heart that in 2020 we are back to that.
- the_other 6y agoDon’t use those frameworks: they are not fit for purpose.
- XCSme 6y agoAny examples of such libraries? I always heard that it's only better to use more specific tags if they are available and make semantic sense.