Check out example codes for "all semantic html tags". It will help you in understanding the concepts better.
Code Example 1
<article> Defines independent, self-contained content
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer> Defines a footer for a document or section
<header> Specifies a header for a document or section
<main> Specifies the main content of a document
<mark> Defines marked/highlighted text
<nav> Defines navigation links
<section> Defines a section in a document
<summary> Defines a visible heading for a <details> element
<time> Defines a date/time
Code Example 2
These are some of the roughly 100 semantic elements available:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Code Example 3
<!-- Answer to: "what is semantic html" -->
<!--
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.
-->
Learn ReactJs, React Native from akashmittal.com