Semantic HTML is the practice of using the HTML element whose meaning matches the content. A button is <button>, not <div role="button" tabindex="0" onclick="...">. The page's main content is <main>, navigation is <nav>, an article is <article>. Semantic elements come with the right ARIA roles, keyboard behaviour, focus management, and screen-reader announcement -- for free.
The benefit compounds across audiences: screen readers expose semantic structure as navigable landmarks; search engines extract document outline from heading hierarchy; CSS styling targets element types directly; future maintainers read intent off the markup. A site built on semantic HTML is accessible, indexable, and maintainable by default.
The anti-pattern is "div soup" -- everything is a <div> with classes describing role. This breaks accessibility (no implicit semantics), hurts SEO (no document outline), and forces developers to re-implement keyboard handling for every interactive element.