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
>, and <img
> - Clearly defines its content.
Tag Description Use of Semantic HTML:
<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
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