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:


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