10 More about HTML div tag

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

10 More about HTML divs

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:

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!