How to Use the DIV Tag in HTML – Instructions
Overview of the DIV Tag in HTML:
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.
<p>This is my first paragraph.</p>
<h3>This heading is set to blue in the div element.</h3>
<p>This text is also set to blue.</p>
<p>This text is no longer inside the div element.</p>
|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.
Instructions on How to Use the DIV Tag in HTML:
- To use the DIV tag in HTML, open an HTML document to edit the HTML code.
- Place your insertion mark cursor at the place in the HTML code where you want to create a new block of content.
- Type the <div> tag.
- Type the rest of the content to contain within the DIV tag.
- To finish, then type the </div> tag.
Video Lesson on Using the DIV Tag in HTML:
The following video lesson, titled “Div Element,” shows how to write 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.”