Container

Containers in HTML

The term "containers" refers to elements that group and contain other elements or content within a webpage. Containers are widely used to create layout structures and provide visual organization.

Types of Containers

1. Block-level Containers

Block-level containers take up the full width of their parent element and create a new line after themselves, stacking vertically. Examples: <div>, <section>, <header>, <footer>, <nav>, <article>, <aside>.

2. Inline Containers

Inline containers do not create a new line after the element, and only take up as much width as the content inside. Examples: <span>, <em>, <strong>, <a>, <label>, <button>.

3. Generic Containers

These are general-purpose containers used for layout and grouping content without semantic meaning. Examples: <div>, <span>.

Example Code 

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Container and List</title>
</head>
<body>
   <div style="width:500px; background-color:antiquewhite; margin:20px;">
      <h1>h1 is a block element</h1>
      <h2>h2 is a block element</h2>
      <p style="background-color:turquoise;">p is a block element</p>

      <ul>
         <li>ul is a block element</li>
         <li>ul is a block element</li>
      </ul>

      <ol type="a">
         <li>ol is a block element</li>
         <li>ol is a block element</li>
      </ol>

      <span>span is an inline element</span>
      <a href="#">a is an inline element</a>
      <strong>strong is an inline element</strong>
      <em>em is an inline element</em>
      <div>div is a block element</div>
   </div>
</body>
</html>

Example Output

h1 is a block element

h2 is a block element

p is a block element

  • ul is a block element
  • ul is a block element
  1. ol is a block element
  2. ol is a block element
span is an inline element
a is an inline element
strong is an inline element
em is an inline element
div is a block element