Using HTML container tags explained with examples

So you have started learning HTML, and eventually, you have a little idea about how to make a basic webpage. The words you use between the “<” and “>” symbols are called container tags; they serve various purposes and help in formatting the website you are creating. In today’s article, we will discuss some common HTML container tags with examples.

Introduction

HTML container tags are HTML elements we use to create a section or a box on a web page. They enable the user to subdivide or separate content into subsections that are visually distinct from other sections on the page. This helps structure the content so that it is more organized and easier to navigate and read.

Using HTML container tags can make your web pages look more organized and professional. This section of your webpage not only looks more appealing but also has more practical implications in terms of usability.

How to Use Containers in HTML

Containers group content, separate it from other parts of the page and style it differently. Here’s how to use HTML containers:

Start by creating a container element. You can do this by opening and closing a tag such as <div>, or by creating a container element such as <span> or <h1>.

Next, add the content inside the container element. This could be anything from plain text to images and other HTML elements.

Finally, add any styling or layout to the container element. You can do this by using CSS.

Let’s take a look at some of the container tags and how you can use them:

tag

To define a header or masthead the HTML <header> tag is used for a web page. Inside this tag, you can include items like a logo, navigation bar, search bar, and more. Use the <header> tag outside of the <body> or content section to create a header section before the main web page. The following example shows what this tag looks like in action:

<!DOCTYPE html>
<html>
<body>

<header>
  <h1>This is the Main page heading</h1>
  <p>Article by anonymous</p>
</header>

</body>
</html>Code language: HTML, XML (xml)

to
tags

we can use <h1> to <h6> tags are used to create different-sized headings. Headings are typically to organize and break up the content into smaller, more manageable pieces. The <h1> tag is the largest and is typically used for the main heading of a page, while the <h6> tag is the smallest and is used for subheadings.

<!doctype HTML>
<html>
<body>
    <h1>h1 Heading size</h1>
    <h2>h2 Heading size</h2>
    <h3>h3 Heading size</h3>
    <h4>h4 Heading size</h4>
    <h5>h5 Heading size</h5>
    <h6>h6 Heading size</h6>
</body>
</html>Code language: HTML, XML (xml)

tag

The <p> tag is the most common container tag used to group paragraphs of text. We can use it to wrap a single paragraph of content, although it can also group multiple paragraphs together.

<!DOCTYPE html>
<html>

<h3>using the < p > tag</h3>

<p>Random text in a pargraph</p>
<p>Random text in a paragraph</p>

</html>Code language: HTML, XML (xml)

tag

The HTML <footer> tag defines a footer area for a web page. Inside this tag, you can include items like copyright information, legal links, a sitemap, and more. Just like with the <header> tag, you can use the <footer> tag outside of the content section to create a footer before the web page. The following example shows what this tag looks like in action:

<!DOCTYPE html>
<html>
<head>
<style>
footer {
  text-align: center;
  padding: 5px;
  background-color: greenyellow;
  color: black;
}
</style>
<h1>Heading by anonymous</h1>
<p>This is the random Text. See below for Footer tag. This is the random Text. See below for Footer tag. This is the random Text. See below for Footer tag. This is the random Text. See below for Footer tag.</p>
<footer>
  <p>Author: Anonymous</p>
  <p><a>[email protected]</a></p>
</footer>
</html>Code language: HTML, XML (xml)

tag

The <div> tag is one of the most commonly used container tags. It is for grouping content and works similarly to a division or container on a page. We place the content inside the <div> can be text, images, videos, or other HTML elements.

<!DOCTYPE html>
<html>

<body>

<h1>Using the Div tag</h1>

<div class="xyz">
  <h2>Heading which is inside div tag</h2>
  <p>Just a random text</p>
</div>

<p>The div tag ended</p>

<head>
<style>
.xyz {
  border: 20px outset black;
  background-color: yellow;    
  text-align: center;
}
</style>
</head>

</body>
</html>Code language: HTML, XML (xml)

tag

The <span> tag is for styling the webpage text. While it does not create a division like the <div> tag, the <span> tag can format text and provide additional style information. For example, if you want to create a bold or italicize the word, you could put a <span> tag around the word and apply the necessary styling. For example, the following will add a blue font color to a single word inside the phrase:

<!DOCTYPE html>
<html>

<p>The coloured text is and example of <span style="color: red;">spans</span> tag.</p>

</html>Code language: HTML, XML (xml)

tag

The <article> tag represents a single article or blog post. It can wrap up the entire content of an article or blog post. Article tags are in conjunction with other tags, such as the header and footer tags, which define the header and footer of the article. 3 distinct, stand-alone article content examples for the <article> tag are as follows:

<!doctype HTML>
<html>

<article>
  <header>
    <h1>Article 1 Title</h1>
  </header>
  <p>This is the article 1 content.</p>
</article>

<article>
  <header>
    <h1>Article 2 Title</h1>
  </header>
  <p>This is the article 2 content.</p>
</article>

<article>
  <header>
    <h1>Article 3 Title</h1>
  </header>
  <p>This is the article 3 content.</p>
</article>

</html>Code language: HTML, XML (xml)

tag

The <section> tag represents a generic section of a page. It can divide the page into different sections, such as the introduction, main content, and conclusion. You can use the section tag to wrap different parts of the page and, then, add styles to them.

<!DOCTYPE html>
<html>
<body>

<h1>Using Section Tag</h1>

<section>
  <h2>Dog (Section-1)</h2>
  <p>A dog is a loyal and friendly companion animal. 
They have a warm and affectionate nature, 
and are often seen as a man's best friend.  
Dog's typically have four legs, 
a long snout, and a bushy tail. 
Dogs require a lot of attention and care, 
and enjoy spending time with their owners, 
playing and exploring.</p>
</section>

<section>
  <h2>Cat (Section-2)</h2>
  <p>A cat is a small, furry animal with a long, 
fluffy tail. It usually has bright, 
vibrant eyes and a small, triangular face.  
Its whiskers are long and sharp, and its claws are 
retractable. Cats are very loving and affectionate 
animals, and they make great companions.</p>
</section>

</body>
</html>Code language: HTML, XML (xml)

tag

The <aside> tag allows to representation of content that is related to the main content, such as a sidebar. It can wrap the content of a sidebar and then style it using CSS or other methods.

<!doctype HTML>
<html>
    <head>
  <style>
    article {
      width: 70%;
      padding: 15px;
      float: left;
    }
    aside {
      width: 70%;
      float: right;
      background-color: black;
      color: white;
      padding: 10px;
      margin: 15px;
      height: 120px;
    }
  </style>
</head>
<body>
    <h1>Heading-Outside Aside</h1>
 
     
<p>Hi, welcome the website. 
This is paragraph text</p>
 
 
    <aside>
      <h1>Heading-Inside Aside </h1>
 
       
<p>Hi, this is the paragraph while using 
the aside tag</p>
 
    </aside>
</body>
</html>Code language: HTML, XML (xml)

List Tags

and
tags

If you have a list of items and want to group them using bullets or numbers, <ul> and <ol> tags are used. The <ul> tag creates an unordered list, meaning that the list items are not in any particular order. The <ol> tag creates an ordered list, which means the items are listed in numbers or alphabetical order. The following HTML code depicts the same:

<!doctype HTML>
<html>

<h2>
    Unordered List
</h2>
<ul>
  <li>Apple</li>
  <li>Banana</li>
  <li>Orange</li>
  <li>Mango</li>
  <li>Grapes</li>
</ul>

<h2>
    Ordered List
</h2>
<ol>
  <li>Samosa</li>
  <li>Kachori</li>
  <li>Maggi</li>
  <li>Sandwich</li>
  <li>Spring Roll</li>
</ol>


</html>Code language: HTML, XML (xml)

Table Tags

tag

Our Html also allows the making of tables in a webpage using the <table> tag and we use it to organize and structure data into rows and columns.

tag

The <thead> tag allows the creation of a header for an HTML table. It contains <tr> (table rows) and <th> (table headers).

tag

The <tbody> tag creates the body of an HTML table. It contains <tr> (table rows) and <td> (table data).

tag

The <th> tag creates a header cell in an HTML table. It is usually in conjunction with <tr> (table row) and <thead> (table header) elements.

tag

The <tr> HTML tag defines a row in an HTML table. It is usually in conjunction with the <th> and <td> tags to create a table.

tag

The <td> tag creates a data cell in an HTML table. It is usually preferred to use within <tr> (table row) and <tbody> (table body) elements.

The following examples show a webpage using the above table tags.

<!doctype HTML>
<html>
<head>
<style>
table, th, td {
  border: 1px solid blue;
}
</style>
</head>
<body>
	<table>
  <thead>
    <tr>
      <th>Student_Id</th>

      <th>Name</th>
      <th>Year_of_study</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>512</td>
      <td>Rajesh</td>

      <td>1st</td>
    </tr>
    <tr>
      <td>987</td>
      <td>Manish</td>
      <td>3rd</td>
    </tr>
    <tr>
      <td>123</td>
      <td>Srasti</td>
      <td>4th</td>
    </tr>
  </tbody>
    </table>
</html>Code language: HTML, XML (xml)

Conclusion

In today’s article, we discussed the different container tags <header>, <footer>, <h1> to <h6>, <div>, <p>, <span>, <section>, <article>, <aside>, <ul>, <ol> and table tags such as <table>, <thead>, <tbody>, <th>, <tr> and <td> that we use in HTML along with their code and output. These are some of the many other container tags that we use on a webpage. By applying the above tags, you can add a good amount of knowledge to your HTML skills. Using HTML container tags can make your web pages look more organized and professional.

I hope this article was helpful to you. Soon, we’ll be back with another fantastic article and till then keep coding, and have a good day.😊

Introduction

How to Use Containers in HTML

tag

to tags

to

tags

tag

tag

tag

tag

tag

tag

tag

List Tags

and tags

Table Tags

tag

tag

tag

tag

tag

tag

Conclusion

No comments so far

to
tags

and
tags