What kind of tag is div

Later in this tutorial, I will take you through how to make a web layout with multiple div tags without getting confused. To make a square with div tag, you first need to define an empty div tag and attach a class attribute to it in the HTML. In the CSS, select the div with the class attribute, then set an equal height and width for it. Making the Nigerian flag with the div tag is not that hard. The flag is a rectangular shape with the colors green, white, and green. To make it, define 3 div tags and attach different classes, then style them appropriately in the CSS.

As we discussed above, the div tag is very easy to style. It's one of the reasons why many developers use it to group similar content. The div tag accepts almost all CSS properties without a problem.

Let's look at a few examples of that now. You can apply the CSS properties such as font-size , font-family , font-weight , and font-style on content grouped together with the div tag:. You can apply the CSS color and background-color properties on content grouped together with the div tag:.

You can apply the CSS text-transform and text-decoration properties on a div tag like this:. The output looks like this:. Compiler Design. Computer Organization. Discrete Mathematics. Ethical Hacking. Computer Graphics. Software Engineering. Web Technology. Cyber Security. C Programming. Control System.

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. 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.

Divs go in the body section of an HTML file. Note: these tags are often left out in code editors, like CodePen. To create a div element, you must use an opening and closing tag.

You can place the elements you want to group together inside these tags. Often, these will appear indented, as shown below. Now that we understand the definition and syntax of the div element in HTML, let's take a closer look at what it does exactly. It does, however, allow these sections to be easily styled 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.

Here are some examples of styles or semantics you can add with the div element. Say the default language of the text on a web page is English, but a section is in another language. To mark this particular section on a web page, simply place the elements inside a div. Then, add a language attribute and set it to the language you want. But below is a sentence in French, which is marked accordingly in the code.

Easy Normal Medium Hard Expert. Writing code in comment? Please use ide. Load Comments. What's New. Most popular in CSS. CSS to put icon inside an input element in a form How to update Node. Most visited in HTML. CSS to put icon inside an input element in a form. We use cookies to ensure you have the best browsing experience on our website.