Div tags are a type of HTML element that can be used to divide a webpage into sections and can be styled with CSS. While div
tags can be useful for creating page layouts and separating content, they should not be used excessively or unnecessarily. It is generally best to use the most appropriate HTML element for the content you are trying to mark up, rather than relying on div
tags all the time.
So here, In this article, I've picked a few alternatives that can replace div tags easily. They are:
section
This tag defines a section in a document, such as a chapter or an appendix. It is typically used to group content that is related semantically.
This is a section
This is a paragraph within the section
article
This tag defines an independent, self-contained piece of content, such as a blog post or a news article.
This is an article
This is a paragraph within the article
header
This tag defines the header of a section or page. It can contain a logo, a navigation menu, or other elements that appear at the top of the page.
This is the page title
href="#">Home
href="#">About
href="#">Contact
footer
This tag defines the footer of a section or page. It can contain copyright information, a sitemap, or other elements that appear at the bottom of the page.
Copyright 2025 My Company
href="#">Terms of Service
href="#">Privacy Policy
aside
This tag defines content that is tangentially related to the main content of the page. It is often used to display a sidebar or a related content section.
Related Articles
href="#">Article 1
href="#">Article 2
href="#">Article 3
nav
This tag defines a section of the page that contains navigation links.
href="#">Home
href="#">About
href="#">Contact
main
This tag defines the main content of the page. It should be used only once per page, and it should contain the content that is directly related to the purpose of the page.
Welcome to my website
This is the main content of the page.
figure
This tag defines self-contained content, such as an image, a diagram, or a code snippet. It is often used in conjunction with the figcaption
tag, which defines a caption for the content.
src="image.jpg" alt="A description of the image">
This is a caption for the image
details
This tag defines a summary or a description of a section of content. It can be expanded or collapsed by the user, and it is often used to display additional information or options.
Click here to view more details
Additional details go here
fieldset
This tag defines a group of related form elements, such as checkboxes or radio buttons. It is often used to group form controls that belong to the same logical entity.
Personal Information
for="name">Name:
type="text" id="name" name="name">
for="email">Email:
type="email" id="email" name="email">
address
This tag defines the contact information for the author of a section or the entire page. It is often used to display the author's name, email address, and physical address.
Contact me at:
John Doe
johndoe@example.com
form
This tag defines a form that users can fill out. It can contain various form elements, such as text inputs, checkboxes, and buttons.
for="name">Name:
type="text" id="name" name="name">
for="email">Email:
type="email" id="email" name="email">
type="submit" value="Submit">
table
This tag defines a table of data. It can contain rows, columns, and cells, and it can be used to display tabular data in a structured way.
Name
Email
John Doe
johndoe@example.com
Jane Doe
janedoe@example.com
pre
This tag defines preformatted text. It preserves whitespace and font formatting, and it is often used to display code snippets or other formatted text.
This is some preformatted text.
It preserves both spaces and line breaks.
code
This tag defines a piece of computer code. It is often used in conjunction with the pre
tag to display code snippets.
To create a new file in the terminal, use the following command:
touch new_file.txt
blockquote
This tag defines a long quotation that is set off from the main text. It is often used to quote other sources or to present long passages of text in a more distinctive way.
"The world is a book, and those who do not travel read only a page." - Saint Augustine
mark
This tag defines text that is highlighted for reference purposes. It is often used to mark passages of text that are relevant to the current context or that need to be reviewed later.
I love to eat fruits and vegetables every day.
time
This tag defines a date or a time. It can be used to mark the publication date of a document, or to indicate the start or end time of an event.
I was born on datetime="1785-12-30">December 30, 1985.
abbr
This tag defines an abbreviation or an acronym. It can be used to provide a full explanation for the abbreviation in the title attribute.
The title="United Nations">UN was founded in 1945.
bdo
This tag defines the directionality of text. It can be used to change the direction of text in languages that are written from right to left, such as Arabic or Hebrew.
This text is written left to right. dir="rtl">This text is written right to left.
colgroup
This tag defines a group of columns in a table. It can be used to apply styles or attributes to a group of columns rather than to each column individually.
span="2" style="width:50%">
style="width:50%">
Column 1
Column 2
Column 3
del
This tag defines deleted text. It is often used to mark text that has been removed from a document and to show the reason for the deletion. It is often used in conjunction with the ins
element to mark additions and deletions to a document.
I went to the store and bought a car bike.
dl
This tag defines a definition list. It can be used to create a list of terms and their definitions, or to group related items in a list.
Term 1
Definition 1
Term 2
Definition 2
Term 3
Definition 3
ins
This tag defines inserted text. It is often used to mark text that has been added to a document and to show the reason for the insertion.
I went to the store and bought a car bike.
kbd
This tag defines keyboard input. It is often used to mark text that should be entered by the user using the keyboard.
To save the document, press Ctrl+S.
output
This tag element in HTML represents the result of a calculation or user action. It is often used in conjunction with form elements, such as input
and select
, to display the result of a calculation or user action.
for="num1">Number 1:
type="number" id="num1" name="num1">
for="num2">Number 2:
type="number" id="num2" name="num2">
for="result">Result:
id="result" name="result">
type="button" value="Calculate" onclick="calculate()">
function calculate() {
const num1 = document.getElementById("num1").value;
const num2 = document.getElementById("num2").value;
const result = document.getElementById("result");
result.value = parseInt(num1) + parseInt(num2);
}
sub
This tag defines a subscript. It is often used to display a subscripted character or a formula in a smaller font size.
H2O
sup
This tag defines a superscript. It is often used to display a superscripted character or a formula in a smaller font size.
E = mc2
small
This tag defines small text. It is often used to display fine print or legal disclaimer text in a smaller font size.
Welcome to our website! By using this website, you agree to our terms of service.
Conclusion
I hope these tags help. Let me know in the comment section if you have any questions or if I need to add other tags. Thanks for reading.