div in HTML
You can think of a web page in three major chunks. You’ve got the header and footer and, in between, the main body. But when looking at any web page, you can see the body is made up of sections, too. There’s likely a section for products and services, testimonials, team members, contact information, and more.
Each of these sections probably looks a little different. Maybe they have different colors and fonts. Maybe one has a parallax background and one has a video background. Maybe one is made up of multiple rows and columns, and so on.
This variation in styling is possible because of the content division element in HTML. Better known as “div,” this element can divide your web page into sections so you can target them with unique CSS properties.
In HTML, the div tag is a generic block-level container for other elements.
Let’s look at a few key terms in this definition.
First, a div is a “generic” container because it doesn’t describe the content it contains. Other elements like
Second, a div is a block-level container. To understand what that means, let’s compare a div to a span element, which is an inline container. The are several key differences between a block-level and an inline container. For example, a div always starts on its own line, whereas a span stays in line (in line — get it?). A div also takes up the full width of the page, and a span does not. That means that if you have multiple divs in a row, they will appear stacked on top of each other on the front end. Spans, on the other hand, can exist side by side. The last major difference is that you can define the height and width of a div, but you can’t for a span.
Third, the elements that can be contained in a div are known more specifically as “palpable content” or “flow content.” Palpable content is basically any HTML element that contains text or embedded content, and flow content is basically any element used in the body of HTML docs. So the anchor, block quote, audio, image, paragraph, and heading elements are all considered palpable or flow content, and can be placed inside a div.
The div tag doesn’t technically do anything. It can help organize an HTML file into sections on the back end, but that won’t affect how those sections display on the front end. It does, however, allow these sections to be easily styled with CSS.
To style these sections with CSS, you must add a class or ID attribute to the div element. You’ll then use a CSS selector to apply unique style properties to the elements contained within the div.
Before we dive into an example with CSS, let’s first look at an example of an unstyled div element.
Now that you know a div element doesn’t do anything on its own, you might be wondering why you’d even use one. We’ll look at a few use cases below.
Most commonly, you’ll use the div element to group sections of code that you want to target with CSS. You can style them to look different from other sections on the page, or to position them differently. You can also use a div and language attribute to change the language of a particular section on the page.
... please continue