3 ms·

The mastery to front end development is understanding the semantics of HTML. At every single company I worked for, I had to teach people to stop using div tag

The mastery to front end development is understanding the semantics of HTML. At every single company I worked for, I had to teach people to stop using div tag for everything. You can style things however you want, or even create components that the browser does not allow you to style (as long as you have fallbacks).

jfengel 2y ago
Does HTML even have semantics? You practically can use div for everything, and then use CSS to make it act like whatever component you wanted. You should let the defaults do their job, but they don't do very much. HTML's main semantic is to give things a hierarchical structure. Visually it's a free for all after that
- theandrewbailey 2y ago
  Yes, html has lots of semantic elements. https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html https://developer.mozilla.org/en-US/docs/Glossary/Semantics#...
- neontomo 2y ago
  > but they don't do very much no no no, different elements have different behaviours. for example, a button automatically has accessibility features like being able to tab to it and select with Enter key, which is essential for a screenreader. do that with a div and you end up building the functionality from scratch. if all you care about is the visuals, sure, there's little difference, but once you scratch the surface you will have a poor product by not using the correct elements (where there is a clear "correct" ofc, sometimes it's subjective).
  - agos 2y ago
    it's also essential for keyboard navigation. accessibility is not only for people who have some impairment!
  - sickblastoise 2y ago
    Svelte 5 does a great job of raising warnings for this. You try to use an onclick on a div you get warning to make it tab-able and give it an aria role, and a reccomendation that you should probably be using a button.
alt227 2y ago
> I had to teach people to stop using div tag for everything Can you elaborate a bit on what you mean please?
- deleted 2y ago
  [deleted]
dsego 2y ago
I've seen juniors style divs as buttons, it's disheartening.
- azemetre 2y ago
  I’ve seen seniors do the same thing. The root cause always seem to be the same. Pressure to get things done now. No time in the future to correct things. Possibility of getting fired for falling behind your peers that make the same shortcuts while you attempt to do things better. It’s always an issue with management that doesn’t care about doing things correct. So the incentive to keep your job is always perverse.
paradox460 2y ago
I beat this drum for a while, got ignored, and dropped it. Then an accessibility lawsuit came in and suddenly people were very interested in the semantic meaning behind each tag
rekabis 2y ago
> I had to teach people to stop using div tag for everything. And the crazy nesting of divs 5, 10, or even 15 layers deep. Like… _no._ Just hand your senior card back to the issuer, and go back to being a junior. If you cannot create a simple layout with only 2-3 layers of divs _at most,_ there is something seriously wrong with your front-end skill set.

jfengel 2y ago

Does HTML even have semantics? You practically can use div for everything, and then use CSS to make it act like whatever component you wanted. You should let the defaults do their job, but they don't do very much. HTML's main semantic is to give things a hierarchical structure. Visually it's a free for all after that

theandrewbailey 2y ago
Yes, html has lots of semantic elements. https://developer.mozilla.org/en-US/docs/Glossary/Semantics#semantics_in_html https://developer.mozilla.org/en-US/docs/Glossary/Semantics#...
neontomo 2y ago
> but they don't do very much no no no, different elements have different behaviours. for example, a button automatically has accessibility features like being able to tab to it and select with Enter key, which is essential for a screenreader. do that with a div and you end up building the functionality from scratch. if all you care about is the visuals, sure, there's little difference, but once you scratch the surface you will have a poor product by not using the correct elements (where there is a clear "correct" ofc, sometimes it's subjective).
- agos 2y ago
  it's also essential for keyboard navigation. accessibility is not only for people who have some impairment!
- sickblastoise 2y ago
  Svelte 5 does a great job of raising warnings for this. You try to use an onclick on a div you get warning to make it tab-able and give it an aria role, and a reccomendation that you should probably be using a button.

alt227 2y ago

> I had to teach people to stop using div tag for everything Can you elaborate a bit on what you mean please?

deleted 2y ago
[deleted]

dsego 2y ago

I've seen juniors style divs as buttons, it's disheartening.

azemetre 2y ago
I’ve seen seniors do the same thing. The root cause always seem to be the same. Pressure to get things done now. No time in the future to correct things. Possibility of getting fired for falling behind your peers that make the same shortcuts while you attempt to do things better. It’s always an issue with management that doesn’t care about doing things correct. So the incentive to keep your job is always perverse.

paradox460 2y ago

I beat this drum for a while, got ignored, and dropped it. Then an accessibility lawsuit came in and suddenly people were very interested in the semantic meaning behind each tag

rekabis 2y ago

> I had to teach people to stop using div tag for everything. And the crazy nesting of divs 5, 10, or even 15 layers deep. Like… _no._ Just hand your senior card back to the issuer, and go back to being a junior. If you cannot create a simple layout with only 2-3 layers of divs _at most,_ there is something seriously wrong with your front-end skill set.