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: