With Semantic HTML means using HTML elements according to their meaning, such as <main> for the main content or <nav> for navigation, instead of building everything from generic <div> containers.Open glossary entry → you choose elements by meaning, not by appearance. A link is an <a href>, a button a <button>, a list a real list. Appearance is controlled by Cascading Style Sheets (CSS) is the language used to define the layout and design of web pages. CSS controls colours, fonts, spacing and arrangement, among other things.Open glossary entry →, not by the HyperText Markup Language (HTML) is the markup language for web pages. It defines the structure and content of a page, such as headings, paragraphs, links and images.Open glossary entry →.
Core semantic HTML5 elements are:
<header>and<footer>for header and closing areas,<nav>for navigation,<main>for the unique main content,<article>for standalone content,<section>and<aside>for sections and supplementary content.
A pure "div soup" hampers orientation, accessibility and machine understanding. Semantic HTML is not a guaranteed ranking factor, but it is clean markup that makes main content, navigation and extras clearly distinguishable, for people and machines alike.