HTML div tag HTML div tag

<div> tag is the most commonly used container tag in HTML. The word div is the short form for division. As its name suggests the div tag helps in creating logical divisions in your web page. After creating these divisions, you can arrange the content of your webpage within these divisions.

Grouping of content together

Along with helping you to create logical boundaries the div tag is also used to group the content within a given section. Like if you are showing details about different mobile phones in your web page and for each mobile phone you are displaying the name, model, color and price then you can put all this data inside a div tag. This way if you are showing 10 mobile phones in your page you will have 10 div blocks, each containing the information about one mobile.

Example usage

<div> tag is always written inside the <body> tag. In this example we will use the <div> tag to display information about different mobile phones.

See the code below. You will see all the tags you have learnt till now in the example.

<html>            
    <head>                
        <title> List of mobile phones we sell </title>
        <meta name=”Description” content=”This page contains a list of all the mobile phones you can buy at our shop.                                    For every mobile phone you will find its brand, color and price” />                    
        <meta name=”keywords” content=”samsung,nokia,apple,phones” />            
    </head>            

    <body>                    
        <div>              
            IPhone, Apple, White , 35000          
        </div>          

        <div>              
            IPhone, Apple, Black, 35000          
        </div>          

        <div>              
            Samsung Galaxy Note, Samsung , White, 30000          
        </div>          

        <div>              
            Nokia Lumia, Nokia , Black, 15000          
        </div>            
    </body>    
</html> 

If you open the webpage with the above HTML code inside it, then the browser will show you the following output.
 

Image

You can see the information for each mobile phone displayed in a separate line because we have added it in different div tags. The browser understands that this information has been divided into different sections and displays it accordingly.

In this tutorial we have just explained how to use a <div> tag. The real power of <div> tag is to let you create the overall layout for a webpage. We will cover this concept when we teach you how to create a complete website from scratch in a step by step manner.

Need Learning Guidence?
Join our Study Groups and get step by step guidence.
Learn HTML and CSS
The goal of creating this study group is to help students who are beginners to HTML and CSS program
7
Members
1
Questions Asked
0
Tasks Added
Learn Website Development
This goal of this study group is to help students learn the basics of website development using HTM
1
Members
0
Questions Asked
0
Tasks Added
Website Development Interview Preparation
This goal of this study group is to help students prepare for their website development interviews.
1
Members
0
Questions Asked
0
Tasks Added
Web Wars 1.0 - Build Your Digital CV
The goal of this study group is to manage all the communication for the 'Web Wars 1.0 - Build Your
110
Members
0
Questions Asked
0
Tasks Added

Quick Links

E-Magazines

@

Total Followers
Study Group Created
Study Group Joined
Following Teacher
Following Organization
Blog Articles Added
Questions Asked
Questions Answered
Jobs Posted
Total Members in Group
Questions asked by members
Tasks added in this Group

Please wait..

Ok

Login to Open ESchool OR Create your account    Login   SignUp