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 tags in HTML
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 hereHere 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 ?
Topic Covered Previously
- Boilerplate of HTML used for web development
- HTML head and tag?
- How to add and link image to other page in HTML
- How to create tables in HTML | Web Development
- To create list in HTML, Ordered and unordered
- HTML Forms | Create forms in HTML
- Inline and Block elements in HTML
- ID and Class in HTML | Front End development
- HTML Entities | Front End development