Explain semantic tags in HTML code example

Example 1: all semantic html tags

<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

Example 2: html semantic

<div></div>
    <span></span>
    <hr> <!-- horizontal rule is a divider -->
    <br> <!-- break make a break line -->
    <sup></sup> <!-- superscript add a notation (upp) -->
    <sub></sub> <!-- subscript add a notation (down) -->
    &lt; <!-- &; is used to print special or reserved character 
    &lt; = “<” and &gt; = “>” -->