11 More about HTML Divs – Nested Divs

11 More about HTML - Nested DIVS

Last updated on July 1st, 2018 at 01:05 pm

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.

 

Join the FULL HTML and CSS Tutorial Here >>

 

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:

Join the FULL HTML and CSS Tutorial Here >>

Comment Here