What is semantic HTML? What are their advantages? [Resolved]

A semantic element clearly describes its meaning to both the browser and the developer.Semantic HTML or semantic markup is HTML that introduces 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 people know what a “paragraph” is and browsers know how to display them. In HTML4* tags like <b> and <i> are not semantic, because they define only how the text should look (bold or italic) and do not provide any meaning to the text.

Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.

Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.

Tag 	        Description  
<article>	Defines an article
<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

Use of Semantic HTML:
With HTML4, developers used their own favorite attribute names to style page elements: header, top, bottom, footer, menu, navigation, main, container, content, article, sidebar, topnav, ------> This made it impossible for search engines to identify the correct web page content.

With HTML5 elements like: <header> <footer> <nav> <section> <article>, this will become easier.

Semantic HTML "Allows data to be shared and reused across applications, enterprises, and communities ."

Amatya, if this helps please login to Mark As Answer. | Alert Moderator

Semantic elements
Semantic elements defines about parts of webpage by using <header>, <footer>, <section>, <article>,<aside>, <main>, <summary>, <mark> etc

Amatya, if this helps please login to Mark As Answer. | Alert Moderator

Html is a tag based languages.For every action we are using tag.In these some tag name itself describe the use of this inside the web page like.
<form>
<table>
<img>
some of HTML5 tage are-
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
Thus these tags which describe its role by its name is called scemantic tags or Semantic elements.

Debendra Dash

Amatya, if this helps please login to Mark As Answer. | Alert Moderator