Semantic elements = elements with a meaning.

A semantic element clearly describes its meaning to both the browser and the developer. making it easier for search engines to identify and classify the content of a web page.

In HTML each and every element have their own significance but some Elements will not create much impact on UI but makes code efficient and SEO friendly.

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.

Why Use Semantic Tags in HTML?

Semantic tags are essential because they help ensure your page's content is structured in a way that makes sense. If you don't use semantic tags, it can be difficult for people to understand the structure of your page, and they will not show interest in your content .

Semantic Elements in HTML

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer"> to indicate navigation, header, and footer.

In HTML there are some semantic elements that can be used to define different parts of a web page:

HTML Semantic Elements

List of some Semantic Tags in HTML:

<main> — used to determine the page's main content. It allows the search bot to comprehend where the main content exists.
<header> — The <header> element represents a container for introductory content or a set of navigational links. It typically contains the site logo, site title, and main navigation menu.
<nav> — represents website navigation.
The <nav> element is used to define a section of navigation links.

It often contains links to various parts of the website, such as the main menu or navigation bar.

      <nav>
        <a href="/html/">HTML</a> |
        <a href="/css/">CSS</a> |
        <a href="/js/">JavaScript</a> |
        <a href="/jquery/">jQuery</a>
      </nav>

<section> — The <section> element is used to group related content within a document. It helps in organizing content and makes it more meaningful.
A web page could normally be split into sections for introduction, content, and contact information.
<aside>- The <aside> element represents content that is tangentially related to the content around it. It is typically used for sidebars, pull quotes, or advertisements.
<audio> — It helps to add, play, and control audio settings on a web page.
<video> — It helps to add, play, and control the settings of videos on a web page.
<canvas> — It helps create an area where JavaScript can draw further objects, display images, transform them, and change their properties. You can use canvas tags to make drawings, animations, games, etc.
<footer>— It describes the website footer or section, including the document's date, the author's name, contact information, or additional website navigation.

examples:

<head>
        <title>Example</title>
    </head>
    <body>
        <header>
          <h1>Navigate section</h1>
           <ul>
               <li><a href="/home">Home</a></li>
                <li><a href="/about">About</a></li>
               <li><a href="/contact">Contact us</a></li>
             </ul>
        </header>
        <main>
            A place for the website's main content
        </main>
        <footer>
            Footer information, links, etc.
        </footer>
    </body>
</html>

<article> — The <article> element represents a self-contained composition within a document. It can be a magazine or newspaper article, forum post, blog post, user post, or a different independent content unit.
An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.
Examples of where the <article> element can be used:
- Forum posts
- Blog posts
- User comments
- Product cards
- Newspaper articles

The article block can be used anywhere and is autonomous. However, because they are logically connected, the parts inside cannot be detached or repurposed in other parts of the website. And you will get the article's main points if you just pull the first section.

<article>
    <section id=" part 1">
        <!-- first part -->
    </section>
    <section id=" part 2">
        <!-- second part -->
    </section>
    <section id=" part 3">
        <!-- third part -->
    </section>
</article>

The article blocks are independent, allowing for their separation and use elsewhere. If the preceding block is removed, the content inside them will remain unchanged because it is not dependent on it.

Finally, using semantic tags can make your code more readable and maintainable. Semantic tags give your code meaning, which can be helpful when you or someone else is looking at your code in the future.

Conclusion

Using HTML5 semantic tags is a good way to increase the readability and understandability of your web page's code. Semantic tags are useful for search engine optimization (SEO) and accessibility. In this post, we have discussed most of the HTML5 semantic tags and shown you how to use them on your web pages.

Below is a list of some of the semantic elements 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

Day 7 Semantic Elements

Table of contents