11 More about HTML Divs – Nested Divs

Last updated on October 31st, 2020 at 07:57 am.

11 More about HTML Divs

11 More about HTML Divs

In the last video we looked at other things relating to HTML Divs .

In this video we covered how to do Nested divs, that is a div within a div.

The most important thing to know about divs within divs is the locations of the opening (<div>) and closing (</div>) div tags.

In HTML5 there are other page structure elements that are better suited for certain page blocks. However in cases where there is not better way, you may use divs to accomplish your block level grouping. Note that <div> is mostly used to group elements for the purpose of styling them.

The way to do this is by a code example. In the example let’s nest a div within another div. You may take the code and save it and run it on your browser.

<!DOCTYPE html>
<html>
<head>
<title>A simple Div Example in HTML</title>

</head>
<body>
<!-- Begin the First div ONE 
In this Div Let us create like a Paragraph of Text with a heading, an image and a link
-->
<div> 
	<h1>This is a Heading within the First div</h1>
	<!-- Then comes the image which is taken from lorepixel.com-->
	<img src="https://lorempixel.com/400/200" alt="Image sample" title="Hi"> 

	<p>This is the Paragrapgh which will act like a small article within this div element. .</p>

 <!-- The following is a div within this first div -->
	<div>
	
		<h2>This is a subHeading within the First Inner div</h2>
		<a href="https://bizanosa.com/">Home</a> <br>
		<a href="https://bizanosa.com/coupons/">Coupons</a> <br>
		<a href="https://bizanosa.com/sp/">Skillshare</a> <br>
	</div>


</div>
<!-- End the first div  element here-->

<!-- Begin the Second div ONE 
The second Div will only have links and a horizontal line (<hr>).
The <br> creates a line break
-->


<div>

	<hr>
	<h1>This is a Heading within the Second div</h1>
	<a href="https://bizanosa.com/">Home</a> <br>
	<a href="https://bizanosa.com/coupons/">Coupons</a> <br>
	<a href="https://bizanosa.com/sp/">Skillshare</a> <br>
	
	<!-- The following is a div within this Second div -->
	<div>
	
		<h2>This is a subHeading within the Second Inner div</h2>
		<a href="https://bizanosa.com/">Home</a> <br>
		<a href="https://bizanosa.com/coupons/">Coupons</a> <br>
		<a href="https://bizanosa.com/sp/">Skillshare</a> <br>
		
		<!-- The following is a div within this Inner div -->
		<div>
			<hr>
			<h2>This is a subHeading within the  Inner div</h2>
			<a href="https://bizanosa.com/">Home</a> <br>
			<a href="https://bizanosa.com/coupons/">Coupons</a> <br>
			<a href="https://bizanosa.com/sp/">Skillshare</a> <br>
		</div>
	</div>

</div> <!-- End the second div  element here-->

</body>
</html>

To watch this full HTML and CSS Tutorial click the button below:

Comment Here

Need WordPress help? Linux Server help? Talk to us.

  • We are your own WordPress customer service.
  • We set up Linux servers and install or migrate WordPress. Learn more here.
  • We support WooCommerce too.
  • Check out our WordPress customer support plans here or contact us below .

If you have any questions regarding WordPress support, Linux server support or any of our services, feel free to reach out or read more on our services page.

Join this free course:

How to host multiple WordPress
websites on a VPS

Close me!