10 More about HTML div tag

Last updated on October 31st, 2020 at 08:05 am.

10 More about HTML divs

In the last video we said that a div is used for grouping elements that we may want to style in a certain way.

In this post let us look at some examples of what a page may look like with div elements in it.

The way I’m going to do this post is by writing explanations within the code samples.

Example one – Simple  single div

<!DOCTYPE html>

<html>

<head>

<title>A simple Div Example in HTML</title>


</head>

<body>

<! – Begin the div

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 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>


<a href="http://lorempixel.com/"> click here to visit Lorem Pixel.com </a>


</div>

<! – End the div element here-->


</body>

</html>


 

The above example only has one div element. In the next example let us look at another example with different divs.

Note that you can save the above code in an html file and then click to run it on your browser. Most Text Editors also have a way for you to open the html code in your browser. For instance, in Notepad++ , if you click on run you will choose a browser to run the file in.

Example Two – More than one div with different things on the web page

<!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>




</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>


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


</body>

</html>

You can copy and save the code into a new HTML file , run it and see the results.

If you would like to learn HTML and CSS

Use 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