HTML container tag

Next Page >>
HTML tutorial

HTML Tutorial » HTML container tag

A container is something such as a box that is used to hold or store things in.

HTML tags are divided into two types:

1. Container tags that have separate opening and closing tags
2. Empty tags that are immediately closed after their definition

1. Opening and closing tags as: "<div>" and "</div>" tag
2. Empty tags like: <img />, <br />, <input /> tags where they are self-closing.

Example: tag is a container will affect all elements between " <article>"and "</article>" tag, or between "<div>" and "</div>" tag, or "<section>" and "</section>", and so on.

Syntax:

<tag_name> your_text </tag_name>

Example of a few 10 basic HTML container tags list:

<article> </article> - Contains content related to the main content of the page.
<section> </section> - Contains content related to the main content of the page.
<div> </div> - A container for a block of content.
<p> </p> - Paragraph.
<span> </span> - A container for in-line content, such as content inside a paragraph.
<strong> </strong> - Makes the text bold.
<a href = "document location"> </a> - Link.
<ol> </ol> - Ordered list.
<ul> </ul> - Unordered list.
<li> </li> - List item, must be nested inside a list element such as a <ol> or <ul>.

Opening and closing tag <article> </article>

The article tag identifies a thing that can be independent from other things in a page.

Example

  <!DOCTYPE html>

  <html>

  <head>

<title>How do I make a container article tag? - example</title>

<style>

  article {

 width: 80%;

height: auto;

background-color: #FF9;

margin-right: auto;

margin-left: auto;

color: #066;
}
  </style>


  </head>



<body>

<article>

    <h2>your container article title here</h2>

    <p><strong>Your text here</strong></p>

    <p> Another text : - Grape silver beet collard avocado  

    pea watercress potato tigernut corn groundnut.

    coriander yarrow sweet pepper radish garlic brussels 

     earthnut pea tomato spring onion azuki bean gourd.

     black-eyed pea green bean zucchini gourd winter

     radish asparagus spinach. - </p>

     <!-- end container div class --> </article>

  </body>

  </html>

Note: when defining "article" style from <style> and </style> you do not need to add a dot before the article.

section tag

"section" tag represents a section of a document. Each section has a multitude of tags as:
<h2>A section of the page</h2>
<p>...</p>
<img ... /></p>

Example

  <!DOCTYPE html>

  <html>

  <head>

<title>How do I make a section tag - example</title>

<style>

  section {

 width: 80%;

height: auto;

background-color: #FF9;

margin-right: auto;

margin-left: auto;

color: #066;
}
  </style>


  </head>



<body>

<section>

<h2>A section of the page</h2>

<p> text here.</p>

<img src="https://www.agernic.com/templates/mariwel.jpg"

 alt="HTML tutorial" style="width:50px; 

 height:40px; border:2px #03C dotted;">

</section>
  </body>

  </html>

Note: when defining "section" style from <style> and </style> you do not need to add a dot before the section.

Tags: html container tags list, container vs tags, example of empty tag, what are container tag, list of empty tag

Tags related to page

A few more related tags for this page as:

header
The header tag represents a part of the page that is the introduction.

main
The main tag represents the main part of a page:

footer
The footer tag is used to determine the footer of an article, or the footer of the page:

Example

  <!DOCTYPE html>

  <html>

  <head>

<title>How do I make a section tag - example</title>

<style>

  header {

 width: 90%;

height: auto;

background-color: silver;

margin-right: auto;

margin-left: auto;

color: #066;
}
  section {

 width: 80%;

height: auto;

background-color: #FF9;

margin-right: auto;

margin-left: auto;

color: #066;
}
  footer {

 width: 90%;

height: auto;

background-color: silver;

margin-right: auto;

margin-left: auto;

color: #066;
}
  </style>


  </head>



<body>

<header>

<h1>Article title</h1>

</header>


<main>

<p>text here</p>

</main>


<section>

<h2>A section of the page</h2>

<p> text here.</p>

<img src="https://www.agernic.com/templates/mariwel.jpg"

 alt="HTML tutorial" style="width:50px; 

 height:40px; border:2px #03C dotted;">

</section>

<footer>

<p>Footer notes..</p>

</footer>

  </body>

  </html>

html container tags list, container vs tags, example of empty tag, what are container tag, list of empty tag
HTML container tag - html tutorial

Online Editor

ONLINE EDITOR

news templates

COLOR PICKER

news templates

This tool makes it easy to create, adjust, and experiment with custom colors for the web.

HTML Templates

Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.

CSS HTML Layout

Find here examples of creative and unique website layouts.

Free CSS HTML Menu

Find here examples of creative and unique website CSS HTML menu.