What does the <div> tag in HTML do?

Home - Quora Link

HTML tags have three basic types. Inline, which means that the elements adjacent to each other are placed in a line horizontally, when you run out of space on a line, it wraps over into the next line.

Block tags take up the entire width of their containers.

Meta tags typically do not display anything on the page and are used to affect functionality in other ways.

A div tag is a block element, and pretty much nothing else. Contrast this with a p tag, which is a block tag that adds a bit of top and bottom margin so that you don’t have to do it manually, to give the effect of a text paragraph when you use it for its intended purpose.

The intended use of a div tag is to divide a webpage. If you look at a typical website, you can divide it into logical sections. For example, if you look at Quora, you can divide it into the nav bar at the top of the screen, and the content section. The content section can be divided into the stream of articles, and the left and right sidebars.

Each of these elements should be contained in a div tag. You then use CSS to tell the web browser how to position and display the divisions. For instance, you can use display: inline-block to force the div to act like an inline element so you can stick it into a p if you needed to.

That said, the direction of web development has been moving in the semantic direction. Rather than generic divs, you’re supposed to use the newer semantic tags that better indicate to whatever code is looking at the page, what the intended purpose of that tag is. So you have nav, section, and header tags, among others. In theory, they’re supposed to remove the need for generic div tags.

In practice, most people are still just using divs. It’s way better than the days where you laid out pages using tables.

Also, a lot of people use HTML outside of the way the designers of the language intend for people to use it. Tables were never intended to be used for layout, but for a long time that was the only way to get any kind of consistency out of the various browsers. A significant amount of dev time involved slicing up Photoshop layouts and sticking the pieces into tables. Tedious, error-prone work.

The div saved us from that. Strange as it may seem, HTML didn’t get a flexible block-display tag with no weird restrictions on how it’s used until version 4.01. Browsers rendered everything differently and websites were seen as basically just documents. The web application as we know it today didn’t exist. Divs were a key step in that direction.