Semantic Correctness

Semantic correctness means that all elements are chosen well. Semantics are front and center with HTML5, giving meaning to structure of web apps and dynamic web content. This semantic information is critical to assistive technologies. In some cases assistive technologies use semantic information to provide additional functionality. A speech recognition tool might provide a voice command for moving focus to the start of the main element for example. When the appropriate HTML element or attribute is not used, it deprives HTML processors of valuable semantic information. W3C
Why do we need semantics?

Semantics are relied on everywhere around us — we rely on previous experience to tell us what the function of an everyday object is; when we see something, we know what its function will be. So, for example, we expect a red traffic light to mean "stop", and a green traffic light to mean "go". Things can get tricky very quickly if the wrong semantics are applied (Do any countries use red to mean "go"? I hope not.) Read more at HTML text fundamentals (MDN).

In your HTML code, you can mark up sections of content based on their functionality — you can use elements that represent the sections of content unambiguously. Assistive technologies like screenreaders can recognise those elements and help with tasks like "find the main navigation", or "find the main content."

The consequences of not using the right element structure and semantics for the right job fails to give the content structure, so the browser does not know what is a heading and what is a paragraph.

  • Users looking at a web page tend to scan quickly to find relevant content, often just reading the headings to begin with (we usually spend a very short time on a web page). If they can't see anything useful within a few seconds, they'll likely get frustrated and go somewhere else.
  • Search engines indexing your page consider the contents of headings as important keywords for influencing the page's search rankings. Without headings, your page will perform poorly in terms of SEO (Search Engine Optimization).
  • Severely visually impaired people often don't read web pages; they listen to them instead. This is done with software called a screen reader. This software provides ways to get fast access to given text content. Among the various techniques used, they provide an outline of the document by reading out the headings, allowing their users to find the information they need quickly. If headings are not available, they will be forced to listen to the whole document read out loud.
  • To style content with CSS, or make it do interesting things with JavaScript, you need to have elements wrapping the relevant content, so CSS/JavaScript can effectively target it.

We therefore need to give our content structural markup. Read more at Document and website structure (MDN).