Non Semantic Elements:- Traditionally, developers have implemented non-semantic elements with a class attribute to define the structure and express the meaning of content. It tells nothing about its content. The element has no special meaning at all. It represents its children. It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.

 <div> 
 <span>

Example:

<div class="article">
  <div class="header"
        <h1>My blog post</h1>
        <p>An example using divs with classes instead of the new elements.</p>
      </div>
      <!-- ... content ... -->
  </div>

Semantic Elements:- It introduces meaning to the web page rather than just presentation.

<article>         It defines an article in the document
<aside>          It defines content aside from the page content
<bdi>              It defines a part of text that might be formatted in a different direction from other text
<details>        It defines additional details that the user can view or hide
<dialog>         It defines a dialog box or window
<figcaption>   It defines a caption for a <figure> element
<figure>         It defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>         It defines a footer for the document or a section
<header>       It defines a header for the document or a section
<main>          It defines the main content of a document
<mark>          It defines marked or highlighted text
<menuitem>  It defines a menu item that the user can invoke from a popup menu
<meter>         It defines a scalar measurement within a known range
<nav>            It defines navigation links in the document
<progress>       It defines the progress of a task
<rp>               It defines what to show in browsers that do not support ruby annotations
<rt>                It defines an explanation/pronunciation of characters 
<ruby>           It defines a ruby annotation 
<section>      It defines a section in the document
<summary>   It defines a visible heading for a <details> element 
<time>           It defines a date/time
<wbr>            It defines a possible line-break

Example:

 <article>
          <header>
            <h1>My blog post</h1>
            <p>The same article but switched to the new elements.</p>
          </header>
          <!-- ... content ... -->
         </article>