Try the HTML Course for Free!

How to Use the DIV Tag in HTML – Instructions

/ / HTML, Latest

The DIV Tag in HTML: Video

            This video lesson, titled “Div Element,” shows how to use the DIV tag in HTML. This video lesson is from our complete HTML5 and CSS3 training, titled “Mastering HTML5 and CSS3 Made Easy v.1.0.”

Overview of the DIV Tag in HTML:

           You use the DIV tag in HTML to divide sections of an HTML document. Using the DIV tag lets you define block-level sections of an HTML document. Applying a DIV tag lets you identify the section defined by the DIV tag, so you can then apply formatting or scripting to its content. For example, you can apply CSS styling or client-side scripting, like JavaScript, to content in a DIV tag.

            Also note that you can place any content you want within a DIV tag in HTML. The DIV tag is simply an HTML container. Its only purpose is to let you group together other document elements to which to apply the same CSS style or scripting effect. You can also use CSS stylings to align and position the DIV tag in the page, if needed. However, because the DIV tag is a block-level element, it defaults to spanning its parent page or container.

Start Tag: <div>
End Tag: </div>
Attributes: None
Example: <!DOCTYPE html><html>

<body>

<p>This is my first paragraph.</p>

<div style=”color:#0000FF”>

<h3>This heading is set to blue in the div element.</h3>

<p>This text is also set to blue.</p>

</div>

<p>This text is no longer inside the div element.</p>

</body>

</html>

Changes the text inside the DIV tag to the color blue.

A picture showing the result of the example in the HTML code above on using the DIV tag in HTML when viewed in a web browser.

A picture showing the result of the example in the HTML code above on using the DIV tag in HTML when viewed in a web browser.

Instructions on How to Use the DIV Tag in HTML:

  1. To use the DIV tag in HTML, open an HTML document to edit the HTML code.
  2. Place your insertion mark cursor at the place in the HTML code where you want to create a new block of content.
  3. Type the <div> tag.
  4. Type the rest of the content to contain within the DIV tag.
  5. To finish, then type the </div> tag.
TOP