HTML div Tag

Beginner

The <div> tag is one of several important tags the developer places in every HTML document.

HTML Tags Reference

1. About the div tag

The <div> tag sits inside the <body> element, so it is visible to the user.

Its primary purpose is to create a block or section within a document that can be styled and manipulated in its own way once named.

This <div> section can contain other <div> elements, so some refer to it as a container element.

Once blocks are placed in containers the complexity of styling takes on greater importance because styles of child elements inherit styles from their parent. That's where the term Cascading Style Sheets, or CSS, comes from.

This is the very reason beginners struggle when reading other people's HTML code, because it's often filled with containers using multiple nested <div> elements.

2. Syntax for the div tag

The <div> tag for HTML5 is a two-part tag so it must be closed with the </div> tag.

There are typically many <div> tags within a document and to facilitate customized settings for each individual element we should address styling first.

Block versus inline tags

The <div> tag is what is called a block-level tag, as opposed to an inline tag. Block tags occupy their own line vertically, so you can think of them including a carriage return and sitting on their own line. An example is the <h5> tag that contains the text "Block versus inline tags" in this section's heading. See how it occupies its own line?

An example of an inline tag is the <strong> tag which will make text bold, within the line, and without starting a new line.

The three ways to style HTML elements

There are three places code for styling can sit and below we see examples of all three.

Location	How coded	Popularity	Pros	Cons
In the element itself	As an attribute to the element.	Low	Applies to that one element only.	To reuse you must repeat it in every element.
In the head	In `<style>` tags within that HTML document's `<head>`.	Low	Style can be shared on the page. You only need to code it once for the HTML document.	Style specifications can be long which adds clutter. Cannot be shared with other documents.
In a separate CSS document	A CSS document (.css extension) linked with a `<meta>` tag that sits within the `<head>`.	High	The style document can be shared across multiple pages.	Developer must maintain multiple files.

For an example of the third and most common styling approach, assume the class gray-background has been created in a linked stylesheet called styles.css. The HTML code below would create a block with a gray background color.

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <link rel="stylesheet" href="styles.css" /> </head> <body> <div class="gray-background"> The block surrounding this element is gray. </div> </body> </html>

Technically, styling can be coded using all three methods, but the first two are generally frowned upon. In most cases styling should be coded in a separate CSS stylesheet, like this example illustrates.

3. Settings for the div tag

As with all tags, global attributes can always be set, but no other attributes are required.

Default behaviors

Each user-agent (browser) has its own stylesheet per se. This dictates how that browser styles each element by default. The Chrome browser styles the <div> element using the following specifications.

div { display: block; }

The default font is Times New Roman.

4. Examples of the div tag

Example 1 - Show a div tag with styling in the head

The following code will set up a document with internal styling within the <head> element.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> <style> .red-text {color: red}; </style> </head> <body> <div class="red-text">red text</div> </body> </html>

Here we have an example of the second approach. Since it is common to see styling code stretch across hundreds of lines, except for the most simple HTML documents it is uncommon to see styling with the <style> tag like here.

Example 2 - Create styling of a div tag within the tag itself

The following code illustrates how you might code styling as an attribute to the <div> tag itself.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title</title> </head> <body> <div style="background-color:gray">Gray background</div> </body> </html>

Again, in a one-off case, when you want to add style to one element alone, this approach is available, but is uncommon.

Example 3 - Demonstrate the block-level nature of the div tag

To illustrate how the <div> tag is a block-level tag, we first incorrectly try to color text red inline. Second we show how a block's background color can be colored. Here for convenience, we code the style within the <head> element.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML title</title> <style> .red-text {color:red} .gray-background {background-color:gray} </style> </head> <body> This is <div class="red-text">red text</div>. <div class="gray-background">Gray background</div> </body> </html>

If you type or copy this into a text file and view it through a browser, you will notice two points. First, because the <div> tag is a block-level element, it adds carriage returns around the red text where you might not expect them.

Second, note how the gray shading takes up the whole width of the available space, or the whole block.

Our goal here wasn't to cover all aspects of styling, but some knowledge is required to understand the purpose and use of the div element.

HTML div Tag Reference and Examples

HTML div tag