. Advertisement .
..3..
. Advertisement .
..4..
There is a chance that HTML container tags may confuse you when you first hear of it. So, what are they and how can you get them executed the right way?
This guide will walk you through such puzzling questions. Scroll down for no more trouble not yet resolved!
What Are HTML Container Tags?
Informally, HTML tags are classified into two categories: Container tags and empty tags. As such, container tags include separate closing and opening tags; empty tags, so-called void tags, are promptly closed when they’ve been defined.
You can encounter empty tags under self-closing forms as <br />, <img />, and <input /> tags.
Unlike that, the container possesses some more fillings in the middle of their closing and opening tags. To illustrate, we have <body>, <html>, and <head>.
- The <body> tag: This element defines the structure of your webpage as well as the material that will be shown in the browser. There are two types of container tags within the <body> tag, which are separated by their aim. The first to come is the styled container tags and the later is block container tags.
- The <html> tag: This one contains all other tags that make up your webpage within it.
- The <head> tag: This element is used to include metadata on your page that the browser will utilize. This is where you put your HTML page’s external style, title, charset, and script files.
Html Styled Container Tags
Container tags with distinctive default styling applied by the browser are known as styled container tags.
Since the browser will implement a particular default styling to the hyperlink element <a>, it is an example of a styled container tag.
The <a> tag will be styled as follows in Google Chrome:
a:-webkit-any-link {
color: -webkit-link;
cursor: pointer;
text-decoration: underline;
}
User agent stylesheet is the default style given by browsers to visually render the a> element in a manner that fulfills the HTML standard.
The following is a complete list of styled container tags:
- List tags like <ol>, <ul>, and <li>
- Header tags from <h1> to <h6>
- The <button> tag for buttons
- Paragraph <p> tag
- Hyperlink <a> tag
- Text style tags like <i> that makes your text italic and <b> for bold style
The default style for the items above will be executed by the browser to ensure that they have the correct visual representations.
Last but not least, let’s learn about block container tags, which are utilized to semantically organize your webpage.
HTML Block Container Tags
HTML block container tags, known as block-level elements, are aimed to break your HTML pages into sections so that both web browsers and developers can interpret them.
A block-level element always occupies the entire available width (stretches out to the left and right as far as it can). <p> and <div> are two regularly used block elements.
That way, the < p> element specifies a paragraph in an HTML page and the <div> element establishes a divide or segment in an HTML document.
Let’s have a look at the example as follow:
<p>HTML Container Tags</p>
<div>HTML Container Tags</div>
Here is a complete list of the HTML block-level components:
- <address>
- <article>
- <aside>
- <blockquote>
- <canvas>
- <dd>
- <div>
- <dl>
- <dt>
- <fieldset>
- <figcaption>
- <figure>
- <footer>
- <form>
- <h1>-<h6>
- <header>
- <hr>
- <li>
- <main>
- <nav>
- <noscript>
- <ol>
- <p>
- <pre>
- <section>
- <table>
- <tfoot>
- <ul>
- <video>
The Bottom Line
Above are some helpful insights regarding HTML container tags. Hopefully, this instruction can be of great use to you somehow. See you then!
Leave a comment