HTML - tags - div tag

The <div> tag defines a division or a section in an HTML document. The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript. The tag is easily styled by using the "class" or "id" attribute. Any sort of content can be put inside the <div> tag!

The "div" tag is the most usable tag in web development because it helps us to separate out data in the web page and we can create a particular section for particular data or function in the web pages.

Attributes: the <div> element supports the global attributes and events attributes.

syntax

some examples

This is a heading in a div element

This is some text in a div element.

This is some text outside the div element.

code:

                    <style class="spec">
                        .myDiv {border: 5px outset red; background-color: lightblue; text-align: center;}
                    </style>
                    <div>
                        <div style="margin-left: 3vw;" class="myDiv">
                            <h3>This is a heading in a div element</h3>
                            <p class="spec">This is some text in a div element.</p>
                        </div>
                        
                        <p class="spec">This is some text outside the div element.</p>
                    </div>

div tag

Codes:

                    <style>
                        .one{ color: skyblue; background-color: lightgreen; margin: 2px; font-size: 25px;}
                    </style>
                    <div>
                        <div style="margin-left:3vw;" class="one"> div tag   </div>
                        <div style="margin-left:3vw;" class="one"> div tag   </div>
                        <div style="margin-left:3vw;" class="one"> div tag   </div>
                        <div style="margin-left:3vw;" class="one"> div tag   </div>
                    </div>

"div" and "p" tag : specify additional information

The <div> tag specifies additional div that the user can open and close on demand. The tag is often used to create an interactive widget that the user can open and close. By default, the widget is closed. When open, it expands, and displays the content within. Any sort of content can be put inside the <div> tag.

The <p> tag is used in conjuction with the <div> tag to specify a visible heading for the div. The <p> tag sets the visible title, which, when clicked, will open/close additional information. If there is no header, then the browser will show the header "More div", by default.

A disclosure widget is typically presented onscreen using a small triangle which rotates (or twists) to indicate open/closed status, with a label next to the triangle. The contents of the <p> element are used as the label for the disclosure widget.

Attributes: the <div> element includes the global attributes. The tag also support the following additional attribute:

specifies that the div should be visible (open) to the user. To start the <div> box in its open state, add the Boolean "open attribute".

"div" and "p" tag : syntax

"div" and "p" tag : some examples

Epcot Center

Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.

code:
                <div class="spec">
                    <div class="example">
                        <p>Epcot Center</p>
                        <p class="spec">Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international
                        pavilions, award-winning fireworks and seasonal special events.</p>
                    </div>    
                </div>

System Requirements

Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

code:
                <div class="spec ">
                    <div class="example">
                        <p>System Requirements</p>
                        <p class="spec">Requires a computer running an operating system. The computer must have some memory and ideally 
                        some kind of long-term storage. An input device as well as some form of output device is recommended.</p>
                    </div>
                </div>

System Requirements

Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.

code:
                <div class="spec">
                    <div open class="example">
                        <p>System Requirements</p>
                        <p class="spec">Requires a computer running an operating system. The computer must have some memory and ideally
                        some kind of long-term storage. An input device as well as some form of output device is recommended.</p>
                    </div>
                </div>

general:

kind: jpg image
size: 8,697 bytes (12 KB on disk)
created: 4 August 2015 2:20 pm
modified: 5 August 2016 2:20 pm

name & extension:

hide extension

Preview:

code:
                <div class="spec">
                    <div>
                        <p>general:</p>
                        <p class="spec">kind: jpg image<br> size: 8,697 bytes 
                        (12 KB on disk)<br> created: 4 August 2015 2:20 pm<br> modified: 5 August 2016 2:20 pm </p>
                    </div>
                    <br>
                    <div>
                        <p>name & extension:</p>
                        <p class="spec"><input name="fileName" value="5.jpg"></p>
                        <p class="spec"><input name="hideExt" type="checkbox" value="">
                        hide extension</p>
                    </div>
                    <br>
                    <div>
                        <p>Preview:</p>
                        <img src="../../5.jpg" width="50%" alt="holidays picture">
                    </div>
                </div>
                <style>
                    .alt {width:300px;padding:5px;margin-left: 3vw; background:#eee;border:1px solid #ccc;}
                </style>

Apple is a fruit.

An Apple a Day keeps the Doctor away.

code:
                <div class="spec">
                    <div class="example">
                        <!-- <p>Apple</p> -->
                        <p class="spec">Apple is a fruit.</p>
                        <p class="spec">An Apple a Day keeps the Doctor away.</p>
                    </div>
                </div>

I have keys but no doors. I have space but no room. You can enter but can't leave. What am I?

A keyboard.

code:
                <div class="spec">
                    <div class="example">
                        <p>I have keys but no doors. I have space but no room. 
                        You can enter but can't leave. What am I?</p>
                        A keyboard.
                    </div>
                </div>

HTML - tags - div tag

Content

"div" tag : defines a division or section in a document