Heading

A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div>and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <article> - Clearly defines its content.
Because semantic HTML uses elements for their given purpose, it's easier for both people and machines to read and understand it.

Semantics-Elements has meaning.Describes its meaning to browser and developer.
Example-
<article>
<section>
<header>
<footer>
<nav>
<aside>
<time>

Elements has no meaning called non-semantic elements.
Example-
<div>
<span>