Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Understanding the Div tag in HTML

In this article I will cover the basics of an HTML Div tag. You will lean here that how to create a HTML page using the Div tag, Align it and apply styles on this. Also i will cover the nested Div tags.

Introduction:

This tutorial will cover the basic theory of HTML <DIV> tag, Working with <DIV> tag using Styles and different attributes.

  • The <DIV> tag is for Division, as in dividing or subdividing a Page into many Sections or functional blocks, for example: Header, Footer, Navigation pane: Main Content pane: Right Pane etc.
  • This HTML <DIV> tag is a container for other HTML items or elements. This HTML-Div Tag is used to layout HTML elements on a page, and can be used to group HTML Elements together. Ultimately we can say that <DIV> tag is container unit that encapsulates other page elements and divides the HTML document into sections.
  • You can use the <DIV> Tag to layout your page, The other way to layout your HTML web page is table. I would like to suggest you to use Div tag for page payout.
  • Web designers use <DIV> elements to combine together HTML elements and implement CSS styles to many elements at once. For instance, by covering a set of paragraph elements into a <div> element, the designer can take advantage of CSS styles.
  • Designer can apply a design to all paragraphs at once by applying a design style to the <DIV> tag instead of coding the same style for each paragraph element.
  • Within a <DIV>, you can you can nest and align A )Paragraphs B) Headings C) Lists D) Definitions E) Pre-formatted text F) Images G) Tables etc. You can use the ALIGN attribute for Horizontal Text Alignment.

Using the HTML Div Tag:

The following section demonstrates, how to use div tag to layout your page.

Listing 1: Simple script to display the content of div tag.

<html>
<body>
<div> This is first line.  </div>
<div> This is second line. </div>
<div> This is third line. </div>
<div> This is fourth line. </div>
</body>
</html>
Above figure is out of script to display the content of div tag

Figure 1: Above figure is out of script to display the content of div tag.

HTML Div Tag - Alignment and Style

First of all we will add border in each Div tag .we can do this by using in-line CSS. In-line CSS is CSS inside HTML which is used for adding style to page

  • This is done by adding style=”border: 1px solid red;” to each the div's tag.That will add a red border to one html div.
  • It should be kept in mind while designing website that as per requirement add the borders to HTML div tags. You should also take care: what each div contains, where it starts and ends.
  • HTML div’s alignment can be changed by using the align attribute. To align a div using the align attribute E.g.

    Listing 2: HTML- Div tag with align property.

    <div align=”left”>”contents”</div>
    
  • HTML Div tag can also be used to set layout width and Height, E.g. <div style="width:100px; Height:100px;">

Following Script will clear the concept of use of align attribute and adding style

Listing 3: Script of HTML Div Tag Layout using the Align Attribute and adding Style

<html>
 <body>
 <div style="width:500px;">
  <div align="center" width="400px;"style="border:9px solid green;">This is first block</div>
 <div align="left" width="400px;"style="border:9px solid red;">This is second block</div>
 <div align="right" width="400px;"style="border:9px solid blue;">This is third block</div>
 <div align="center" width="400px;"style="border:9px solid pink;">This is fourth block</div>
 <div align="center" bgcolor="green" width="900px;align="center" style="border:9px solid red;background:black;color:white;">Last block ! Background is black</div>
 </div>
 </body>
</html>
The figure shows output of applying alignment and style property on Div tag

Figure 2: The figure shows output of applying alignment and style property on Div tag

Note: If you will place<Div> elements or items inside of other <Div>elements, it will allow these elements to be further subdivided. Following Script will clear the concept of subdivision.

Listing 4: HTML script for <DIV> inside </DIV>

<html>
<body>
<div style="width:600px;">
<div id="UgDiv" name="UgDiv" title="Div Element" style="font-family: Arial; font-size: 15pt; border: 4px solid black;">
<div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: green; border: 7px solid red;">
<h5>paragraph 1</h5>
<p>This is block of first paragraph</p>
</div>
<br /><div id="subDiv2" name="subDiv2" title="Subdivision Div Element" style="color: Blue;border: 4px dashed green;">
<h5>paragraph2</h5>
<p>This is block of second paragraph</p>
</div>
</body>
</html>
Output of subdivision script of div tag

Figure 3: Output of subdivision script of div tag.

Conclusion:

This amazing HTML <Div> tag is my most used HTML Tag. These all concepts are the foundation of most of the web pages. Article covers the basics of <Div> tag. You can explore more properties of Div tag. Also there is many other style attributes which can change the layout of Div tag. Play with those attributes and let us know your queries, we are eager to assist you.



I am having total 7+ years of experience in developing applications using C#, VB.NET, ASP.NET, Silverlight, WCF, SQL Server and Oracle. I am holding a M.Tech degree in Intelligent systems. For more information, visit my Linkedin p...

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login