- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <div> Tag
HTML <div> tag is used to define sections in web pages. This tag is used by developers to group HTML elements, and we can apply CSS styles to multiple div elements at once. The <div> element should only be used when no other semantic element such as <article> or <nav> is appropriate.
Syntax
<div> ..... </div>
Attributes
HTML div tag accept all HTML Global Attributes and Event Attributes.
Creating div section
HTML <div> tag is used to create divisions in html, division are created to keep things in particular sections to divide a webpage into maltiple pasrts.
Example
In the following example, we are using the HTML <div> tag to define two div section in html document.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML div tag</title> </head> <body> <h3>HTML div tag Example</h3> <!-- Using HTML div tag --> <div> This is div tag 1 </div> <div> This a div tag 2 </div> </body>
Nested div section
We can create division inside of division that will be nested divisions. We can use HTML <div> tag to create nested div section.
Example
Here, we are creating the nested div section using <div> tag into to the HTML documents.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML div tag</title> <style> /* using CSS to increase the visibility of divs */ div { border: 2px solid black; padding: 4px; } </style> </head> <body> <h3>HTML div Tag Example</h3> <!-- Using HTML div tag --> <div>Outer <div>Inner <div>Inner1</div> </div> </div> </body> </html>
Multiple div section
We can create multiple division in single webpage based on our requirements, by using HTML <div> tag we can do that as well.
Example
In this example, we are dividing the HTML documents into multiple sections using HTML <div> tag. We are using CSS to style the sections we have created.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML div tag</title> <style> .first { width: 100px; height: 100px; background-color: rgb(4, 109, 109); text-align: center; display: grid; place-items: center; float: left; } .second { width: 100px; height: 100px; background-color: rgb(17, 92, 222); text-align: center; display: grid; place-items: center; float: left; } .third { width: 100px; height: 100px; background-color: rgb(82, 40, 180); text-align: center; display: grid; place-items: center; float: left; } .fourth { width: 100px; height: 100px; background-color: rgb(157, 17, 222); text-align: center; display: grid; place-items: center; float: left; } div { border-radius: 10px; margin: 10px 10px; } div p { color: white; } </style> </head> <body> <h3>HTML div Tag Example</h3> <!-- Using HTML div tag --> <div class="first"> <p>First</p> </div> <div class="second"> <p>Second</p> </div> <div class="third"> <p>Third</p> </div> <div class="fourth"> <p>Fourth</p> </div> </body> </html>
Form in a div section
We can place any component in a div tag to wrap that component, here we are placing a form inside an HTML <div> tag.
Example
Let's look at the following example, where we are going to creating a section for the form using the <div> tag. Then, we are creating another section for the input fields and a button within the form to split the fields into separate sections.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML div tag</title> <style> .myForm { width: 300px; height: 250px; background-color: green; border-radius: 10px; } .myForm h2 { text-align: center; position: relative; top: 10px; color: white; font-family: sans-serif; } .myForm .fields input { position: relative; top: 20px; border-radius: 5px; width: 80%; margin: 20px auto; display: flex; padding: 10px; } .myForm button { width: 100px; position: relative; top: 10px; left: 20px; padding: 10px; border-radius: 5px; } </style> </head> <body> <h3>HTML div Tag Example</h3> <p> Here we have placed a form inside a div, div is playing the role of wrper for the form. </p> <!--div tag--> <div class="myForm"> <h2>Login</h2> <form> <!--div tag--> <div class="fields"> <input type="text" placeholder="Username"> <input type="password" placeholder="password"> <br> <button>Login</button> </div> </form> </div> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
div | Yes | Yes | Yes | Yes | Yes |