AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

HTML container tag


<< Previous Page
HTML tutorial
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. 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:

 

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.

 

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>

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
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


HTML Img Background
HTML Image Link
HTML Image Size
HTML Text Style
HTML Text Align
HTML Text Size
HTML Text Color Style
HTML Text Color
HTML Table Color
HTML Table Row Colspan
HTML Table Width
HTML Table Style
HTML Table Border
HTML Table
HTML Font Face
HTML Font Size
HTML Font Color
HTML Headings
HTML div border color
HTML div class
HTML class container
HTML form action
HTML comment
HTML link new tab
HTML link underline
HTML link tag
HTML button action
HTML button onclick
HTML button link
HTML table style
HTML image
HTML colors
HTML div style
Text, paragraf in HTML
HTML Tags Attributes
HTML - Elements
HTML Introduction
Home 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
news 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
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


Create a Sticky Navbar with and without ...
CSS Grid Layout. Examples of grid-gap, l...
CSS animation examples: delay, rotate, s...
CSS font weight bold, thin, values, semi...
CSS background color - opacity, gradient...
CSS flex - display: flex - CSS Flexbox L...
CSS border padding...
HTML text center horizontally and vertic...
HTML text input <input type="text"&g...
HTML link color...
How to Link CSS to HTML, external file n...
HTML link - hyperlink...
jQuery replace...
jQuery replaceClass...
jQuery click ()...
jQuery switchClass()...
jQuery draggable()...
jQuery HTML...
jQuery scroll smooth...
jQuery scroll()...