HTML Div <div>

Although HTML tags provide enough flexibility to create a variety of layouts, HTML’s conventional tags don’t really allow for styling.

The HTML div tag allows you to create invisible containers to which we can later apply CSS styling.

You can create as many different div tags, all with unique ID’s to easily apply and repeat styling of certain elements on your page.

Div tags are block level, meaning they allow us to wrap an entire block of HTML code vs span tags which are inline and allows us to wrap a portion of text.

Usage

Use a unique ‘id’ within the div so that each one can be identified when needed.

Examples below.

Code:


<!DOCTYPE html>
<html>
<head>
<!-- This is the stylesheet John created in 2020 -->
<link rel="stylesheet" href="/file/stylesheet.css">
</head>

<body>

<div id="openingparagraphs">

<p>Welcome to my webpage and paragraph 1.</p>

<p>I have so much to say I'm going to need a lot of paragraphs!</p>

</div>

</body>

</html>

Output:

Welcome to my webpage and paragraph 1.

I have so much to say I’m going to need a lot of paragraphs!


As you can see, there is no change in the output, however the 2 paragraphs between the div can now be styled via the CSS stylesheet using ID ‘openingparagraphs’