DEV Community

Ditch the div Tag: Use These HTML Tags Instead

Arafat on January 01, 2023

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

Read full post

José Pablo Ramírez Vargas • Jan 2 '23 • 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.

Phil Wolstenholme • Jan 2 '23 • 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!)

Arafat • Jan 2 '23

Totally agree 👌

Arafat • Jan 2 '23

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.

José Pablo Ramírez Vargas • Jan 2 '23

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.

Abhinav Kulshreshtha • Jan 4 '23

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.

José Pablo Ramírez Vargas • Jan 4 '23

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.

Abi Laro • Jan 4 '23

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

Sergio Olivieri • Jan 5 '23

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

Sergio Olivieri • Jan 5 '23

Semantic tag are crucial for web accessibility!!

Peter Vivo • Jan 3 '23

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>

Arafat • Jan 3 '23

Yea, totally agree with you

Christian Knoll • Jan 5 '23 • Edited

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

<pre>
    {{ userInfo }}
</pre>

Peter Johnson • Jan 4 '23

Sergio Olivieri • Jan 5 '23

😟😓😒

Danny Engelman • Jan 6 '23

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>

Maciek Fitzner • Jan 3 '23 • 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.

Arafat • Jan 3 '23

Thanks mate, glad you found the article helpful.

Priscilla Adindeh • Jan 5 '23

Thanks for this...

Having a lot of div tags can be confusing at times

francoisaudic • Jan 4 '23

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.

leob • Jan 5 '23 • 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.

Sergio Olivieri • Jan 5 '23

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

ventolin • Jan 5 '23 • 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.

leob • Jan 5 '23

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?

ventolin • Jan 5 '23

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.

leob • Jan 5 '23 • 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.

Arafat • Jan 5 '23 • Edited

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

leob • Jan 5 '23

Yes that's definitely an improvement, thank you!

ventolin • Jan 5 '23

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.

Arafat • Jan 5 '23

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.

Waleedh Nihal • Jan 2 '23

Thanks a bunch you really helped me out 😊!

Arafat • Jan 2 '23

No problem, glad you found the article helpful.