Introduction

Programmers began to utilize a common “non-semantic” tag like

, they would frequently assign the div a class or id attribute to define their function. For example, instead of , this was frequently written as div class=”section”>.

As a programmer, the use of div tags is not required all the time, make use of semantic HTML tags to improve the structure and usability of your website.

In this article, I will tell you how you can make your website stand out with the Semantic tags I will be explaining below.

Let us get started!

What are Semantic HTML Tags?

Semantic HTML is the syntax that makes HTML more understandable by properly describing the various sections and structures of your web pages. It improves the informativeness and adaptability of online pages, helping browsers and search engines to better comprehend content.

Semantic HTML tags aid in the structure and organisation of your code, ensuring that everyone is on the same page.

Before the advent of semantic HTML, developers used divs to structure things. But as of today, semantic HTML tags make sense to search engines, users, developers, and those with impairments.

What are Divs?

In HTML, the div tag is used to create sections for content such as text, graphics, headers, footers, and navigation bars. The div tag has an opening

and closing tag and the closing tag is required. The Div element is the most useful in web development because it allows us to divide out the material on a web page and create specific sections for different types of information or functions.

 Hello there 

Why Are Sematic HTML Important?

Below is a list of popular semantic HTML tags you might want to try in your next project, stating how each of them is important to your website.

1. Since it provides details about the title and heading of the
   relevant material, the HTML “header” element is used to
   establish the header for a page or section.

It typically contains the site’s logo, navigation, and page
title. It is the section at the top of a website.

Note that, you can change the header to meet your requirements.

Below is a syntax

    

     
This is my navigation part of my current website
      

1. This element denotes a part of your HTML code that provides
   navigation links, either within the website, you are working
   on.

Examples of these include menus, tables of contents, and
indexes. The nav tag commonly includes it.

Below is the syntax.

    

     
This is my navigation part of my current website
      

1. The HTML article tag is used to represent an article. It is one
   of the new sectioning elements in HTML5. For example, you can
   use them to organise blog posts, magazines, product cards,
   forum posts, magazine or newspaper articles, user-submitted
   comments, or an interactive widget or gadget.

A given document may contain many articles; for example, on a
blog that displays the content of each piece as the viewer
scrolls, each post would be contained in an element,
maybe with one or more sections within.

Below is a syntax :

    
    
    


    

        
The shattered dream 

        

            
Introduction
           
Names of the people mentioned in this story 
            are not the real names.
         

         

            
Chapter One
            
 Its a good time to start again.
           

    

The primary material of a document is indicated using the main
tag. It includes information that is specifically relevant to
the main subject.

The main tag represents the dominant content of the body of a
document. This area consists of content that is directly
related to or expands upon the central topic of a document, or
the central functionality of an application.

Under the main tag, redundant content like sidebars, navigation
links, and search forms should be avoided. Additionally, there
can only be one main element per document.

An example of how the main tag can be used in an HTML document
is as follows;

 
 
 
  


    
 Gifts 
    
 Gifts are presented during birthdays. 

    

      
 Birthdays 
      
 Most birthdays are celebrated at the beach
    

    

      
 Beach 
      
The beach is situated at every part of the water.
    

  
 

Chapters, headers, footers, and other sections are all defined
using the section tag, the information is divided into sections
and subsections using the section tag.

When a document needs two headers, two footers, or any other
section, the section tag is used, and the generic block of
related elements was organised by the section tag.

The section tag’s key benefit is that it is a semantic element,
which means that both browsers and developers can understand
what it means.

 

    

        
The Inspirational Books

        

            
Introduction
            
The Book is a combination of motivations.
        


        

           
Chapter one:
           
The is a book that makes you think big
        

    

The aside tag is used to describe the primary object of the web
page in a more concise manner that is similar to a highlighter.

It essentially identifies content that is related to the
principal content of the web page but does not constitute the
primary page’s main objective. The aside tag primarily carries
author information and links, Create sidebars for quotes,
comments, or shout-outs.

This tag facilitates page design and improves the clarity of
the HTML document. It allows us to quickly distinguish between
the primary text and the subordinate material. Both div and
aside require CSS for customised design.

It should be noted that the aside tag is new in HTML5. This tag
does not render anything unusual in a browser, and for that,
you must use CSS to style it.

See the syntax below:

     
  

  

  

  
      

          

              Music is the art of arranging sound to create some 
              combination of sweet melody
            

              
Blues
              
Hiphop
              
Highlife
              
RnB
            
          

          
         
  

  

Below is the output:

In HTML, the figure tag is used to include self-contained
information such as illustrations, diagrams, pictures, or code
listings in a document.

It is connected to the main flow, but it can be used in any
position of a document and the figure flows with the document,
thus removing it should not disrupt the flow of the document.

This tag debuted in HTML5 and It contains mostly two tags which
are listed below:

• img src: This tag is used to add an image source to the
  document.

• figcaption: This tag is used to set the caption to the image.

The figurecaption also known as the tag in HTML is
used to set a caption to the figure element in a document, this
tag is new in HTML5.

Check the syntax below.

    
        
             
Types of flowers
             
 We have different types of flowers
           

             
               
             
        
    

Output:

In HTML, the footer tag is used to specify the footer of an
HTML document. This tag typically contains authorship
information, copyright information, contact information,
sitemap, back-to-top links, and related documents.

Within the body tag, the footer tag is used. The below example
illustrates the footer tag in HTML elements:

            
                
                   
Types of flowers
                   
 We have different types of flowers
                   

                   
                   
                     
                     
                        
                
            

Conclusion:

Using semantic HTML is critical for producing websites that are accessible, well-structured, and easy to maintain. Both consumers and developers benefit from it since it ensures accurate content interpretation, search engine visibility, and long-term adaptation. By adhering to semantic markup best practices, you help to create a more inclusive and user-friendly web experience.

Now that you have learnt about HTML Semantic tags, use them and see your code appear more current, readable, and presentable.

Feel free to message me on my Social accounts for any help.

Twitter

LinkedIn

olaideoluwatobiloba1@gmail.com