Semantic Tags In HTML

This is the Tenth and last part of the HTML course for front-end web development. Starting with HTML is like making a skeleton of a website. and today we will learn, Semantic Tags In HTML . semantic elements in html5 semantic html non semantic tags in html semantic tags examples html tags use of semantic tags in html5 what are semantic markup

Semantic means the meaning of tags which is understood by its spelling

Both the browser and the developer can understand the meaning of a semantic element.

Non-semantic elements include <div> and <span>, which provide no information about the content.

<Form>, <table>, and <article> are examples of semantic components. – Clearly describes its content.

Types of Semantic Tags in HTML

Tag	Description
<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

Also it helps the google bot to understand and navigate the website properly.

<details>
     <summary> Something like dropdown</summary>
     Dropdown sentences here
</details>

Something like dropdown

Dropdown sentences here

Here is the basic example of dropdown elements with semantic tags in html. You can encounter even more in future.

As said this is our last part of html course for front end the main concept and designing the page more beautyfull which uses CSS. So lets move further to learn CSS.

Till now we have learned and made the skeleton of a website but its beauty is its skin and posture means CSS.

IPhone 13 pro features, display, price is not better ?