Semantic markup means choosing elements according to the meaning of the content rather than its appearance. A heading is marked as a heading, a navigation bar as navigation, an article as an article, regardless of how large or what color those things end up looking. The opposite approach is to pick a tag because it happens to produce the visual effect you want, which couples the meaning of the page to one particular rendering.
The HTML specification states the principle directly. It says that “Elements in the DOM represent things; that is, they have intrinsic meaning, also known as semantics.” From this it draws a rule for authors: “Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose, as doing so prevents software from correctly processing the page.” Using a heading element merely to make text big, or a table to lay out a form, violates that rule even if the page looks fine in a browser.
The payoff for honoring semantics is that many different kinds of software can make sense of the same document. A screen reader can announce the headings and let a blind user jump between sections. A search engine can weight a real heading differently from body text. A browser’s reader mode can extract the article and discard the navigation. None of this works reliably if the tags describe only appearance, because appearance is exactly the information those tools are trying to look past.
HTML5 expanded the vocabulary of semantic elements precisely to support this. Where earlier pages wrapped everything in generic containers styled by class names, HTML5 added elements like article, nav, header, footer, section, and aside that carry meaning on their own. Authors were encouraged to use them so that the structure of a page would be legible to machines, not just to a human looking at the rendered result.
Semantic markup is the markup-side complement to the broader idea of separating content from presentation. The semantic elements say what the content is; styling languages such as CSS decide how it looks. Keeping those concerns apart is what lets one well-marked document serve a sighted reader, a screen-reader user, a search crawler, and a printer, all without rewriting the underlying text.