Container Tag in HTML - Naukri Code 360

Syntax

The general syntax of a container tag includes an opening tag, content, and a closing tag. The content can be plain text, other HTML elements, or both.

General Syntax:

<container-tag>
    Content or other HTML elements
</container-tag>

Here:

<container-tag> is the opening tag.
Content is the text or elements inside the tag.
</container-tag> is the closing tag.

Example:

<div>
    <h1>Welcome to Coding Ninjas</h1>
    <p>Learn web development with ease!</p>
</div>

Structure of a Container Tag

A container tag in HTML is made up of two parts: an opening tag & a closing tag. The opening tag starts with a `<` followed by the tag name & ends with a `>`. The closing tag is similar but includes a `/` before the tag name. Everything between these two tags is considered part of the container.

For example, the `<div>` tag is one of the most commonly used container tags. Here’s how it looks:

<div>
    This is a container. It can hold text, images, or other HTML elements.
</div>

In this example, the `<div>` tag acts as a container for the text inside it. The opening tag is `<div>`, & the closing tag is `</div>`.

Container tags are not limited to `<div>`. Other examples include `<section>`, `<article>`, `<header>`, & `<footer>`. Each of these tags serves a specific purpose, but they all follow the same structure: an opening tag, content, & a closing tag.

Let’s take another example with the `<section>` tag:

<section>
    <h1>This is a heading inside a section</h1>
    <p>This is a paragraph inside the same section.</p>
</section>

Here, the `<section>` tag groups a heading & a paragraph together. This makes it easier to style or manipulate these elements as a single unit.

Container tags are essential because they help organize content on a webpage. Without them, HTML would be a mess of ungrouped elements, making it hard to manage or style.

Example

Using the <div> Tag

The <div> tag is one of the most commonly used container tags in HTML. It is a block-level element used to group content.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Container Tag Example</title>
    <style>
        .container {
            border: 2px solid #4CAF50;
            padding: 20px;
            margin: 10px 0;
        }
        .container h1 {
            color: #4CAF50;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to Coding Ninjas</h1>
        <p>This is an example of using the <strong>&lt;div&gt;</strong> tag as a container.</p>
    </div>
</body>
</html>

Output:

A bordered box containing a heading and a paragraph.
The text inside the <h1> tag is styled with a green color due to the applied CSS.

Using the <section> Tag

The <section> tag is another container tag, often used to define sections of a document.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Section Example</title>
</head>
<body>
    <section>
        <h2>Introduction to Web Development</h2>
        <p>Web development involves creating websites and applications for the internet.</p>
    </section>
    <section>
        <h2>Why Learn HTML?</h2>
        <p>HTML is the backbone of every website, making it essential for developers.</p>
    </section>
</body>
</html>

Output:

Two distinct sections, each with a heading and a paragraph.
The <section> tag helps logically group content into meaningful parts.

3. `<article>` Tag

The `<article>` tag is used for self-contained content like blog posts, news articles, or user comments.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Article Example</title>
</head>
<body>
   <article>
       <h2>How to Learn HTML</h2>
       <p>HTML is the foundation of web development. Start by learning the basics of tags & attributes.</p>
   </article>
</body>
</html>

Output

This example shows how the `<article>` tag can be used to wrap a blog post or an article.

4. `<header>` Tag

The `<header>` tag is used to define the header of a webpage or a section. It often contains logos, navigation menus, or introductory content.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Header Example</title>
</head>
<body>
   <header>
       <h1>Welcome to My Website</h1>
       <nav>
           <a href="#">Home</a>
           <a href="#">About</a>
           <a href="#">Contact</a>
       </nav>
   </header>
</body>
</html>

Output

In this example, the `<header>` tag contains a heading & a navigation menu.

5. `<footer>` Tag

The `<footer>` tag is used to define the footer of a webpage or a section. It usually contains copyright information, contact details, or links.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Footer Example</title>
   <style>
       footer {
           background-color: #f1f1f1;
           text-align: center;
           padding: 10px;
           position: fixed;
           bottom: 0;
           width: 100%;
           border-top: 1px solid #ccc;
       }
       footer a {
           color: #007BFF;
           text-decoration: none;
       }
       footer a:hover {
           text-decoration: underline;
       }
   </style>
</head>
<body>
   <h1>Welcome to My Website</h1>
   <p>Explore content and learn more about us.</p>
   <footer>
       <p>© 2023 My Website. All rights reserved.</p>
       <p>Contact us at <a href="mailto:info@example.com">info@example.com</a></p>
   </footer>
</body>
</html>

Output

Here, the `<footer>` tag wraps copyright information & a contact link.

These examples show how container tags help organize & structure content on a webpage. Each tag has a specific purpose, making your HTML more meaningful & easier to manage.

Nesting Container Tags

Nested container tags are when one container tag is placed inside another. This is a common practice in HTML to create complex layouts & organize content hierarchically. Let’s take a look at this concept in detail.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nesting Containers</title>
    <style>
        .outer-container {
            border: 2px dashed #000;
            padding: 10px;
        }
        .inner-container {
            border: 2px solid #4CAF50;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="outer-container">
        <h2>Outer Container</h2>
        <div class="inner-container">
            <h3>Inner Container</h3>
            <p>This is content inside a nested container.</p>
        </div>
    </div>
</body>
</html>

Output:

An outer container with a dashed border containing another container with a solid border.
This structure demonstrates how container tags can be used together.

Example 2: Complex Nesting

Let’s create a more complex structure using multiple container tags like `<section>`, `<article>`, & `<div>`.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Section and Article Example</title>
</head>
<body>
    <section>
        <h2>Blog Posts</h2>
        <article>
            <h3>Post Title 1</h3>
            <div>
                <p>This is the content of the first blog post.</p>
            </div>
        </article>
        <article>
            <h3>Post Title 2</h3>
            <div>
                <p>This is the content of the second blog post.</p>
            </div>
        </article>
    </section>
</body>
</html>

Output

In this example:

- The `<section>` tag acts as the main container for all blog posts.

- Each `<article>` tag represents a single blog post.

- Inside each `<article>`, a `<div>` is used to wrap the paragraph content.

This hierarchical structure makes it easier to style or manipulate specific parts of the content. For instance, you can apply CSS to all `<article>` tags or target only the `<div>` inside them.

Example 3: Nesting with Semantic Tags

Let’s use semantic tags like `<header>`, `<main>`, & `<footer>` to create a well-structured webpage.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Web Page</title>
</head>
<body>
    <header>
        <h1>My Website</h1>
        <nav>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </nav>
    </header>
    <main>
        <section>
            <h2>About Us</h2>
            <p>We are a team of developers passionate about creating amazing websites.</p>
        </section>
        <section>
            <h2>Our Services</h2>
            <div>
                <p>Web Development</p>
                <p>Mobile App Development</p>
                <p>UI/UX Design</p>
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2023 My Website. All rights reserved.</p>
    </footer>
</body>
</html>

Output

In this example:

- The `<header>` contains the website title & navigation.

- The `<main>` tag wraps the main content of the webpage, which includes two `<section>` tags.

- Each `<section>` contains a heading & either a paragraph or a `<div>` with multiple paragraphs.

- The `<footer>` contains copyright information.

Nested container tags allow you to create well-organized & meaningful HTML structures. They make your code easier to read, maintain, & style.

Empty Container Tags

Empty container tags are container tags that do not wrap any content. They are used for specific purposes like placeholders, dynamic content insertion, or as structural elements in frameworks. Let’s understand this in detail.

Example 1: Empty `<div>` Tag

An empty `<div>` tag can act as a placeholder for content that will be added later, either dynamically via JavaScript or during development.

<div id="placeholder"></div>

In this example, the `<div>` tag is empty but has an `id` attribute. This makes it easy to target & insert content later using JavaScript:


document.getElementById("placeholder").innerHTML = "<p>This content was added dynamically!</p>";

Example 2: Empty `<section>` Tag

An empty `<section>` tag can be used as a structural placeholder for content that will be added dynamically or during a later stage of development.

<section id="blog-posts"></section>

This `<section>` tag can later be populated with blog posts fetched from a database or an API.

Example 3: Empty `<ul>` Tag

An empty `<ul>` (unordered list) tag can be used as a placeholder for list items that will be added dynamically.

<ul id="task-list"></ul>

You can add list items to this `<ul>` tag using JavaScript:



const tasks = ["Task 1", "Task 2", "Task 3"];
const taskList = document.getElementById("task-list");


tasks.forEach(task => {
    const li = document.createElement("li");
    li.textContent = task;
    taskList.appendChild(li);
});

This will dynamically add list items to the empty `<ul>` tag.

Example 4: Empty `<canvas>` Tag

The `<canvas>` tag is often left empty initially because its content is generated using JavaScript.

<canvas id="myCanvas" width="200" height="100"></canvas>

You can use JavaScript to draw on the canvas:

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 150, 80);

This code draws a blue rectangle on the empty `<canvas>` element.

Example 5: Empty `<iframe>` Tag

An empty `<iframe>` tag can be used as a placeholder for embedding external content like videos or maps.

<iframe id="video-frame" width="560" height="315"></iframe>

You can dynamically set the `src` attribute to load content:

document.getElementById("video-frame").src = "https://www.youtube.com/embed/dQw4w9WgXcQ";

This will load a YouTube video into the empty `<iframe>`.

Why Use Empty Container Tags?

1. Dynamic Content: They act as placeholders for content that will be added later, often via JavaScript.

2. Structural Organization: They help maintain the structure of a webpage, even when content is not yet available.

3. Framework Usage: Many frameworks & libraries use empty container tags to dynamically render components.

Empty container tags are a powerful tool in web development, allowing for flexibility & dynamic content management.

Semantic Meaning

Semantic meaning in HTML refers to using tags that convey the purpose or role of the content they contain. Unlike generic container tags like `<div>`, semantic tags make the structure of a webpage more meaningful & accessible. Let’s discuss this concept in little more detail with examples.

Example 1: `<header>` Tag

The `<header>` tag is used to define the header of a webpage or a section. It typically contains introductory content like logos, navigation menus, or headings.

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>

Here, the `<header>` tag clearly indicates that it contains the website’s header content. This makes it easier for search engines & screen readers to understand the structure of the page.

Example 2: `<main>` Tag

The `<main>` tag represents the main content of a webpage. It should not include content that is repeated across multiple pages, like headers or footers.

<main>
    <h2>About Us</h2>
    <p>We are a team of developers passionate about creating amazing websites.</p>
</main>

This example shows how the `<main>` tag is used to wrap the primary content of the page.

Example 3: `<article>` Tag

The `<article>` tag is used for self-contained content like blog posts, news articles, or user comments.

<article>
    <h2>How to Learn HTML</h2>
    <p>HTML is the foundation of web development. Start by learning the basics of tags & attributes.</p>
</article>

Here, the `<article>` tag clearly indicates that it contains an independent piece of content.

Example 4: `<section>` Tag

The `<section>` tag is used to define a section of a webpage. It groups related content together.

<section>
    <h2>Our Services</h2>
    <p>We offer web development, mobile app development, & UI/UX design services.</p>
</section>

This example shows how the `<section>` tag is used to group content about services.

Example 5: `<footer>` Tag

The `<footer>` tag is used to define the footer of a webpage or a section. It usually contains copyright information, contact details, or links.

<footer>
    <p>&copy; 2023 My Website. All rights reserved.</p>
    <p>Contact us at <a href="mailto:info@example.com">info@example.com</a></p>
</footer>

Here, the `<footer>` tag clearly indicates that it contains footer content.

Why Use Semantic Tags?

1. Accessibility: Screen readers & assistive technologies rely on semantic tags to navigate & interpret web content.

2. SEO: Search engines use semantic tags to understand the structure & content of a webpage, improving search rankings.

3. Readability: Semantic tags make the code easier to read & maintain, as they clearly indicate the purpose of each section.

Comparison: Semantic vs Non-Semantic Tags

Let’s compare a semantic structure with a non-semantic one.

Non-Semantic Structure

<div>
    <div>
        <h1>Welcome to My Website</h1>
        <div>
            <a href="#">Home</a>
            <a href="#">About</a>
            <a href="#">Contact</a>
        </div>
    </div>
    <div>
        <h2>About Us</h2>
        <p>We are a team of developers passionate about creating amazing websites.</p>
    </div>
    <div>
        <p>&copy; 2023 My Website. All rights reserved.</p>
    </div>
</div>

Semantic Structure

<header>
    <h1>Welcome to My Website</h1>
    <nav>
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </nav>
</header>
<main>
    <section>
        <h2>About Us</h2>
        <p>We are a team of developers passionate about creating amazing websites.</p>
    </section>
</main>
<footer>
    <p>&copy; 2023 My Website. All rights reserved.</p>
</footer>

The semantic structure is more meaningful & easier to understand for both developers & machines.

Global Attributes

Global attributes are attributes that can be used with any HTML element, including container tags. They provide additional functionality or metadata to elements, making them more versatile & accessible. Let’s take a look at some of the commonly used global attributes.

1. `class` Attribute

The `class` attribute is used to assign one or more class names to an element. It is primarily used for styling with CSS or targeting elements with JavaScript.

<div class="container">
    <p class="text-center">This is a centered text inside a container.</p>
</div>

In this example:

- The `<div>` tag has a class named `container`.

- The `<p>` tag has a class named `text-center`.

You can use CSS to style these elements:

.container {
    border: 1px solid #ccc;
    padding: 20px;
}

.text-center {
    text-align: center;
}

2. `id` Attribute

The `id` attribute is used to assign a unique identifier to an element. It is often used to target specific elements with JavaScript or CSS.

<section id="about-us">
    <h2>About Us</h2>
    <p>We are a team of developers passionate about creating amazing websites.</p>
</section>

You can target this section using JavaScript:

document.getElementById("about-us").style.backgroundColor = "lightblue";

Or style it using CSS:

#about-us {
    background-color: lightblue;
    padding: 20px;
}

3. `style` Attribute

The `style` attribute is used to apply inline CSS styles directly to an element.

<div style="background-color: yellow; padding: 15px;">
    <p style="font-size: 18px; color: blue;">This is a styled paragraph.</p>
</div>

Here, the `<div>` & `<p>` tags have inline styles applied to them.

4. `title` Attribute

The `title` attribute provides additional information about an element. It is often displayed as a tooltip when the user hovers over the element.

<p title="This is a tooltip">Hover over this text to see the tooltip.</p>

When you hover over the text, the tooltip "This is a tooltip" will appear.

5. `data-*` Attribute

The `data-*` attribute is used to store custom data private to the page or application. It can be accessed using JavaScript.

<div data-user-id="12345" data-role="admin">
    <p>User Information</p>
</div>

You can access this data using JavaScript:

const userDiv = document.querySelector("div");
console.log(userDiv.dataset.userId); // Output: 12345
console.log(userDiv.dataset.role);   // Output: admin

6. `lang` Attribute

The `lang` attribute specifies the language of the content inside an element. It is useful for accessibility & SEO.

<p lang="fr">Ceci est un paragraphe en français.</p>

This tells browsers & screen readers that the content is in French.

7. `tabindex` Attribute

The `tabindex` attribute specifies the tab order of an element. It is useful for improving keyboard navigation.

<button tabindex="1">First Button</button>
<button tabindex="3">Third Button</button>
<button tabindex="2">Second Button</button>

In this example, the buttons will be focused in the order: First Button → Second Button → Third Button.

8. `aria-*` Attributes

The `aria-*` attributes are used to improve accessibility for screen readers. They provide additional information about elements.

<button aria-label="Close" onclick="closeModal()">X</button>

Here, the `aria-label` attribute provides a description of the button’s purpose for screen readers.

Why Use Global Attributes?

1. Flexibility: They can be used with any HTML element, making them highly versatile.

2. Accessibility: Attributes like `aria-*` & `tabindex` improve the accessibility of web content.

3. Customization: Attributes like `class`, `id`, & `data-*` allow for easy styling & scripting.

HTML Forms and Container Tags

HTML forms are used to collect user input, & container tags play a crucial role in organizing & structuring form elements. Let’s explore how container tags like `<form>`, `<fieldset>`, & `<div>` are used in forms with complete code examples.

Example 1: Basic Form Structure

A basic form uses the `<form>` tag as the main container. Inside it, you can use other container tags to group related elements.

<form action="/submit-form" method="POST">
    <div>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name" required>
    </div>
    <div>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
    </div>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

In this example:

- The `<form>` tag acts as the main container for all form elements.

- Each `<div>` tag groups a label & its corresponding input field.

- The `action` attribute specifies where the form data will be sent, & the `method` attribute defines how the data will be sent (e.g., POST).

Example 2: Using `<fieldset>` & `<legend>`

The `<fieldset>` tag is used to group related form elements, & the `<legend>` tag provides a caption for the group.

<form action="/submit-form" method="POST">
    <fieldset>
        <legend>Personal Information</legend>
        <div>
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        <div>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
        </div>
    </fieldset>
    <fieldset>
        <legend>Preferences</legend>
        <div>
            <label for="newsletter">Subscribe to Newsletter:</label>
            <input type="checkbox" id="newsletter" name="newsletter">
        </div>
        <div>
            <label for="theme">Preferred Theme:</label>
            <select id="theme" name="theme">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
            </select>
        </div>
    </fieldset>
    <div>
        <button type="submit">Submit</button>
    </div>
</form>

Here:

- The `<fieldset>` tag groups related form elements into sections.

- The `<legend>` tag provides a title for each group.

- This structure makes the form more organized & user-friendly.

Example 3: Nested Containers in Forms

You can nest container tags like `<div>` inside `<fieldset>` to create more complex layouts.

<form action="/submit-form" method="POST">
    <fieldset>
        <legend>Contact Details</legend>
        <div>
            <label for="phone">Phone:</label>
            <input type="tel" id="phone" name="phone">
        </div>
        <div>
            <label for="address">Address:</label>
            <textarea id="address" name="address"></textarea>
        </div>
    </fieldset>
    <fieldset>
        <legend>Account Settings</legend>
        <div>
            <label for="username">Username:</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
    </fieldset>
    <div>
        <button type="submit">Create Account</button>
    </div>
</form>

In this example:

- The `<fieldset>` tags group form elements into logical sections.

- The `<div>` tags inside each `<fieldset>` further organize the content.

Example 4: Styling Forms with Container Tags

You can use container tags to apply styles to specific parts of a form.

<form action="/submit-form" method="POST" style="max-width: 400px; margin: auto;">
    <div style="background-color: #f9f9f9; padding: 20px; border-radius: 8px;">
        <div style="margin-bottom: 15px;">
            <label for="name" style="display: block; margin-bottom: 5px;">Name:</label>
            <input type="text" id="name" name="name" style="width: 100%; padding: 8px;" required>
        </div>
        <div style="margin-bottom: 15px;">
            <label for="email" style="display: block; margin-bottom: 5px;">Email:</label>
            <input type="email" id="email" name="email" style="width: 100%; padding: 8px;" required>
        </div>
        <div>
            <button type="submit" style="background-color: #007bff; color: white; padding: 10px 20px; border: none; border-radius: 5px;">Submit</button>
        </div>
    </div>
</form>

Here:

- The outer `<div>` applies a background color, padding, & border radius to the form.

- Each inner `<div>` styles the input fields & labels.

Why Use Container Tags in Forms?

1. Organization: They help group related elements, making the form easier to read & maintain.

2. Styling: They allow you to apply styles to specific sections of the form.

3. Accessibility: Properly structured forms are more accessible to screen readers & assistive technologies.

HTML Tables and Container Tags

HTML tables are used to display data in a structured format, & container tags like `<table>`, `<thead>`, `<tbody>`, & `<tfoot>` help organize the content within tables. Let’s discuss how these tags are used with complete code examples.

Example 1: Basic Table Structure

A basic table uses the `<table>` tag as the main container. Inside it, you can use `<tr>` (table row), `<th>` (table header), & `<td>` (table data) tags to define rows & cells.

<table border="1">
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>City</th>
    </tr>
    <tr>
        <td>John Doe</td>
        <td>28</td>
        <td>New York</td>
    </tr>
    <tr>
        <td>Jane Smith</td>
        <td>34</td>
        <td>Los Angeles</td>
    </tr>
</table>

In this example:

- The `<table>` tag acts as the main container for the table.

- The `<tr>` tag defines each row.

- The `<th>` tag defines header cells, & the `<td>` tag defines data cells.

Example 2: Using `<thead>`, `<tbody>`, & `<tfoot>`

The `<thead>`, `<tbody>`, & `<tfoot>` tags are used to group table content into header, body, & footer sections.

<table border="1">
    <thead>
        <tr>
            <th>Product</th>
            <th>Price</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Laptop</td>
            <td>$1200</td>
            <td>10</td>
        </tr>
        <tr>
            <td>Smartphone</td>
            <td>$800</td>
            <td>15</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">Total</td>
            <td>$20000</td>
        </tr>
    </tfoot>
</table>

Here:

- The `<thead>` tag contains the table header.

- The `<tbody>` tag contains the main table data.

- The `<tfoot>` tag contains the table footer, which summarizes the data.

Example 3: Styling Tables with Container Tags

You can use container tags to apply styles to specific parts of a table.

<table style="width: 100%; border-collapse: collapse;">
    <thead style="background-color: #f2f2f2;">
        <tr>
            <th style="padding: 10px; border: 1px solid #ddd;">Product</th>
            <th style="padding: 10px; border: 1px solid #ddd;">Price</th>
            <th style="padding: 10px; border: 1px solid #ddd;">Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding: 10px; border: 1px solid #ddd;">Laptop</td>
            <td style="padding: 10px; border: 1px solid #ddd;">$1200</td>
            <td style="padding: 10px; border: 1px solid #ddd;">10</td>
        </tr>
        <tr>
            <td style="padding: 10px; border: 1px solid #ddd;">Smartphone</td>
            <td style="padding: 10px; border: 1px solid #ddd;">$800</td>
            <td style="padding: 10px; border: 1px solid #ddd;">15</td>
        </tr>
    </tbody>
    <tfoot style="background-color: #f2f2f2;">
        <tr>
            <td colspan="2" style="padding: 10px; border: 1px solid #ddd;">Total</td>
            <td style="padding: 10px; border: 1px solid #ddd;">$20000</td>
        </tr>
    </tfoot>
</table>

In this example:

- The `<thead>` & `<tfoot>` tags have a light gray background.

- Each cell has padding & a border for better readability.

Example 4: Nested Tables

You can nest tables inside other tables to create complex layouts.

<table border="1">
    <tr>
        <th>Category</th>
        <th>Details</th>
    </tr>
    <tr>
        <td>Electronics</td>
        <td>
            <table border="1">
                <tr>
                    <th>Product</th>
                    <th>Price</th>
                </tr>
                <tr>
                    <td>Laptop</td>
                    <td>$1200</td>
                </tr>
                <tr>
                    <td>Smartphone</td>
                    <td>$800</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

Here:

- The outer table contains a row with two cells.

- The second cell contains a nested table with its own rows & cells.

Why Use Container Tags in Tables?

1. Organization: They help group table content into logical sections like header, body, & footer.

2. Styling: They allow you to apply styles to specific parts of the table.

3. Accessibility: Properly structured tables are more accessible to screen readers & assistive technologies.

HTML Multimedia Elements

HTML multimedia elements like `<audio>`, `<video>`, & `<img>` are used to embed audio, video, & images into webpages. Container tags like `<div>` or `<figure>` can be used to wrap these elements for better organization & styling. Let’s discuss how these elements work:

Example 1: Embedding an Image

The `<img>` tag is used to embed images. You can wrap it in a `<div>` or `<figure>` tag for better structure.

<div style="text-align: center;">
    <img src="example.jpg" alt="Example Image" style="max-width: 100%; height: auto;">
    <p style="font-style: italic;">This is an example image.</p>
</div>

In this example:

- The `<img>` tag embeds an image with the `src` attribute pointing to the image file.

- The `alt` attribute provides alternative text for screen readers & if the image fails to load.

- The `<div>` tag centers the image & adds a caption below it.

Example 2: Embedding Audio

The `<audio>` tag is used to embed audio files. You can use the `<div>` tag to style or position the audio player.

<div style="background-color: #f9f9f9; padding: 20px; border-radius: 8px;">
    <audio controls>
        <source src="example.mp3" type="audio/mpeg">
        Your browser does not support the audio element.
    </audio>
    <p style="margin-top: 10px;">Listen to this example audio.</p>
</div>

Here:

- The `<audio>` tag embeds an audio file with the `controls` attribute to display play/pause buttons.

- The `<source>` tag specifies the audio file & its format.

- The `<div>` tag adds a background color, padding, & a border radius to the audio player.

Example 3: Embedding Video

The `<video>` tag is used to embed video files. You can wrap it in a `<div>` or `<figure>` tag for better organization.

<div style="text-align: center;">
    <video controls width="600">
        <source src="example.mp4" type="video/mp4">
        Your browser does not support the video element.
    </video>
    <p style="font-style: italic;">Watch this example video.</p>
</div>

In this example:

- The `<video>` tag embeds a video file with the `controls` attribute to display play/pause buttons.

- The `<source>` tag specifies the video file & its format.

- The `<div>` tag centers the video & adds a caption below it.

Example 4: Using `<figure>` & `<figcaption>`

The `<figure>` & `<figcaption>` tags are used to group multimedia content with a caption.

<figure style="text-align: center;">
    <img src="example.jpg" alt="Example Image" style="max-width: 100%; height: auto;">
    <figcaption style="font-style: italic;">This is an example image with a caption.</figcaption>
</figure>

Here:

- The `<figure>` tag groups the image & its caption.

- The `<figcaption>` tag provides a caption for the image.

Example 5: Responsive Multimedia

You can use container tags to make multimedia elements responsive.

<div style="max-width: 800px; margin: auto;">
    <video controls style="width: 100%; height: auto;">
        <source src="example.mp4" type="video/mp4">
        Your browser does not support the video element.
    </video>
</div>

In this example:

- The `<div>` tag limits the maximum width of the video to 800px.

- The `style="width: 100%; height: auto;"` makes the video responsive, ensuring it scales with the screen size.

Why Use Container Tags with Multimedia Elements?

1. Organization: They help group multimedia content with captions or additional text.

2. Styling: They allow you to apply styles like padding, margins, or backgrounds to multimedia elements.

3. Responsiveness: They make it easier to create responsive designs that adapt to different screen sizes.

Custom Container Tags and Frameworks

Custom container tags are user-defined elements that extend the functionality of HTML. Frameworks like React, Vue, & Angular allow developers to create reusable components, which act as custom container tags. Let’s take a look at how custom container tags work with the help of examples.

Example 1: Custom Container Tag in HTML

While HTML doesn’t natively support custom tags, you can create them using JavaScript & CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Container Tag</title>
    <style>
        my-container {
            display: block;
            background-color: #f9f9f9;
            padding: 20px;
            border-radius: 8px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <my-container>
        <h2>Welcome to My Custom Container</h2>
        <p>This is a custom container created using HTML & CSS.</p>
    </my-container>


    <script>
        // Define the custom element
        class MyContainer extends HTMLElement {
            constructor() {
                super();
            }
        }
        customElements.define('my-container', MyContainer);
    </script>
</body>
</html>

In this example:

- A custom tag `<my-container>` is created.

- CSS styles are applied to the custom tag to make it look like a container.

- JavaScript is used to define the custom element using the `customElements.define()` method.

Example 2: Custom Container Tag in React

React allows you to create reusable components that act as custom container tags.

import React from 'react';

function MyContainer({ children }) {
    return (
        <div style={{ backgroundColor: '#f9f9f9', padding: '20px', borderRadius: '8px', margin: '10px 0' }}>
            {children}
        </div>
    );
}

function App() {
    return (
        <MyContainer>
            <h2>Welcome to My Custom Container</h2>
            <p>This is a custom container created using React.</p>
        </MyContainer>
    );
}

export default App;

Here:

- The `MyContainer` component acts as a custom container tag.

- It accepts `children` as a prop, which allows it to wrap other elements.

- The component is used in the `App` component to display content.

Example 3: Custom Container Tag in Vue

Vue also supports creating reusable components that act as custom container tags.

<template>
    <div id="app">
        <my-container>
            <h2>Welcome to My Custom Container</h2>
            <p>This is a custom container created using Vue.</p>
        </my-container>
    </div>
</template>

<script>
export default {
    components: {
        'my-container': {
            template: `
                <div style="background-color: #f9f9f9; padding: 20px; border-radius: 8px; margin: 10px 0;">
                    <slot></slot>
                </div>
            `
        }
    }
};
</script>


<style>
#app {
    font-family: Arial, sans-serif;
}
</style>

In this example:

- The `my-container` component is defined with a template that wraps content using the `<slot>` tag.

- The component is used in the main `App` template to display content.

Example 4: Custom Container Tag in Angular

Angular allows you to create reusable components that act as custom container tags.

import { Component } from '@angular/core';


@Component({
    selector: 'my-container',
    template: `
        <div style="background-color: #f9f9f9; padding: 20px; border-radius: 8px; margin: 10px 0;">
            <ng-content></ng-content>
        </div>
    `
})
export class MyContainerComponent {}


@Component({
    selector: 'app-root',
    template: `
        <my-container>
            <h2>Welcome to My Custom Container</h2>
            <p>This is a custom container created using Angular.</p>
        </my-container>
    `
})
export class AppComponent {}

In this code:

- The `MyContainerComponent` is defined with a template that wraps content using the `<ng-content>` tag.

- The component is used in the `AppComponent` template to display content.

Why Use Custom Container Tags?

1. Reusability: They allow you to create reusable components, reducing code duplication.

2. Organization: They help structure & organize content more effectively.

3. Framework Integration: Frameworks like React, Vue, & Angular make it easy to create & use custom container tags.

Responsive Design with Container Tags

Responsive design ensures that webpages look good & function well on all devices, from desktops to smartphones. Container tags like `<div>`, `<section>`, & `<article>` play a key role in creating responsive layouts. Let’s explore how to use these tags for responsive design with complete code examples.

Frequently Asked Questions

What is a container tag in HTML?

A container tag is an HTML element that groups content together. It always has an opening and a closing tag and is commonly used to organize, style, and structure web pages.

What are examples of container tags?

Examples of container tags include <div>, <section>, <article>, and <aside>. Each serves different purposes but helps in organizing web page content.

Can container tags be nested?

Yes, container tags can be nested. For example, a <div> can contain another <div> or a <section>, allowing developers to create more complex layouts.

Conclusion

Container tags in HTML are vital for organizing and styling web pages. They allow developers to group elements, making the code more readable and easier to manage. Common container tags include <div> and <section>, which can be styled and nested for complex layouts. By understanding and using container tags effectively, you can create professional and visually appealing web pages.

You can also check out our other blogs on Code360.