Semantic is the study of any language and it's interpretation. For computer language word semantic is used in communicating and in HTML these are the tags that are used in a mark up document. for example h1, h2, h3, h4, h4 and h6 tag are used for headings which tells the browser that the text is a heading.

Markup is a way of creating web documents, or when we write a document using the language available to us.

Semantic HTML or semantic markup is the HTML that brings meaning to the web page rather than just presentation.
For example, a <p> tag indicates that the enclosed text is a paragraph. This is both semantic and presentational, because we know what is a paragraph and browsers know how to display them. In HTML4 tags like <b> and <i> are not semantic, because they only define how the text should look and do not provide any meaning to the text. When we add semantic tags to our documents, we provides additional information about our document.

Here are some Semantic HTML tags:

   <abbr>         defines Abbreviation
   <acronym>      defines an Acronym
   <address>      defines Address for author(s) of the document
   <article>      defines an article
   <aside>        defines content aside from the page content
   <blockquote>   defines Long quotation
   <cite>         Citation
   <code>         Code reference
   <dfn>          definition
   <details>      defines additional details that the user can view or hide
   <del>          deleted text
   <div>          Logical division
   <em>           Emphasis
   <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
   <ins>          Inserted text
   <span>          Generic inline style container
   <strong>      Strong emphasis
   <tt>          Teletype text
   <h1>          First level headline
   <h2>          Second level headline
   <h3>          Third level headline
   <h4>          Fourth level headline
   <h5>          Fifth level headline
   <h6>          Sixth level headline
   <hr>          Thematic break
   <kbd>          Text to be entered by the user
   <pre>          Pre-formatted text
   <q>            Short inline quotation
   <samp>          Sample output
   <sub>          Subscript
   <sup>            Superscript
   <var>           Variable or user defined text
   <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

The importance of semantics:

• It is more accessible to the user seeing the document in an environment where CSS cannot be applied.

• It is understandable to read with the help of a screen reader.

• It will help to get a better search engine ranking,

• It is easier for web developers to maintain the code, and to separate content (HTML) from presentation (CSS). In most cases, there will be less code, which is not disarranged by formatting, means that the web page will be faster to load.