HTML Div Tag

HTML <div> tag is a generic container used to group and style content. It doesn’t add any semantic meaning to the content but is useful for applying CSS styles and JavaScript functionality. It is one of the most commonly used tags for structuring a webpage layout.

HTML <Div> Tag with Syntax:

<div>
  <!-- Content goes here -->
</div>

HTML <Div> Tag with Attributes:

id: set a unique identifier to the <div> which can be used for styling or scripting tag.
class: set one or more class names to the <div> which can be used for style with CSS or target with JavaScript.
style: Applies inline CSS styles directly to the <div>.

HTML <Div> Tag with Example

<!DOCTYPE html>
<html>
<head>
  <title>Div Tag with Example</title>
  <style>
    .container {
      width: 80%;
      margin: auto;
      padding: 20px;
      border: 1px solid #ccc;
    }
    .header {
      background-color: #f4f4f4;
      padding: 10px;
      text-align: center;
    }
    .content {
      margin: 20px 0;
    }
    .footer {
      background-color: #f4f4f4;
      padding: 10px;
      text-align: center;
    }
  </style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>Website Header</h1>
  </div>

  <div class="content">
    <p>This is the main content area of the page.</p>
  </div>

  <div class="footer">
    <p>Footer Information</p>
  </div>
</div>

</body>
</html>

306