10 More about HTML div tag

10 More about HTML divs . html and css tutorial

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

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.

Join the FULL HTML and CSS Tutorial Here >>

 

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:

Join the FULL HTML and CSS Tutorial Here >>

 

Comment Here