FOLLOW US ON TWITTER



FOLLOW US



img/blogimg/html5.jpg


@harish 810

What is the use of div element in HTML?


2021-11-17 20:58 · 5 min read

The div element in HTML is a container element that encapsulates other elements and can be used to group and separate parts of a webpage. A div by itself does not inherently represent anything but is a powerful tool in web design. This topic covers the purpose and applications of the div element.

Basic usage

The <div> element usually has no specific semantic meaning by itself, simply representing a division, and is typically used for grouping and encapsulating other elements within an HTML document and separating those from other groups of content. As such, each <div> is best described by its contents

<div>
<p>Hello! This is a paragraph.</p>
</div>

The div element is typically a block-level element, meaning that it separates a block of an HTML document and occupying the maximum width of the page. Browsers typically have the following default CSS rule:

div {
display: block;
}

Note: It's strongly encouraged by The World Wide Web Consortium (W3C) to view the div element as an element of last resort, for when no other element is suitable. The use of more appropriate elements instead of the div element leads to better accessibility for readers and easier maintainability for authors.

For example, a blog post would be marked up using <article>, a chapter using <section>, a page's navigation aids using <nav>, and a group of form controls using <fieldset>.

<div> elements can be useful for stylistic purposes or to wrap multiple paragraphs within a section that are all to be annotated in a similar way.

Nesting

It is a common practice to place multiple <div> inside another <div>. This is usually referred to as "nesting" elements and allows for further dividing elements into subsections or aid developers with CSS styling.

The <div class="outer-div"> is used to group together two <div class="inner-div"> elements; each containing a <p> element.

<div class="outer-div" style="border: 1px solid;padding:10px">
<div class="inner-div" style="border: 1px solid red;margin:5px;">
<p>This is a paragraph</p>
</div>
<div class="inner-div" style="border: 1px solid red;margin:5px;">
<p>This is another paragraph</p>
</div>
</div>

Nesting inline and block elements While nesting elements you should keep in mind, that there are inline and block elements. while block elements "add a line break in the background", which means, other nested elements are shown in the next line automatically, inline elements can be positioned next to each other by default. Click here to know more about a block and inline element

 

Warning: Avoid deep <div> nesting
A deep and often used nested container layout shows a bad coding style.
 

Rounded corners or some similar functions often create such an HTML code. For most of the last generation browsers, there are CSS3 counterparts. Try to use as few as possible HTML elements to increase the content to tag ratio and reduce page load, resulting in a better ranking in <search engines.

div section Element should be not nested deeper than 6 layers

TAGS:






POST COMMENTS
No Comment

Please login to post comment




POPULAR POSTS

best free web hosting services...
what is new in miui 11?...
free website ssl security using cloudfla...
do you want to make money online?...
CSS3 @IMPORT RULES...
What is HTML Anchor Tag and Hyperlinks?...
How to host a web page in 10 minutes....
CSS3 RESPONSIVE UI...
Tables HTML...
CSS3 FUNCTIONS...
How to use CSS3 Overflow Property?...
CSS3 FILTERS...


RECENT COMMENTS

2022-03-05 11:05
By coder on XAMPP - MySQL shutdown unexpectedly | How to fix MySQL crash unexpectedly
2021-10-12 12:34
By abnongoke on do you want to make money online?
2021-10-12 12:34
By abnongoke on how to get a free website domain name?
2021-10-12 12:34
By solar panel for shed on what is new in miui 11?
2021-10-12 12:34
By solar panel for shed on best free web hosting services
2021-10-12 12:34
By amos tanui on free website ssl security using cloudflare


SOCIAL SHARE



FOLLOW US ON TWITTER



FOLLOW US ON FACEBOOK



FOLLOW US







Recent Blogs



Contact Us

Subscribe Our News-Letter



Kashipur, 244713
Uttarakhand, India



© www.prodevskill.com 2023. All Rights Reserved. Powered by Pro Developer