Semantic Elements make our html element more readable and more meaningful for the search engine.

Generic Elements: <div>, <span>

Semantic Elements: <article>, <figure>, <mark>, <time> etc.

Article

we use <article> to wrap up any self-contain content like Forum post, comments, Reviews

<article class="article">
  <h1>Heading1</h1>
  <p>
    Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit nemo
  </p>
</article>

Figure

Use a <figure> element to mark up a photo in a document, and a <figcaption> element to define a caption for the photo:

<figure>
  <img src="" alt="" />
  <!-- figure caption under the image -->
  <figcaption>My Coffee this morning</figcaption>
</figure>

Mark

Use a <make> to replace <span class=highlight> to automatically highlight text in yellow.

<!-- 'Lorem' is highlighted in yellow -->
<p><mark>Lorem</mark> ipsum, dolor sit amet consectetur adipisicing elit.</p>

Time

Use a <Time> to specify time to help search engines quickly extract time from the text.

<p>
  <!-- datetime="YYYY-MM-DD 24:HR" -->
  Published
  <time datetime="2021-01-01 17:00">January 1 2022 05:00pm</time>
</p>