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.
-
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
-
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
-
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 :
Document
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.