What Is Semantic HTML?
HTML 5 provides plenty of elements with implicit semantic meaning. Buttons imply clicking or activation leads to execution of an action. Links imply navigation on a page or between pages and websites.
Almost every modern HTML element provides a specific meaning and should be used accordingly.
Utilize <header> for headers, <footer> for footers,
and importantly, use <nav> for any navigations on your page, not only the main one.
Notable exceptions, elements without any semantic meaning, are: <div> and <span>.
They do not necessarily need to be entirely avoided; instead, they should be used with appropriate role attributes when applicable
and no semantic equivalent exists.
When To Use Semantic HTML
Always use existing HTML tags to convey meaning if appropriate elements exist. In our modern world, there is no downside to using semantic HTML, only advantages.
When Not To Use Semantic HTML
At best, if no semantic element exists for your use case or the function is entirely layout-based, divs and spans are appropriate. When implementing these elements, make sure to apply appropriate roles where possible.
Elements
I would like to point you to an excellent resource, the MDN HTML elements reference, which contains all currently supported elements and their use cases and meanings.
ARIA Roles
It is possible to give and change the semantic meaning of individual HTML elements with the role attribute. Prefer using existing semantic HTML elements over divs and spans with ARIA roles.
Refrain from changing established semantic elements' roles. Do not give an anchor element the role button; rather, use button elements. If no appropriate HTML element exists for a role, do use divs and spans with a role attribute.
A nice list with explanations can be found in this article on ARIA roles.
Examples
on-click Actions
Clickable Span . this is bad practice.
When making a span interactive, which should be avoided, it is necessary to also make it focusable to stay accessible with keyboard navigation.
Of course, it is not yet announced as button, so we need to employ an ARIA role.
Anchor buttons . this is bad practice.
A different way of creating buttons can be achieved with the misuse of an anchor tag. Anchors should be used to navigate pages, not to execute JavaScript!
Button . this is best practice.
Simply using the real button tag allows us to have full accessibility out of the box.