With semantic HTML, do we no longer use the div element?

If I am not mistaken divs are free elements. It means while using CSS, even if the div is nested within another element ie. main , footer , they can still be styled using just class and id selectors.
And I don’t think its possible with the sections.

1 Like

You’re free to do whatever you want. Semantic HTML is just there to allow you to improve your website’s performance, such as SEO rankings and user accessibility. A <div> and a <section> could both be used for the same purpose, but try to use the element that would make the most sense in your situation.

Ask yourself, is this element used to group a large section of my website that should be isolated from other large sections of my website (such as an about me section)? If so, use the section element. If you simply want to group elements for styling purposes (like grouping your title and subtitle for the sole purpose of giving them unique fonts) then use a div element

If you think about it, with enough styling and JavaScript, you could turn an input element into a simple container that behaves just like a div. Why won’t you do it? That’s because it just doesn’t make sense to use an input element as a styling container.

2 Likes

Hello!!
I don’t believe the div element is obsolete. It is because there are only a certain number of semantic elements that may be applied instead of div.

Yes, div is not obsolete, but if Semantic can do the job, it is recommended to use it instead of div.

div tag is still used to section of other ‘smaller’ things (that are not header or nav.

So, can we not use semantic tags similarly (add id’s for CSS styling purposes)? Say for example <nav id=nav> instead of <div id=nav>, or would that be considered “wrong”?

There is nothing “wrong” with specific tag usages in HTML, the question actually boils down to whether it is appropriate to use this tag in specific context of the document. The purpose of semantic tag is to provide meaning to the content they enclose. For instance, <nav> indicates a navigation section, while <header> is used for introductory content. While you can use <div id="nav">, it’s not as semantically clear as using <nav>. Using a <div> for a navigation section could be considered less optimal because it doesn’t convey the purpose of the content as effectively. Also, the usage of id and class attributes are commonly shared amongst all HTML tags, so you do not have to worry about that as long as the value passed to the id is unique across the entire document (no repeating id values)

1 Like