With semantic elements the div element is no longer used?
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.
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
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.
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.
Thanks so much! I appreciate your rapid reply.
is Section Tag considered a Block element
<section> element is a block-level element
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!
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
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?
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
this might sound silly, but since it’s been said that you would use
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.
I haven’t started on CSS yet, but I’m assuming the answer is “yes”.
When I read the OP’s question, I started wondering the same thing as the OP.
One example of such styling could be a “useful tips” section used in some sort of teaching website to highlight non-vital, but useful information related to the current content. Such “useful tips” could be enclosed in < div id= “tips” >…< /div > when necessary. As far as I know, there is no semantic container for such a “tips” section, so using a < div > element seems reasonable to me.
But that doesn’t mean we should stop using div, div’s are used if we can’t find a semantic element to use. To divide or give division to an article.
We may need the div’s for CSS purpose. They can be helpful to make containers to be designed in CSS.
I have one more question, why not use
<section> then instead of
<div>. I can always give it an id for styling, and
<section> also groups content together.