HTML SEMANTIC ELEMENTS

HTML Semantic Elements

HTML elements that express their meaning in a form that is both machine and human readable are known as semantic elements. These components improve the website's SEO (Search Engine Optimisation) and accessibility by outlining the page's structure and content. 

Semantic elements indicate the kind of content they are for instance, the table, header, footer, etc. As will be discussed below, HTML5 adds a number of semantic components that both tell the browser how to handle them and make code easier for developers to write and comprehend. The following are a few of the most often utilised semantic elements:

HTML tags are classified into two types:

• Semantic element:

                Semantic elements and these components expressly define the content of the element.

Example: <form>, <style>, <article> 

• Non Semantic element:

               Non-semantic elements include and which reveal nothing about their content.

Example: <div>, <span>

HTML with Semantic Elements:

Certain semantic components in HTML can be used to define various sections of a web page:

• <header>
• <nav>
• <section>
• <article>
• <aside>
• <footer>
• <main>
• <time>
• <detail>
• <mark>
• <figure>
• <figcaption>

HTML <header> Element:

<header>: Indicates the opening text of a section or page, or a group of links for navigation.

Syntax:

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <ul>
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>
</header>

HTML <nav> Element:

<nav>: A section of a website with links to other pages or areas within the page is designated 

Syntax:

<nav>

    <ul>

        <li><a href="#home">Home</a></li>

        <li><a href="#about">About</a></li>

        <li><a href="#services">Services</a></li>

        <li><a href="#contact">Contact</a></li>

    </ul>

</nav>

HTML <section> Element:

<section>: Describes a segment of a text, like a chapter, or a collection of items with a similar topic.

Syntax:

<section>

    <h2>About Us</h2>

    <p>A company dedicated to providing the best services to our clients.</p>

</section>

HTML <article> Element:

<article>: Denotes a self-contained piece of material, like a blog post or news story, that might be shared on its own.

Syntax:

<article>

    <h2>Latest News</h2>

    <p>Today we launched a new product line...</p>

</article>

 HTML <aside> Element:

<aside>: Defines content that is tangentially related to the content around it, like a sidebar or a call-out box.

Syntax:

<aside>

    <h2>Related Articles</h2>
    <ul>
        <li><a href="#article1">Understanding HTML5</a></li>
        <li><a href="#article2">CSS Grid Layout</a></li>
    </ul>
</aside>

HTML <footer> Element:

<footer>: Represents the footer for its nearest sectioning content or sectioning root element.

Syntax:

<footer>
    <p>&copy; 2024 My Website. All rights reserved.</p>
</footer>

HTML <main>Element:

<main>: Specifies the main content of a document, which should be unique and not contain content that is repeated across pages.

Syntax:

<main>
    <h1>Main Content Area</h1>
    <p>This is where the main content of the webpage goes.</p>
</main>

HTML <time> Element:

<time>: Represents a specific period in time.

Syntax:

<time datetime="2024-05-18">May 18, 2</time>

HTML <detail> Element:

<detail>: The element should be the first child element of the <details> element.

Syntax:

<details>

  <summary>Center</summary>

  <p>Type some content here..</p>

</details>

HTML <mark> Element:

<mark>: Highlights text for reference or relevance.

Syntax:

<p>Don't forget to review the <mark>important points</mark> in the document.</p>

HTML <figure> and <figcaption> Element:

Used for content that is referenced from the main content, like illustrations, diagrams, photos, and code snippets, along with their captions.

Syntax:

<figure>
    <img src="image.jpg" alt="A beautiful scenery">
    <figcaption>Fig.1 - A beautiful scenery</figcaption>
</figure>