Using HTML elements according to their intended structural meaning and behavior, rather than choosing markup only for visual appearance.
Semantic HTML uses elements according to the meaning and function of the content they represent. A heading, a link and a button have different roles even if CSS makes them look similar. Choosing the appropriate element helps browsers and assistive technologies interpret the page’s structure and interactions.
Appearance alone does not establish meaning. Large bold text is not automatically a heading, and a clickable generic container does not automatically provide the behavior of a native button. Use the element that matches the task, then style it as needed. Generic containers still have legitimate layout uses; the goal is not to eliminate every div.
Semantics should be checked in the actual rendered experience. Templates and scripts can introduce duplicate or misplaced structures, while a visually polished page may have confusing navigation for someone using a keyboard or screen reader. Meaningful markup supports usability but does not by itself guarantee accessibility or search rankings.
Takeaway: Build page structure and controls around their real purpose. Use native elements where appropriate and test that the resulting interface remains understandable beyond its visual styling.
Example
A booking interface uses a real button to open a dialog and a real link to navigate to the pricing page. Both may share a visual style, but their markup reflects the different actions and gives the browser the appropriate behavior.
What to check
Inspect headings, landmarks and controls in the rendered page. Do not use heading tags merely to obtain a font size, and do not assume that adding semantic-looking tags fixes an interaction that still cannot be operated.
For more detail, see MDN semantics.