Back to HTML Course

The <div> tag defines a division or a section in an HTML document.

The <div> tag is used as a container for HTML elements - which is then styled with CSS or manipulated with JavaScript.

The <div> tag is easily styled by using the class or id attribute.

Any sort of content can be put inside the <div> tag!

Note

By default, browsers always place a line break before and after the <div> element.

HTML

<div style="background-color:darkgreen;">
  <h1>HTML</h1>
  <p>This is HTML</p>
</div>
<div style="background-color: orangered">
  <h1>CSS</h1>
  <p>This is CSS</p>
</div>
<div style="background-color:purple">
  <h1>JavaScript</h1>
  <p>This is JavaScript</p>
</div>

CSS

body {
  text-align: center;
}

div {
  color: whitesmoke;
  width: 300px;
  display: inline-block;
  margin: 15px;
  padding: 15px;
  box-shadow: 0 0 10px black;
  font-family: "Courier New", Courier, monospace;
  border-radius: 10px;
}

You can check out the Demo.