What is a Container tag?

In HTML, there are different types of tags or say instructions which make the developer specify various elements in the document and make the browsers understand what to display.

Tags in HTML are mainly classified into two types, which are:

1. Container tag
2. Empty tag

Now, Let’s understand about the Container tag.

Container tags are basically defined as tags that consist of both opening and closing tags, and in between these two tags, a content is specified, which is to be visible in the browser. This content can either be of one or more lines and can consist of multiple HTML tags, whether it be a Container or an Empty tag. In HTML, Container tags are basically used to enclose text, videos, audio, images, etc. The majority of tags present in HTML are Container tags.

When a Container tag is opened and a piece of content is specified, one must close the Container tag, or else browsers tend to automatically mark its end till the end of the page and everything in between gets rendered according to the effect of the Container tag. By giving Container a Class or ID, the entire content inside the Container tag can easily be styled up using CSS (Cascading Style Sheets).

Syntax

'<container tag name>'Your Content'</container tag name>'

There are three major Container tags that contain all the other tags present in an HTML document.

1. <html> tag: This is a root of the HTML document, which provides a container for each and every tag in the document.

• <head> tag: This tag holds the metadata of the document that is, it consists of all the information of the document. This metadata can be the webpage's title, the document's character encodings, and the address of all the external resources, whether it be CSS stylesheets, JavaScript files, favicons, etc.

• <body> tag: This is the body of the document where all the content to be displayed in the browser is specified, for example – headings, images, text, etc.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta HTTP-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Three Major Container Tags</title>
</head>
<body>
<p>This is the tutorial on Container tags.</p>
</body>
</html>

Output

Under this body tag, the container tags are again further divided into the following types.

1. Styled Container tags
   
2. Block Container tags

Styled Container tags

These are HTML tags that come with predefined styles applied to them by the browser. These default styles are mentioned under a user-agent stylesheet of the browser, and these styles get automatically applied to them when they are in use.

When developers use these tags, they can either go with their default styling or can modify them according to their choice.

Following are the different types of Styled Container tags.

• <button> tag - This tag is used to specify buttons on the webpage.
• <h1> to <h6> tags – These tags are used to specify headings for the upcoming content on the webpage.
• <p> tag – This paragraph tag is used to specify contents.
• <a> tag – This is a Hyperlink tag used to specify links on the webpage.
• <ol>,<ul>,<li> - These are list tags used to specify the Ordered and Unordered lists on the webpage.
• <b>,<i>,<strong> - These are used to style up the text by making them bold or italic on the webpage.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta HTTP-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Styled Container Tags</title>
</head>
<body>
<label>Button tag - </label>
<input type="button" value="Click Me">
<br>
<h1><span>Heading tag - </span> This entire line is a heading tag.</h1>
<p><span>Paragraph tag - </span> This entire line is inside a p tag.</p>
<span>Anchor tag - </span><a href="https://www.google.com/">Google</a>
<br><br>
<span>Ordered List</span>
<ol>
<li>HTML</li>
<li>CSS</li>
</ol>
<span><b>Bold tag</b></span>
</body>
</html>

Output

Block Container tags

These Container tags have a default display as 'Block', which specifies that they will take the entire viewport width. This HTML tag is very useful to separate contents into different sections and style up using CSS.

The HTML document has only one Block Container tag, which is the '<div>' tag.

• <div> tag – This tag is used to specify containers for content such as images, text, etc. By targeting the Class or Id of the div, the entire content inside it can be styled using CSS.

Example

<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Block Container Tag</title>
</head>
<body>
<div><p>This p tag is inside the div tag.</p></div>
</body>
</html>

Output

Following is the list of all the Container tags in an HTML:

• <a>
• <abbr>
• <acronym>
• <address>
• <applet>
• <article>
• <aside>
• <audio>
• <b>
• <bdi>
• <bdo>
• <big>
• <blink>
• <blockquote>
• <body>
• <button>
• <canvas>
• <caption>
• <center>
• <cite>
• <code>
• <colgroup>
• <datalist>
• <dd>
• <del>
• <details>
• <dfn>
• <dialog>
• <dir>
• <div>
• <dl>
• <dt>
• <em>
• <embed>
• <fieldset>
• <figcaption>
• <figure>
• <footer>
• <font>
• <form>
• <frameset>
• <h1> to <h6>
• <head>
• <header>
• <html>
• <i>
• <iframe>
• <ins>
• <kbd>
• <legend>
• <li>
• <main>
• <map>
• <mark>
• <marquee>
• <menu>
• <menuitem>
• <meter>
• <nav>
• <nobr>
• <noframes>
• <noscript>
• <object>
• <ol>
• <optgroup>
• <option>
• <output>
• <p>
• <pre>
• <progress>
• <q>
• <rp>
• <rt>
• <ruby>
• <s>
• <samp>
• <script>
• <section>
• <select>
• <small>
• <span>
• <strike>
• <strong>
• <style>
• <sub>
• <summary>
• <sup>
• <table>
• <tbody>
• <td>
• <textarea>
• <tfoot>
• <th>
• <thead>
• <time>
• <title>
• <tr>
• <tt>
• <u>
• <ul>
• <var>
• <video>
• <xmp>