7
To TAG <div> is one of the most visualised within a file HTML, it is used within the beginning of the TAG <body> the closure of the </body>, as an example:
<body>
<div></div>
<div>
<div></div>
<div></div>
</div>
</body>
I can’t understand what exactly it’s for and why they’re nesting in it...
7
Much of this response is based on good practice, ux, accessibility and my own opinion.
What is the <div>
The div element has no special meaning at all. It represents its Children. It can be used with the
class,lang, andtitle attributesto mark up Semantics common to a group of consecutive Elements.
Translation: "The element div has no special meaning. It represents your children. It can be used with attributes class, lang and title to mark the semantics common to a group of consecutive elements."
Source of official documentation W3C https://www.w3.org/TR/2011/WD-html5-author-20110809/the-div-element.html
div = divisor serves to divide the layout into blocks. And logically you can receive CSS styles and receive behaviors from the most diverse.
But why do they use so much <div>?
I believe we see so many div in HTML because they are often used in the wrong way, for example to build tables, menus, and even forms... I won’t generalize, but if you see in HTML an element that by defaul is block type and is with the display setado with display:inline it is probably being used incorrectly structurally speaking.
I believe that in the years to come you will see less and less div, Do you know why? Because HTML 5 is now semantic. Now we can divide our layout by <sections>, <articles>, <footers>, <headers>, <nav> etc. With the display:flex we no longer need to use display:inline-block nor float:left in div to line up next to each other and still have to do the "gambiarra" of clearfix not to let the layout break.
Semantic layout without needing to div
Another reason to see so many div is because of those frameworks that deliver ready-made components and you put one component inside the other and with it creates a lot of divs unnecessary... Any site in wordpress for example usually have an immense number of divs for being mostly a template full of components and plugins.
Example div in Bootstrap component construction:
In short, <table> is to make table, <form> is to form if you want a div next to each other don’t use float, float not for that. And use the semantic tags of HTML5 <nav> for menus, <footers> for footer etc. and if you need to use a div or other within these elements to split the elements into blocks if needed.
4
Summary
The dividing element
HTML <div>is a generic container for flow content, that in a way represents nothing. He may be used for group elements for style purposes (usingclassorid), or because they share attribute values, aslang. It should be used only when you have no other semantic element (just as<article>or<nav>).
Tag HTML <div>
To tag
<div>defines a division or section in a documentHTML. The element<div>is often used as a container for other elementsHTMLfor style them withCSSor to perform certain tasks withJavaScript.
Tip
The element
<div>is used very often along withCSSfor layout of a web page.
Note
By default, browsers always put a line break before and after the element
<div>. However, this can be changed withCSS.
Graphic Representation
0
A tags "DIV" defines divisão or section in an HTML document. The use of the same help in understanding the code, is considered a UX technician and good development practice.
It is important to separate the "groups" of texts and have a code picked readable.
0
Div is an HTML tag. More precisely an element that behaves like a block. Often used to structure a page layout / template.
In HTML there are tags that behave as Block and as line.
Examples of elements that behave as a line:
- <a>, <span>, <strong>, <b>...
Examples of elements that behave like blocks:
- <div>, <p>, <section>, <article>...
One of the ways to identify when the element behaves like Block is to check if it breaks a line when it is declared next to another element.
Like?
Declare:
<a href="#">Link aqui</a> <div>Um conteúdo aqui</div>Note that the rendering in the browser will be as follows:
Link here
A content here
With this it is possible to conclude that the <a> is an element that behaves like a line, because it did not break a line when rendered, whereas the element <div> is a block element, because when rendered it did not continue on the same line as the <a>.
Browser other questions tagged html5 div
You are not signed in. Login or sign up in order to post.
Read only the first paragraph: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
– Sam
The question sounds a little strange because when asking what the
divs and say "I don’t understand what exactly it’s for or why they put div inside another div" As far as I can see, it conflicts a little with what you say here "Div is one of the tags I see most in HTML and that is used from start to finish in body"... while it seems to have no knowledge of HTML, it seems that it does, mentioning "tags", "body" with property... : D... even wrote "HTML" in upper case...– Sam