11 More about HTML Divs – Nested Divs

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

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:

Recommended VPS Providers

Find out the VPS providers I recommend.

Comment Here

We use cookies on Bizanosa.com. Continuing to use this website, implies consent of our Privacy Policy Privacy Policy

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close