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.
<section>
<h1>This is a section</h1>
<p>This is a paragraph within the section</p>
</section>
article
This tag defines an independent, self-contained piece of content, such as a blog post or a news article.
<article>
<h1>This is an article</h1>
<p>This is a paragraph within the article</p>
</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.
<header>
<h1>This is the page title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
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.
<footer>
<p>Copyright 2021 My Company</p>
<ul>
<li><a href="#">Terms of Service</a></li>
<li><a href="#">Privacy Policy</a></li>
</ul>
</footer>
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.
<aside>
<h2>Related Articles</h2>
<ul>
<li><a href="#">Article 1</a></li>
<li><a href="#">Article 2</a></li>
<li><a href="#">Article 3</a></li>
</ul>
</aside>
nav
This tag defines a section of the page that contains navigation links.
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
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.
<main>
<h1>Welcome to my website</h1>
<p>This is the main content of the page.</p>
</main>
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.
<figure>
<img src="image.jpg" alt="A description of the image">
<figcaption>This is a caption for the image</figcaption>
</figure>
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.
<details>
<summary>Click here to view more details</summary>
<p>Additional details go here</p>
</details>
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.
<form>
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
</fieldset>
</form>
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.
<address>
Contact me at:<br>
John Doe<br>
johndoe@example.com
</address>
form
This tag defines a form that users can fill out. It can contain various form elements, such as text inputs, checkboxes, and buttons.
<form>
<label for="name">Name:</label>
<input type="text" id="name" name="name"><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br>
<input type="submit" value="Submit">
</form>
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.
<table>
<tr>
<th>Name</th>
<th>Email</th>
</tr>
<tr>
<td>John Doe</td>
<td>johndoe@example.com</td>
</tr>
<tr>
<td>Jane Doe</td>
<td>janedoe@example.com</td>
</tr>
</table>
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.
<pre>
This is some preformatted text.
It preserves both spaces and line breaks.
</pre>
code
This tag defines a piece of computer code. It is often used in conjunction with the pre
tag to display code snippets.
<p>To create a new file in the terminal, use the following command:</p>
<code>touch new_file.txt</code>
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.
<blockquote>
"The world is a book, and those who do not travel read only a page." - Saint Augustine
</blockquote>
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.
<p>I love to eat <mark>fruits</mark> and vegetables every day.</p>
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.
<p>I was born on <time datetime="1785-12-30">December 30, 1985</time>.</p>
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.
<p>The <abbr title="United Nations">UN</abbr> was founded in 1945.</p>
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.
<p>This text is written left to right. <bdo dir="rtl">This text is written right to left.</bdo></p>
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.
<table>
<colgroup>
<col span="2" style="width:50%">
<col style="width:50%">
</colgroup>
<tr>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
</tr>
</table>
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.
<p>I went to the store and bought a <del>car</del> <ins>bike</ins>.</p>
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.
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
<dt>Term 3</dt>
<dd>Definition 3</dd>
</dl>
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.
<p>I went to the store and bought a <del>car</del> <ins>bike</ins>.</p>
kbd
This tag defines keyboard input. It is often used to mark text that should be entered by the user using the keyboard.
<p>To save the document, press <kbd>Ctrl</kbd>+<kbd>S</kbd>.</p>
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.
<form>
<label for="num1">Number 1:</label>
<input type="number" id="num1" name="num1"><br>
<label for="num2">Number 2:</label>
<input type="number" id="num2" name="num2"><br>
<label for="result">Result:</label>
<output id="result" name="result"></output><br>
<input type="button" value="Calculate" onclick="calculate()">
</form>
<script>
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);
}
</script>
sub
This tag defines a subscript. It is often used to display a subscripted character or a formula in a smaller font size.
H<sub>2</sub>O
sup
This tag defines a superscript. It is often used to display a superscripted character or a formula in a smaller font size.
E = mc<sup>2</sup>
small
This tag defines small text. It is often used to display fine print or legal disclaimer text in a smaller font size.
<p>Welcome to our website! <small>By using this website, you agree to our terms of service.</small></p>
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.
Top comments (32)
I see a potential problem with this. Being backend, I do not recall this fully, but several of these come with HTML 5, and several of these are meant to define the document's logical structure, not its visual representation.
So while they do accept CSS, its main purpose is not CSS. Maybe someone else can corroborate this for me?
In other words: If you need to style, the div continues to be your best friend. But again, go double-check HTML5.
These can all be styled by CSS in exactly the same way as a
div
can be styled. In some cases you might need to either override or complement the browser's own styling from the useragent stylesheet, but this is quite a common practice.The idea is that the semantic HTML (the document's structure that you mentioned) communicates the meaning of the page, and the CSS dictates the appearance. This doesn't mean that styling can't be applied to these elements though, it just means that a page without any CSS make sense to assistive technology like screenreaders, or to a search engine (elements like
blockquote
orsmall
will have some base styling from the browser, butmain
orsection
is unlikely to). When CSS is added that targets the semantic markup, the page becomes whole - now it makes sense to technology, and it looks good to humans (hopefully!)Totally agree 👌
Yes, you are right. I never said using div is restricted However, sometimes people overuse div when they can use something better. That is why I've picked alternatives that can be used instead of divs.
Well... the title does say "Ditch", as in drop, get rid of, stop using, etc. In any case, a fair warning to the unexperienced is in order.
Nop, they work like div for styling purposes too. Only difference from div is that they have a bit more meaning than just a block-element.
That extra bit is the concerning part. If I want to align right, I cannot simply enclose with, say,
<article>
to style because that changes the document structure and will confuse document readers.<div>
's should still be the primary styling tool for these cases.Right. It only makes sense to use semantics when it is useful like grouping a piece of content as a separate entity.
If the only reason you add another wrapper tag is to apply some CSS to the children then
<div>
is better option like you said. However that is not perfect design from begin withAs i said, semantic tag are crucial for web accessibility!!
Semantic tag are crucial for web accessibility!!
pre
tag is great for debug under React, because the base setup is fixed-width font great represent json structure or code blocks.Yea, totally agree with you
Yes! I also use it for debugging Angular (you could probably use it for any framework):
😟😓😒
Why limit yourself to Known Elements?
This is a very useful reminder of how rich HTML is. I've only ever used maybe half of these. I remember very well the times when CSS wasn't even a thing, and you'd use tags for bold text, italics, centering, etc. - which have fallen out of favor and have been replaced with CSS styling. They still worked last time I checked a few years back, but they are supposedly causing issues on mobile - and the text looked different than with the CSS styling.
One thing, though. Take it or leave it - I'm just someone who thinks about these things way too much ;) - but some of these are really special-case, and you might have a hard time styling them with just CSS - like sub or sup. Here the HTML seems the natural choice. I suppose you could try to work around it with unicode, but again, HTML entity would be the obvious choice, the closest alternative being via the ::before / ::after content.
Anyway, good stuff, overall! Now I'm actually inspired to try work some of these into my current projects, even if just for exercise.
Thanks mate, glad you found the article helpful.
Thanks for this...
Having a lot of div tags can be confusing at times
This is one of the basis of accessibility, the respect of HTML semantics.
Why trying to give a semantic to a div element, when you simply have to use the native HTML element which already has the semantic automatically.
The use of WAI-ARIA attributes shall be reserve only for the purpose of communicating information, which can't be communicated via Native HTML.
The problem I have with this article is that the advice may sound great because, well, who could be against 'Semantic HTML"? But it remains very theoretical without some good examples which show how to properly use these tags - the risk is people start using these tags in incorrect ways (ways that don't make sense, and that don't convey meaning) and then we've not gained anything - could just as well have kept our "div soup".
And to be honest it doesn't really matter whether we use "div" or "section", except for accessibility.
By the way, tags like "small" and "sup" wouldn't normally be substituted for "div" (or the other way around), they're more like "span", and would in most cases be handled better with CSS anyway.
"And to be honest it doesn't really matter whether we use "div" or "section", except for accessibility."
This phrase is the reason because semantic tag should be mandatory!!
We must start thinking about inclusivity. In the world 25% of the population have some kind of disability.
Yes, accessibility must be taken seriously not only because of inclusivity that it's very important, but also for machines. This tags can also help search engines and advanced content management system process documents and organize them according to more complex user needs.
That's new to me - so Google, or "advanced content management systems" (what's that, exactly?) work better if I put "section" in my HTML rather than "div"? Do you happen to have references/links to support these claims?
Semantic Web on Wikipedia, or: accionlabs.com/semantic-content-ma..., or: gnoss.com/en/semantic-framework/se...; or Semantic Technologies in Content Management Systems by Wolfgang Maass and Tobias Kowatsch.
100 percent with you there - yes to accessibility, and if using "section" instead of "div" gets us there then I'm all for it.
My criticism of the article was that it's highly theoretical, it advocates for semantic HTML (section and so on) but it does not explain how to use them in a good way. It lacks examples ... "show, don't tell" principle!
P.S. the reason why I said:
"... it doesn't really matter whether we use "div" or "section", except for accessibility"
was not to suggest that accessibility isn't important (it is), however there are other ways to achieve it, even with div's, e.g. with ARIA attributes - accessibility does not solely depend on using
section
instead ofdiv
, and so on.Thanks for the feedback. Now I've put example with each tag. You can check them out
Yes that's definitely an improvement, thank you!
Thank you. All of them are awesome! Semantic tagging is the whole reason behind html. It's a shame most people don't use it though. I hope this kinds of posts make more people use them.
Thank you so much for reading the article. Yes, I also want people to use them than just div. That was the initial goal of this article.
Thanks a bunch you really helped me out 😊!
No problem, glad you found the article helpful.