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

With semantic elements the div element is no longer used?

Hi,
From the introduction to semantic HTML, the div element is a non-sematic element which means that the div element does not provide information about the content between the opening tags and closing tags.
We are advised to used semantic HTML element to enhance accessibility, Search Engine Optimization, and readability.

12 Likes

With advanced styling, you will notice that you need to enclose one block within another within another and so on, and in these settings using <div> with class and/or id is just practical. But whenever you build a main structure of your website, you should use semantic elements for all the reasons mentioned before.

15 Likes

I am new to HTML. Now that I know that using div element is non-semantic and we are advised to use semantic HTML elements, why we use div element at all? Does the div element still have purpose?

There is a limited number of semantic elements and you might decide that <div> with a class (like wrapper, container, jumbotron etc) may be more appropriate, particularly when you style your website. This is how I understand and use it. Whenever I can use a semantic element, I favour it, though.

9 Likes

Thanks so much! I appreciate your rapid reply.

is Section Tag considered a Block element

Yes. The <section> element is a block-level element

1 Like

Hi!

The way I understand it, you should really only use the < div > element to separate sections into “containers” for CSS purposes. For example: if you wanted to group multiple sections into one container to style it a certain way you could use < div id=“container-1” >; all sections within “container-1” would have a specific styling you would dictate in the CSS file. Other than this purpose, I see no reason to use a < div > element. If there is another purpose, I would love to hear it, lol.

Hope this explanation is clear!

1 Like

This isn’t quite right. At the end, there isn’t a right and a wrong in HTML, but a ‘best practice’ and ‘convention’

<div> elements should only be used for styling purposes. If you want to group related content, you should use <section> elements or <article> element depending on whether the content is self-contained or not

However, if there’s any time you want to group content just to style it later on, it’s better if you use <div>s

1 Like