What semantic markup means
Semantic HTML means picking the element that matches the meaning of the content, not just how it should look. A button that submits a form is a button element, a navigation block is a nav element, and an article of standalone content is an article element. The browser already knows what these mean, so it hands a lot of behavior to you for free.
- Roles come built in so a button is announced as a button without extra work.
- Keyboard behavior comes built in so a real button responds to Enter and Space.
- Structure becomes navigable so users can jump between headings and regions.
Why it beats generic boxes
A wall of div and span elements carries no meaning. Assistive technology sees only anonymous boxes, so users lose structure, shortcuts, and built in controls. Reaching for the right element first avoids piles of patching later.
- Use heading elements in order to outline the page so users can scan it.
- Use list elements for groups of items so counts are announced.
- Use a real button or link instead of a clickable div so behavior is correct.
When no element fits, you can fall back to a generic box plus a role, but a native element is almost always simpler and more reliable.
Key idea
Reach for the HTML element that matches the meaning of your content first, because native elements give you roles, keyboard behavior, and structure without extra code.