What is semantic element ?
1 Like
A semantic element in HTML is a tag that gives meaning and context to the content within it. It describes the purpose of the content rather than just its presentation. For example, instead of using a generic <div> tag to create a block of content, you might use the <header>, <footer>, <nav>, or <article> tags to indicate the specific role of the content within the document.
Semantic elements not only improve the readability and organization of HTML code but also provide benefits for accessibility, search engine optimization (SEO), and other applications that rely on understanding the structure and meaning of web content.
Here are some commonly used semantic elements in HTML and their meanings:
<header>: Defines the header section of a document or section
<footer>: Defines the footer section of a document or section
<nav>: Defines a set of navigation links
<article>: Defines an independent, self-contained content section
<section>: Defines a section within a document
<aside>: Defines content that is related to the main content but can be considered separate from it
<main>: Defines the main content section of a document
<figure>: Defines a self-contained content, such as an image, illustration, or diagram, along with a caption
<figcaption>: Defines a caption for a <figure> element
By using semantic elements, you can create HTML documents that are more structured, meaningful, and accessible to a wider range of users and applications.
1 Like
A semantic element clearly describes its meaning to both the browser and the developer .
Examples of non-semantic elements: < div > and < span > - Tells nothing about its content.
Examples of semantic elements: < form > , < table > , and < article > - Clearly defines its content.