DEV Community

Cover image for Ditch the div Tag: Use These HTML Tags Instead
Arafat
Arafat

Posted on • Updated on

Ditch the div Tag: Use These HTML Tags Instead

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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)

Collapse
 
webjose profile image
JosĂ© Pablo RamĂ­rez Vargas • Edited

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.

Collapse
 
philw_ profile image
Phil Wolstenholme • Edited

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 or small will have some base styling from the browser, but main or section 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!)

Collapse
 
arafat4693 profile image
Arafat

Totally agree 👌

Collapse
 
arafat4693 profile image
Arafat

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.

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

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.

Collapse
 
abhinav1217 profile image
Abhinav Kulshreshtha

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.

Collapse
 
webjose profile image
José Pablo Ramírez Vargas

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.

Thread Thread
 
abilaro profile image
Abi Laro

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 with

Thread Thread
 
axl989 profile image
Sergio Olivieri

As i said, semantic tag are crucial for web accessibility!!

Collapse
 
axl989 profile image
Sergio Olivieri

Semantic tag are crucial for web accessibility!!

Collapse
 
pengeszikra profile image
Peter Vivo

pre tag is great for debug under React, because the base setup is fixed-width font great represent json structure or code blocks.

<pre>{JSON.stringify(somePropsOrStateForDebug, null, 2)}</pre>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
arafat4693 profile image
Arafat

Yea, totally agree with you

Collapse
 
spaceninja151 profile image
Christian Knoll • Edited

Yes! I also use it for debugging Angular (you could probably use it for any framework):

<pre>
    {{ userInfo }}
</pre>
Enter fullscreen mode Exit fullscreen mode
Collapse
 
ptrjsn profile image
Peter Johnson

Image description

Collapse
 
axl989 profile image
Sergio Olivieri

😟😓😒

Collapse
 
dannyengelman profile image
Danny Engelman

Why limit yourself to Known Elements?

<style>
  h1     { background:pink }
  red    { color: red      }
  yellow { color: yellow   }
  blue   { color: blue     }
</style>
<h1>Who is afraid of 
       <red>Red</red>, 
       <yellow>Yellow</yellow>
        and <blue>Blue</blue></h1>
Enter fullscreen mode Exit fullscreen mode

Collapse
 
mackfitz profile image
Maciek Fitzner • Edited

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.

Collapse
 
arafat4693 profile image
Arafat

Thanks mate, glad you found the article helpful.

Collapse
 
francoisaudic profile image
francoisaudic

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.

Collapse
 
mapella profile image
Priscilla Adindeh

Thanks for this...

Having a lot of div tags can be confusing at times

Collapse
 
leob profile image
leob • Edited

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.

Collapse
 
axl989 profile image
Sergio Olivieri

"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.

Collapse
 
ventolin profile image
ventolin • Edited

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.

Thread Thread
 
leob profile image
leob

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?

Thread Thread
 
ventolin profile image
ventolin

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.

Collapse
 
leob profile image
leob • Edited

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 of div, and so on.

Thread Thread
 
arafat4693 profile image
Arafat • Edited

Thanks for the feedback. Now I've put example with each tag. You can check them out

Thread Thread
 
leob profile image
leob

Yes that's definitely an improvement, thank you!

Collapse
 
ventolin profile image
ventolin

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.

Collapse
 
arafat4693 profile image
Arafat

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.

Collapse
 
orix profile image
Waleedh Nihal

Thanks a bunch you really helped me out 😊!

Collapse
 
arafat4693 profile image
Arafat

No problem, glad you found the article helpful.