HTML Tutorial

HTML Tag: <div>

The <div> tag, short for "division," acts as a versatile container in HTML to group elements for styling, layout, and logical organization.

Usage of <div>:

  • Divide a web page into multiple sections
  • Apply CSS styles to specific areas of the page
  • Group elements logically for enhanced accessibility and content organization

Attributes of <div>:

  • id: Assigns a unique identifier to the <div> for easy referencing in CSS and JavaScript
  • class: Assigns a class name to the <div> for applying styles to multiple similar elements
  • style: Allows inline CSS styling directly within the <div> tag

Examples with <div>:

  • Header Section:
<div id="header">
  <h1>Website Title</h1>
</div>
  • Content Area:
<div class="content-container">
  <p>This is the main content of the page.</p>
</div>
  • Sidebar:
<div id="sidebar">
  <ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
  </ul>
</div>

Simple HTML Example:

To demonstrate the usage of the <div> tag, consider the following example:

<!DOCTYPE html>
<html>
<head>
  <title>Exploring the <div> Tag</title>
</head>
<body>
  <div id="main-container">
    <h1>Welcome to the Website!</h1>
    <div class="content-area">
      <p>This is the main content, which you can easily style using CSS.</p>
    </div>
    <div id="sidebar">
      <ul>
        <li>Menu Item 1</li>
        <li>Menu Item 2</li>
      </ul>
    </div>
  </div>
</body>
</html>

Remember, <div> is a versatile and essential tag for managing the layout and structure of your HTML documents. By understanding its attributes and usage, you can effectively organize and style your web pages.