HTML Semantic Elements

Semantic elements in HTML are those that clearly describe their meaning in a human- and machine-readable way. These elements not only help to structure your HTML documents but also improve accessibility and SEO.

Why Use Semantic Elements?

Semantic elements provide several benefits:

They improve the readability of your code, making it easier for developers to understand the structure and content of your document.
They enhance accessibility, helping assistive technologies like screen readers to better understand the content and navigate through it.
They improve SEO by providing clear and meaningful context to search engines, which can help improve your site's ranking.

Common Semantic Elements

Element	Description	Example
<header>	Represents a container for introductory content or a set of navigational links.	Try yourself `<header> <h1>Website Header</h1> </header>`
<nav>	Defines a set of navigation links.	Try yourself `<nav> <a href="#home">Home</a> <a href="#about">About</a> <a href="#contact">Contact</a> </nav>`
<main>	Specifies the main content of a document, which should be unique and not include repeated content like sidebars, navigation, etc.	Try yourself `<main> <p>This is the main content of the page.</p> </main>`
<article>	Represents a self-contained piece of content that could be independently distributed or reused, such as a blog post or news article.	Try yourself `<article> <h2>Article Title</h2> <p>Article content goes here.</p> </article>`
<section>	Defines a section in a document, such as a chapter or part of a website.	Try yourself `<section> <h2>About Us</h2> <p>Welcome to our website!</p> </section>`
<footer>	Represents the footer for its nearest sectioning content or sectioning root element, typically containing metadata, links, and copyright information.	Try yourself `<footer> <p>© 2023 Lets coding. All rights reserved.</p> </footer>`
<aside>	Defines content that is tangentially related to the content around it, often used for sidebars, pull quotes, or advertisements.	Try yourself `<aside>Additional information goes here.</aside>`
<figure>	Represents self-contained content, potentially with a caption, and is typically used for images, illustrations, diagrams, etc.	Try yourself `<figure> <img src="/images/common/background.jpeg" alt="An example image"> <figcaption>Figure 1: An example image.</figcaption> </figure>`
<figcaption>	Defines a caption for a <figure> element.	Try yourself `<figcaption>Figure 1: An example image.</figcaption>`

Using Semantic Elements

Here is an example of a simple HTML document using semantic elements:

Try yourself

        
            <header>
    <h1>Welcome to Our Website</h1>
    <nav>
        <a href="#home">Home</a>
        <a href="#about">About</a>
        <a href="#contact">Contact</a>
    </nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>This is the content of the article.</p>
    </article>
    <section>
        <h2>About Us</h2>
        <p>Information about our website.</p>
    </section>
    <aside>
        <p>Related content or advertisements.</p>
    </aside>
</main>
<footer>
    <p>© 2023 Lets Coding. All rights reserved.</p>
</footer>

This example includes a header, navigation, main content, an article, a section, an aside, and a footer, demonstrating how to structure a typical webpage using semantic elements.

Important Notes

Here are some important notes and best practices when using semantic elements:

Use semantic elements wherever possible to provide meaningful structure to your documents.
Avoid using generic elements like <div> and <span> when a semantic element would be more appropriate.
Ensure that each sectioning element has a unique purpose and avoid nesting semantic elements unnecessarily.

HTML BASIC

HTML Semantic Elements

Why Use Semantic Elements?

Common Semantic Elements

Using Semantic Elements

Important Notes