Container, in general term means to contain something; goods or other items inside an enclosed box or even a room.
In web coding (HTML), the concept of container is not different from the above. It means containing some element into an opening and ending tag of an HTML document. Containing an element varies with each language and framework, but in this article it will be explained only in relation to HTML.
In this article, we will extensively cover the following:
- HTML Tags
- Types of Container Tags
- Semantic Elements
HTML Tags
HTML stands for Hypertext Markup Language which employs predefined elements and tags to instruct the browser on how to display the contents on a webpage . Tags are merely a few commands that are surrounded in angle braces(<, >) and are unofficially divided into two, which are: empty tags and container tags.
Empty Tags
In HTML, opening tags without a closing tag(/>) are known as empty tags, void tags, or self-closing tags. Syntax:
<tag_name>content>
<br>
break this line
They are unable to hold more elements but are used in adding lists, images, hyperlinks meta-data, etc. into a website.
Adding a closing brace to an empty tag automatically makes it an invalid syntax
<br></br>
invalid
Notably there are 15 empty tags listed in the HTML5 specification and they include:
<meta> which represents the elements and information included in the meta-data of an HTML document.
<br>, also called carriage return. It is a tag that indicates line break in a text.
<area>, used to make a portion which mapped click able on an image.
<img>, is used to embed an image into the document.
<link>, it is used to to create a connection between content and an external resources.
<base>, <col>, <embed>, <input>, <hr>, <param>, <source>, <track>, <wbr>, <base> are other empty tags in HTML.
Container Tags
Whenever a content is written between an opening and ending tag in an HTML document, the tag is referred to as a container tag.
Syntax:
<tag_name> contents </tag_name>
<p>Container tag</p>
In a line of code, the document is divided into three parts, i.e., an opening tag, content (which can also contain other tags) closing tag which put an end to the line.
The content is displayed in the browser in accordance to the structure of the document. If the container tag isn't closed, the browser applies the effect of the opening tag until the end of the page.
The <html>, <head> and <body> tags are examples of container tags. Many other tags are contained in them because they form the basic structure of an HTML document.
Examples of Container Tags
There are lots of container tags in HTML but we are going to cover a very significant few which houses both container tags and empty tag in an HTML document.
The few tags are:
<html> tag, this tag is the second tag in an HTML document, all other tags are written in it and it has its closing tag written as, </html>.
By using the opening <html> tag, the browser is informed that the page will be formatted in HTML.
<head> tag which has its closing tag written as </head> expressly contains details about the body, the page's title, the labels, etc. of a web page.
Only specific markup elements like meta, link, script, etc. are permitted in the HTML5 head title.
<body> tag is used to specify the primary content that will be shown on a website. SUCH content include: text, images, videos, links, etc. It has its closing written as, </body>.
Types of Container Tags
Embedded within the html <body> tag are types of container tags that includes; styled container tags and block container tags which are classified by their intents.
Styled Container Tags
This type of container tag consists of tags that are styled with the browser automatically by default.
For instance, an hyperlink tag <a> will be styled by the browser to make it clickable.
a: {
color: link;
cursor: pointer;
text-decoration: underline;
}
The above is styled using a CSS user agent stylesheet that is provided by the browser to make it specially defined in a manner that suites the HTML standard.
The following tags are examples of styled tag and are specially styled by the browser.
Header tags<h1>, <h2>, <h3>, <h4>, <h5>, <h6> for different heading types.
The button tag <btn> for buttons.
List tags <ul>, <ol> for different kinds of lists.
Hyperlink tag <href>.
Paragraph tag <p>
Text styling tags to either make a text bold <b> or in italics <i>.
Block Container Tags
Block container tags are mainly used to divide HTML document into sections such as; header, footer, etc. in other for the document to be easily accessible and understood by browsers and developers.
Before the inception of HTML5, dividing an HTML document can only be done using a <div> tag with an id attribute. But now, <nav>, <main>, <aside>, <articles>, <header>, <footer>, and <section> tags have been drafted into the HTML5 specifications for dividing HTML documents.
Div Tag
A division or segment is created in a document by the container tag known as <div>.
<Div> tag is used to organize HTML elements so that they can be styled with CSS without changing its original content or layout.
A div tag has the flexibility to contain any HTML tag, including another `
Span Tag
The HTML tag <span> is a general inline container for information that does not automatically denote anything.
It can be used to group items that needs to be styled using the class or id attribute because they have similar attribute values, like <lang>.
Note that; It can only be used when other sematic tag is not appropriate for the purpose.
Sematic Elements
An element is a part of an HTML file that instructs a web browser how to organize and interpret a particular section of the HTML file.
In the case of sematic elements, they are elements that surround the html tags. They give an HTML page content rather than just presentation. It clarifies the many sections and page layouts of HTML, making it easier to understand.
Also they consist of an opening tag, content, and closing tag like container tags. They are: <header>, <nav>, <section>, <article>, <aside>, and <footer>
Header
It defines a header for a web page.
A collection of introductory or navigational aids is often represented by the HTML element known as <header>. In addition to some heading components, it might also have a logo, a search form, the author's name, among other things.
<header>
<h2>Nigeria</h2>
</header>
Nav
It is the semantic element that designates a portion of a page whilst providing smooth navigation links, either within the current content or to other documents.
Tables of contents, menus, and indexes are examples of sections that can be navigated using the <nav> tag.
<nav class="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Section
Chapters, headers, footers, and other sections are all defined using the <section> tag.
<section>
<a href="#">My blog</a>
<a href="#">My LinkedIn profile</a>
</section>
Article
It is a container element that is meant to be independently distributed within a document, page, application, or website.
This element contains the main part which has the major information about the web page.
<article class="Container tag">
<h2>examples of container tag</h2>
</article>
Aside
In an HTML document, the <aside> element is majorly used to indicate the sidebar of a webpage
<article>
<aside>
<p>
I am a young man
</p>
</aside>
<p>
More about me...
</p>
</article>
Footer
It defines a footer for a document or a section And the footer contains major information relating to the author and the page.
<footer>
This is a footer
</footer>
Conclusion
The coherent statement, rules, ideas and guiding principles that sets the operation behind the HTML container is that it entails opening and closing tags and have been duly explained in this article.
Like other HTML attributes and qualities, the explained parts that span through general html tags, types of containers and the sectioning semantic tags and their uses can't be overemphasized.
In subsequent articles, I shall continue to dissect more essential attributes of web coding.
Thank you and see you soon!