Tags in HTML

HTML is a Tag based language which lets you create web pages.
HTML provides a number of formatting options to display text, hyperlinks, graphics, etc., with the help of tags.
In HTML, tags are also known as HTML elements.
A tag comprises of commands enclosed in angle brackets < >. If you fail to use angle brackets, the web browser will assume the command as text.
Each tag follows specific rules and syntax, with its own attributes and defaults.
HTML tags are NOT Case-Sensitive. Therefore, <tagname> and <TAGNAME> will have the same effect.

Kode.Blox will always use lowercase tagnames.

The HTML elements can be categorised as:
- Container Tags
- Empty Tags

Container Element

In HTML, tags which include Opening and Closing tags are referred to as Container Elements.

A tag is opened using opening brackets < >. For Example: <tagname>.
A tag is closed using closing brackets </>. The closing tag has a forward slash "/". For Example: </tagname>.

Container elements include <html>, <head>, <body>, <h1>, <p>, </h6>, <ul>, </p>, <li> and many more tags.

Don't worry if we use tags you haven't heard of yet. You will learn about them in the following lessons.

While using container tags, make sure to keep the containers nested.

HTML elements can be nested. This means thay can be embedded within each other.

Ideal Method

<tag1>

<tag2>

</tag2>

</tag1>

Unideal Method

<tag1>

<tag2>

</tag1>

</tag2>

Make sure you never skip the closing tag of a Container element!

Unintended results and errors can occur if you forget the closing tag.

Sometimes, HTML elements may display correctly even if you neglect the closing tag.

Still, never count on it! And make sure you close the container elements after the nested elements.

Empty Element

The Empty Elements are the ones with only Opening tags. They have no Closing tags.

These elements do not contain any data. Instead, they format the data given within the container elements.

As Empty Elements contain only Opening tags, they cannot have any nested elements.

Empty Elements include tags like <hr>, <br>, <meta>, <img>, <link>, etc.

For Example:

Container Tags Empty Tags

<html>
<head>
<title>Example | Kode.Blox </title>
</head>
<body>
<h1> Welcome to Kode.Blox! </h1>
<hr>
<p>
Kode.Blox is an ideal platform for School Students, <br> , Front-end Developers, and all those who are interested in learning HTML and CSS <br> from scratch and wish to design websites.
</p>
<span>
Kode.Blox is a beginner's resource available to everyone at the best possible price.
</span>
<hr>
</body>
</html>

*If you wish to find out how this code will work, you can copy-paste this code into your text editor, save it and open it with any web browser.

Explanation:

<hr> stands for horizontal rule. This is used to insert a horizontal rule or thematic break into an HTML page to split the page.
<br> tag is used for line break. This tag breaks a line and shows the remaining text from the next line.
<p> tag marks a block of text as a paragraph.