Semantic elements
Semantics refers to the meaning of a piece of code. It’s about "what purpose or role does that HTML element have", rather than "what does it look like?".
When approaching which markup to use, ask yourself, "What element(s) best describe/represent the data that I'm going to populate?”
MDN
HTML elements mean something. A <p> isn’t just styled like a paragraph, it tells other programs that the text inside really is a paragraph. We saw some semantic elements in the previous lesson, for example the <audio> and <video> tags that allow us to add audio and video content into a web page.
The <div> element is a commonly used tag, however, it is not a semantic HTML element. The <div> tag can be used to contain any type of information. On the other hand, the <header> tag can be used instead of a <div> to contain header information. In like manner, the <footer> element can be used to contain page's footer element at the end of the page. This way, we know exactly what type of information is contained in the element.
Other commonly used semantic HTML elements include the <nav> which is used to hold nagivational links and the <main>, used to encapsulate the main content of a page.
There are lots of kinds of “things” that go on webpages. For many of them, there’s a matching HTML element. Here’s some examples (there’s more than 100!)
List of Semantic Elements
<article><section><nav><footer><aside><details><summary><audio><video><figure><figcaption><aside>