Semantic markup refers to marking up a document with information about the actual data structure behind the information, rather than styling the document with exclusively visual information.

In the case of HTML, for example, this means using heading tags instead of just changing the size of the font. This allows assistive technology to know that the information is a heading, and correctly communicate that information to users.

Similarly, another example is using heading levels (H1, H2, H3, etc.) in a meaningful way so that it’s possible to know what a main heading is compared to a subheading, rather than communicating this information via visual-only changes like font size or type. Using CSS, it is possible (and a best practice) to use only semantic information (headings, lists, block quotes, emphasis, etc.) in the HTML itself, and then use CSS rules to define the visual styling of these tags.

As a side note, these practices are also considered best-practice for search engine optimization (SEO) purposes. A search engine’s crawlers will attempt to “see” the document itself and identify visual structure but much prefer to engage with semantic markup to understand the context of the document.