4 ms·

I sympathise with people using HTML "incorrectly" because there's a mismatch between how HTML is designed and what it actually has to do in the wild. Maybe usi

I sympathise with people using HTML "incorrectly" because there's a mismatch between how HTML is designed and what it actually has to do in the wild. Maybe using the "correct" element structure is going to be much more complex in a given situation due to the fact that you've got CSS rules that will be in scope that will style it for another purpose, and you'll have to undo and override all that work bit by bit to get it to match what the designer envisaged in this particular placement. So instead you just use some divs, stick a few generic classes on stuff and get on with your day. The tools are supposed to be the slave of the workman, not the other way round. I'm not saying that all of these are examples of this situation of course!

tannhaeuser 7y ago
Indeed. HTML was designed as simple vocabulary for casual hierarchically structured documents in academia with anchor links and, later, forms. Then it was used for all kinds of online documents and apps as they evolved. To say that the HTML vocabulary hasn't exactly kept pace is an understatement IMO. What has evolved is bolted-on tech such as CSS and JavaScript, and as soon as that happened, HTML evolution was kindof doomed because changes to HTML weren't essential (could be implemented in an ad-hoc way once a Turing-complete language was in the mix). Today, people praise CSS Flexbox and Grid, and they're no doubt a step-up from a practical PoV. But what has really just happened is that another ad-hoc syntax was introduced as a replacement for what previously went into HTML attributes, and worse, a syntax that needed to be able to roundtrip through HTML attributes via quoting and escaping. The notion of "semantic" markup and the HTML-CSS-JS trinity is really an after-the-fact rationalization of this syntax soup accident. From a comp.sci. PoV, there is no rationality and progress in piling up syntaxes over syntaxes with identical purposes, nor in equipping CSS with the power to rearrange element order, insert content, and whatnot, especially since HTML always had adequate typing based on a formal ISO standard (using SGML) whereas CSS lacks this completely.
- code_code 7y ago
  I've only looked at web components casually, but the examples I saw seemed a greater mess than this. Interact DOM components, CSS, slots, JS, private DOM, ... AND plan for late-loading code and resources. ?!
thinkxl 7y ago
Sigh. Basically you want to disregard web standards that have a purpose to be able to "stick generic classes." > there's a mismatch between how HTML is designed and what it actually has to do in the wild. There is an entire HTML spec[1] that explains what specific elements are for. And I agree that is not perfect, but this is what we have and if we at least don't follow it, we will be building even more shitty websites. > Maybe using the "correct" element structure is going to be much more complex in a given situation due to the fact that you've got CSS rules that will be in scope that will style it for another purpose, and you'll have to undo and override all that work bit by bit to get it to match what the designer envisaged in this particular placement. > So instead you just use some divs, stick a few generic classes on stuff and get on with your day. Some "web developers" want to use `div`s instead of `button`s because it takes less CSS to style the former, but what they don't realize is that they are making theirs (the "developer") life easier, but are giving a bad UX to people that use assistive technologies and someone else, guess who? Search engines! Search engines are basically blind entities that only use the keyboard. So, if you use a `div` they will see it as a `div`, they won't see the bunch of classes you added to make it look like a button. So, it's a better good experience and search engine optimization to use semantic HTML. This means if you need a button use a `button`, if you need a link use an `a`, if you need an image that when you click on it it will take you to another page, surround the `img` with an `a` tag and use `aria-label` to announce what clicking on that link will do for the user, e.g., <a href="/learn-semantic-html" aria-title="Visit the learn semantic HTML page"> <img src="/img/surprised-pikachu.jpg" alt="Surprised Pikachu meme"> </a> > The tools are supposed to be the slave of the workman, not the other way round. A good craftsman knows its tools and the best way to use them because each one of them has a purpose. You shouldn't use a screwdriver to hit a nail. [1] https://html.spec.whatwg.org/ https://html.spec.whatwg.org/
- bennyelv 7y ago
  I agree with everything you've said here, but I think we should understand why it happens and build a better solution to it rather than lamenting the fact that people will always try and avoid doing difficult things when those things should be easy. We have a situation where these "correct" elements have different sets of default styles in different browsers and require different sets of styling rules to make them look how the designer wishes in each. If your starting point is that is it any wonder that sites are generally so shitty? A good starting point would be true separation between the semantic and the visual.

tannhaeuser 7y ago

Indeed. HTML was designed as simple vocabulary for casual hierarchically structured documents in academia with anchor links and, later, forms. Then it was used for all kinds of online documents and apps as they evolved. To say that the HTML vocabulary hasn't exactly kept pace is an understatement IMO. What has evolved is bolted-on tech such as CSS and JavaScript, and as soon as that happened, HTML evolution was kindof doomed because changes to HTML weren't essential (could be implemented in an ad-hoc way once a Turing-complete language was in the mix). Today, people praise CSS Flexbox and Grid, and they're no doubt a step-up from a practical PoV. But what has really just happened is that another ad-hoc syntax was introduced as a replacement for what previously went into HTML attributes, and worse, a syntax that needed to be able to roundtrip through HTML attributes via quoting and escaping. The notion of "semantic" markup and the HTML-CSS-JS trinity is really an after-the-fact rationalization of this syntax soup accident. From a comp.sci. PoV, there is no rationality and progress in piling up syntaxes over syntaxes with identical purposes, nor in equipping CSS with the power to rearrange element order, insert content, and whatnot, especially since HTML always had adequate typing based on a formal ISO standard (using SGML) whereas CSS lacks this completely.

code_code 7y ago
I've only looked at web components casually, but the examples I saw seemed a greater mess than this. Interact DOM components, CSS, slots, JS, private DOM, ... AND plan for late-loading code and resources. ?!

thinkxl 7y ago

Sigh. Basically you want to disregard web standards that have a purpose to be able to "stick generic classes." > there's a mismatch between how HTML is designed and what it actually has to do in the wild. There is an entire HTML spec[1] that explains what specific elements are for. And I agree that is not perfect, but this is what we have and if we at least don't follow it, we will be building even more shitty websites. > Maybe using the "correct" element structure is going to be much more complex in a given situation due to the fact that you've got CSS rules that will be in scope that will style it for another purpose, and you'll have to undo and override all that work bit by bit to get it to match what the designer envisaged in this particular placement. > So instead you just use some divs, stick a few generic classes on stuff and get on with your day. Some "web developers" want to use `div`s instead of `button`s because it takes less CSS to style the former, but what they don't realize is that they are making theirs (the "developer") life easier, but are giving a bad UX to people that use assistive technologies and someone else, guess who? Search engines! Search engines are basically blind entities that only use the keyboard. So, if you use a `div` they will see it as a `div`, they won't see the bunch of classes you added to make it look like a button. So, it's a better good experience and search engine optimization to use semantic HTML. This means if you need a button use a `button`, if you need a link use an `a`, if you need an image that when you click on it it will take you to another page, surround the `img` with an `a` tag and use `aria-label` to announce what clicking on that link will do for the user, e.g., <a href="/learn-semantic-html" aria-title="Visit the learn semantic HTML page"> <img src="/img/surprised-pikachu.jpg" alt="Surprised Pikachu meme"> </a> > The tools are supposed to be the slave of the workman, not the other way round. A good craftsman knows its tools and the best way to use them because each one of them has a purpose. You shouldn't use a screwdriver to hit a nail. [1] https://html.spec.whatwg.org/ https://html.spec.whatwg.org/

bennyelv 7y ago
I agree with everything you've said here, but I think we should understand why it happens and build a better solution to it rather than lamenting the fact that people will always try and avoid doing difficult things when those things should be easy. We have a situation where these "correct" elements have different sets of default styles in different browsers and require different sets of styling rules to make them look how the designer wishes in each. If your starting point is that is it any wonder that sites are generally so shitty? A good starting point would be true separation between the semantic and the visual.