• Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools
w3tweaks.com
Home HTML

HTML Semantic Elements

HTML Semantic Elements: What They Are and Why They Matter

October 27, 2022
in HTML

Table of Contents

  • 1. What are HTML Semantic Elements?
  • 2. Why Use Semantic Elements?
  • 3. How to Use Semantic Elements?
  • 4. Semantic Elements in Practice
  • 5. Conclusion

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.

You might also like

Why Multi Page Form HTML is Better than Single Page Forms

The Benefits of Using Multi Step Forms in HTML

HTML media tags

HTML Group headings

6 HTML Headings Every Blogger Should Know

HTML Favicon

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: htmlSemantic Elements
Previous Post

HTML Favicon

Next Post

8 Design Tools for Creating Amazing Websites

Related Stories

Why Multi Page Form HTML is Better than Single Page Forms
HTML

Why Multi Page Form HTML is Better than Single Page Forms

February 28, 2023
The Benefits of Using Multi Step Forms in HTML
HTML

The Benefits of Using Multi Step Forms in HTML

February 15, 2023
HTML media tags
HTML

HTML media tags

February 9, 2023
HTML Group headings
HTML

HTML Group headings

November 22, 2022
HTML Headings h1 to h6
HTML

6 HTML Headings Every Blogger Should Know

November 22, 2022
HTML Favicon
HTML

HTML Favicon

October 26, 2022
Next Post
Design Tools for Creating Amazing Websites

8 Design Tools for Creating Amazing Websites

Discussion about this post

You might also like

CSS Cards

100 Creative CSS Cards

November 13, 2022
Multi step html form

44 Free Multi step HTML forms

March 7, 2023
CSS & HTML Dashboard Templates

13 Free HTML & CSS Dashboard Template Designs

December 29, 2021
49 CSS Tables

49 CSS Tables

November 13, 2019
HTML & CSS pricing tables

20 HTML & CSS pricing tables

May 2, 2020
CSS Dark Mode

14 Best CSS Dark Mode

October 13, 2021
w3tweaks

Unleash your front-end development potential by exploring the ultimate collection of UI designs and patterns, and play with them to create stunning websites through our tutorials.

Tags

Angularjs AngularJS Tutorials animation animation examples Button button hover effect Buttons Calendar calendars cards click buttons CSS css3 css buttons css calendar css calendars css effects css hover effects demo effect effects essentials forms free Free Tool hover hover animation Hover effects html inputs Javascript jquery js learn loaders menu mouse hover effects navigation php script text effects tool tutorial tutorials YouTube

Stay Connected

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Script
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
  • Tools

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
x
x