<div> do whatever you want - a header, a button, a link. Whatever, right? If it works it works...
No. Don't do that. Please.
<div>s with nowhere to go.
But it's not only people that stand to benefit. Browsers already know how to use particular elements - it's not always necessary to tell them. A
<button> can be triggered by a click, a tap, using the space bar, the enter key or by using some other kind of external command. This ability gets lost by using any other element and it would need to be implemented manually. That's not fun.
Hopefully by now, everyone can agree that HTML is quite important still. Great. Now, let's see what's available to make sure you're using the right tool for the job.
<details> element for example will show and hide content in a collapsible container. That's pretty neat.
For the times where existing elements won't cut it, there's also a nice guide taking a look at custom elements and web components. Use native web features to create new elements that work like any existing ones. There's even a mini tutorial in there to help understand what's going on.
There's also a glimpse into the future with elements that are due to come into browsers in the coming months, like
To help follow along, there's even a site that provides a description and examples of each of the elements highlighted in the article.
To prove how useful the right markup is, it can even be digested using tools like Reader View directly on the page. Nice one.