Purpose of <div

1

Can somebody explain to me what’s the function of <div

1 Like
3

It groups elements into a section so you can style (CSS) or program (JS) whatever is contained inside as a group. It’s especially useful for positioning elements on the page. Besides positioning elements as a group, it gives inline elements, such as an image or input field, a block-level container.

Div is a generic container name. HTML5 has more specific container names: header, section, article, footer, etc. that you can use. The names are just to make it easier on us to distinguish among all those containers.

2 Likes
4

You can change the height and width of a div and add a background color, to for instance, create a box. Then you can put stuff into that box and group it.

As @jlave said, its basically a container.

Here is a example on google search. This div holds multiple boxes. It groups them together and contains them.

(the <a class="mv-empty-tile"></a> are the boxes).

image
image1920×1040 178 KB

6

Thanks. Couldn’t I use id= instead of div?

7

Can i actually google a list of class=?

8

You have lots of toys, candies and random things.
It’s a total mess, what do you do?
You put them in a box.
Same with HTML and elements…the div is your box, use it.

1 Like
9

Yeah you can give it a class like anything else. All it is a container and box. Its like a secondary body element.

11

No, they’re different types of things. A <div> is an HTML element, an id is an attribute. So you can use them both, like this: <div id="myId">content goes here</div>.

No, because the possible values of class include any arbitrary string (with certain validation rules and within any length limit imposed by the browser). You could have class="bdkjas--dsj_1ikf44uqwi" and that would be syntactically fine.

1 Like
12

You do not absolutely have to use divs, but they will make it easier to position things and style them.

As @razvanel666 said, you put things in them, like a box. Instead of toys and candies, you’re putting in headings, paragraphs, images, buttons, etc. You can put a bunch of things in one box/div, or you can put just one thing in it.

Think of the id/class as the label for the box. One box might be for toys (id=“toys”) and one for candies (id=“candies”). If you have several boxes/divs of the same type, you’d use a class (class=“books”). You can use both a class and an id on the same div, for example:

<div class=photos id ="cats">
    <img src="cat in window.jpg" />
    <img src="cat chasing red dot.jpg" />
    <img src="cat on pillow.jpg" />
</div>
1 Like