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.

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

32 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?

1 Like

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.

13 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

2 Likes

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!

9 Likes

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

6 Likes

So is it right to say that one benefit of div tags are that we can use them anywhere, even within semantic elements, and add style to them with CSS?

1 Like

Very good question , from my sid ei would say use Semantic elements when ever you need to have a descriptive tag for the content inside it , however you should use Divs if you want to have different containers for example you can have a semantic element to describe this is the main ocntent of the page howver you should use divs forexample for an art gallery where every image with its content should be included into divs

1 Like

this might sound silly, but since it’s been said that you would use

for styling purposes in css, wouldn’t that also be the case with using semantic elements also?

To answer the question we would still use the div element.

But the best practice is to use div only styling purposes. So we have a particular part of the web page that needs to be styled in particular pay, then that part of the HTML code is enclosed between divs.

The < div > < /div > tag pair is not included as one of the HTML5 semantic elemets.

Hello, semantic HTML has different functionality to non-semantic elements. Semantic elements give us an idea of what is contained between their opening and closing tags for example , , clearly tells us what to expect within the tag which helps for easier readability, accessibility, SEO purposes, etc. The same cannot be said of the div element which is non-semantic as they don’t provide us with any information or idea of what is contained within their opening and closing tags. They however come in handy in also making contents easier to read as it places the content within an opening and closing tag and also, when given attributes it makes it very easy to style a block of content when making use of CSS.
So, in conclusion, they are both useful in their own separate ways.

3 Likes