DEV Community

Cover image for Understanding HTML <DIV>
Chris Martins
Chris Martins

Posted on

Understanding HTML <DIV>

HTML DIV

In writing the HTML(Hyper Text Markup Language) of a web page, the use of the HTML tag called Div is one of the important HTML tag that every programmer should understand the schematics and it's purpose in writing our HTML codes.

I came across a beginner to front end web development that said she had to stop her learning process due to lack of understanding of the HTML tag DIV, so I am writing this for absolute beginners to understand exactly what DIV is used for and there purpose and importance in writing a good HTML code.

The div tag defines a division or a section in a standard HTML code. The div tag is used as a container for HTML elements. When ever you need to divide or separate the elements on a webpage, you use the HTML tag (div).

While writing our codes for instance, we have the menu section, the about section, the skill section, the projects section, the contact section and the footer section. It is advisable to always wrap up each sections with a DIV.

The div tag is easily styled by using the class or id attribute. When ever you want to effect a change in the style of a particular section, it is easier to Target the DIV class or ID, by so doing the changes affects all the elements and contents that is placed within the opening and closing div;
Alt Text
Any sort of content can be put inside the 

tag!

NOTE:By default,browsers always place a line break before and after the div  element.

A DIV is simply a container that holds different sections and elements in an HTML document.
You get to also see the beauty of a div when we start having sections and sub sections. Here you can have a div as a child inside a parent div.
Alt Text

We make use of DIV for easy styling of each sections, subsections and to make our codes orderly, readable and reusable.

Top comments (2)

Collapse
 
lewiskori profile image
Lewis kori

Thank you for the article. As a small note, I'd just like to add that you shouldn't overly rely on divs to layout your web pages. Semantic elements are best suited for this.

We make use of DIV for easy styling of each sections, subsections and to make our codes orderly, readable and reusable.

Collapse
 
biochris profile image
Chris Martins

Thanks for the feedback, I appreciate. 🙌