HTML Div Element
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.
div tags 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.
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<div>
<p>Hello! This is a paragraph.</p>
</div>
</body>
</html>
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;
}
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
HTML Nesting div tags
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.
<!DOCTYPE html>
<html>
<head>
<title>Atutorialhub demo title</title>
</head>
<body>
<div class="outer-div">
<div class="inner-div">
<p>This is a paragraph</p>
</div>
<div class="inner-div">
<p>This is another paragraph</p>
</div>
</div>
</body>
</html>
This will yield the following result (CSS styles applied for clarity):
This is a paragraph
This is another paragraph
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
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.
NOTE: div section Element should be not nested deeper than 6 layers.
ATutorialHub Related Guide
-
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2Admin
AWS Amazon EC2-Deploy a MERN Stack application to AWS Amazon EC2 we are going to learn to Deploy MERN Application to aws Amazon EC2 set up a web server on the aws.2021-10-28 15:14:42 -
.png "Sea battle game only using HTML and CSS")
Sea battle game only using HTML and CSSAdmin
sea battle game where using only HTML and CSS and animation in css and html tags sea battle game2021-09-20 03:43:36
HTML Tutorials Comments (9)
User Comments
panduranga gupta
2021-07-05 07:03:13good website for learning and help me a lot
raju
2021-09-25 14:58:47The awsome website i am looking like for a long time, good work atutorialhub team keep doing
Shivani
2021-09-01 15:03:56Learning a lot from the courses present on atutorialhub. The courses are very well explained. Great experience
Harshitha
2021-09-10 15:05:45It is very helpful to students and easy to learn the concepts
Sowmya
2021-09-14 15:06:41Great job Tutorials are easy to understand Please make use of it
Zain Khan
2021-09-18 15:07:23Great content and customized courses.
Rudrakshi Bhatt
2021-09-09 15:08:10Well structured coursed and explained really well!
Pavana Somashekar
2021-09-11 15:09:08Good platform for beginners and learn a lot on this website
Sax
2021-09-25 19:35:50Nice website
Leave a Comment