HTML Semantic Elements

In this blog post, we will be discussing HTML Semantic Elements. Semantic elements are those that give meaning to the structure of a web page. Semantic elements are those that clearly describe their meaning in a human and machine-readable way.

In this blog post, we’ll discuss why you should use HTML semantic elements, and how they can improve your website.

HTML Group headings

November 22, 2022

6 HTML Headings Every Blogger Should Know

November 22, 2022

01
of 05
What are HTML Semantic Elements?

If you’re in the SEO game, then you know that HTML Semantic Elements are important. But what exactly are they? In a nutshell, Semantic Elements are HTML tags that give meaning to the structure of a web page.

For example, the tag indicates the footer of a document or section, while the tag contains information about the author, copyright information, or contact information.

So if you’re not already using Semantic Elements on your website, now is the time to start! Please find the elemets below

<header>

The HTML <header> element represents introductory content, typically a group of heading elements. It may contain some heading elements but also other elements like logo, authorship information, and search form.

<footer>

The HTML <footer> element defines a footer for a document or section. An element typically contains information about its containing element such as who wrote it, links to related documents, copyright information, and the like.

<section>

The <section> element is used to group together related content on a page. This can be used to create sections of content, such as a newsfeed or a series of articles. The <section> element can also be used to create more complex page layouts, such as a sidebar or a grid. The <section> element is a block-level element, which means that it can take up its own line on a page.

<article>

The <article> element is used to represent a self-contained piece of content. This could be a blog post, a forum post, a news article, or anything else that can stand on its own.

<nav>

The <nav> element is a semantic element. This means that it gives meaning to the code. The <nav> element is used to create a navigation bar. Navigation bars are used to provide links to other pages on the website.

<aside>

The <aside> element is a good way to provide additional information to the reader without interrupting the flow of the main content. It is also a good way to keep the page organized and to make sure that the most important information is always front and center.

02
of 05
Why Use Semantic Elements?

If you’re building a website, you’ll want to use HTML semantic elements to help structure your content. Semantic elements give meaning to your content, making it easier for both humans and machines to understand. Using Semantic Elements can help search engines better understand the content of your web pages, which can in turn lead to better search engine rankings.

03
of 05
How to Use Semantic Elements?

If you’re new to HTML, or even if you’re not, you may be wondering what HTML semantic elements are and how to use them. Semantic elements are elements with a meaning.

Before Semantic elements

We often just use divs to create divisions on our webpage.

<body>
    <div>w3tweaks.com</div>
    <div>
        <a href="/about">About</a>
        <a href="/projects">Projects</a>
        <a href="/blog">Blog</a>
    </div>
    <div>
        <div>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
            </p>
        </div>
    </div>
    <div>Copyright © 2022 w3tweaks</div>
</body>

After Semantic elements

Now, let’s replace all div’s with semantic elements

<body>
    <header>w3tweaks.com</header>
    <nav>
        <a href="/about">About</a>
        <a href="/projects">Projects</a>
        <a href="/blog">Blog</a>
    </nav>
    <section>
        <article>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
            </p>
        </article>
    </section>
    <footer>Copyright © 2022 w3tweaks.com</footer>
</body>

04
of 05
Semantic Elements in Practice

See the Pen Semantic Elements – complete example by W3Cx (@w3devcampus) on CodePen.

05
of 05
Conclusion

Using Semantic Elements makes for more accessible web pages, as the meaning of the content is conveyed regardless of how it is styled. This is especially important for users of assistive technologies, such as screen readers, who rely on the structure of a page to understand its content.

Tags: html Semantic Elements

HTML Semantic Elements