What are DIV Tags?

DIV tags are the building blocks of web design, acting as containers that hold and structure HTML content on a webpage. They help designers create a clean, organized layout, enabling the seamless integration of text, images, and other media. Think of them as invisible boxes that can be styled to bring your digital vision to life. How might DIV tags transform your website's design?
Lynne William
Lynne William

DIV tags are codes that define a section in an HTML (HyperText Markup Language) document. A section in HTML can also be described as a "division," which is the origin of the abbreviation used for the name of the DIV tag.

DIV tags, like SPAN tags, do not apply meaning to content as is the case with most HTML For instance, "P" creates a paragraph, "B" creates boldface, and "H" creates a heading. DIV doesn't actually do anything at all by itself; it simply defines a block of content on the page to which other attributes can be globally applied. DIV tags indicate that a block of code belongs together.

Woman doing a handstand with a computer
Woman doing a handstand with a computer

A beginning DIV tag specifies that "this section of code starts here" and the ending DIV tag states, "this section of code ends here." In defining sections of a web page into clearly delineated sections, it makes it much easier to manage and manipulate the code. DIV tags can be used in conjunction with other codes, such as the STYLE code, in order to apply an attribute to an entire section. For example:

This is some black text, which comes before the following burgundy text DIV tag section.
<div style="color:#610B0B;">
<h1>This is the header in this div section, which will show up in burgundy text.</h1>
<p><b>This is a paragraph in this div section, which will not only show up in burgundy text but in boldface as well. </b></p>
This is some more black text, which appears after the section in burgundy text.

Another common usage of the DIV tag is to align entire blocks of content on a web page left, right, or in the center of the page. In addition to "align," other frequently used attributes assigned by a DIV tag are: id, class, title, style, dir, and lang. For novice web page authors, it's important to remember that the DIV tag is not to be used as a replacement for the P (paragraph) tag. The P tag should only be used for individual paragraphs, while the DIV tag should be used to define larger, more general sections or divisions of a document.

DIV tags can be nested, meaning that you can have a beginning and ending set of DIV tags inside of another set. Care must be taken to ensure that any coding added is placed inside the correct set of DIV tags. It is also important to note that web browsers will usually place a line break before and after a DIV element when it displays a web page that contains it. This needs to be taken into consideration when designing the surrounding code.

Experienced website authors recommend the judicious used of the DIV tag when coding HTML, or else it has a tendency to cause a loss of the very thing the tag was meant to create: clarity. Care should be taken not to let "divitis," as experienced coders call the overuse of DIV tags, muddle up and over-complicate the web page coding.

You might also Like

Discuss this Article

Post your comments
Forgot password?
    • Woman doing a handstand with a computer
      Woman doing a handstand with a computer