HTML container tag
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:
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.
<!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>
Related subjects:
div class container
container tags
Open link in new tab - Create link
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>
<!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>
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:
<!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
This tool makes it easy to create, adjust, and experiment with custom colors for the web.

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

Find here examples of creative and unique website layouts.

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