DEEPER DIVE INTO HTML TAGS

This previously talked about HTML structure and a little on tags, but in this article, we would go deeper into tags, different types of HTML tags and their usage, and also know more about rules regarding the usage of some tags.

HTML tags are similar to keywords in that they specify how a web browser will format and display text. Using tags, a web browser can differentiate between HTML content and simple content. HTML tags consist of three components: the opening tag, the content, and the closing tag. However, some HTML tags are open tags.

Browsers read HTML documents from left to right and top to bottom. To generate HTML documents and display their attributes, HTML tags are employed. The attributes of HTML tags vary depending on their kind.

It is impossible for a web browser to read plain text without the proper tags included in an HTML file. Per the needs of your code, you may employ as many tags as you like.

NOTE:

• All HTML tags must be enclosed within < > these brackets.
• Every tag in HTML performs different tasks.
• If you have used an open tag, then you must use a close tag (except some tags)

HTML Tag Examples

N.B: To be able to follow the examples here, use these steps,

• Open/create a file on vscode (or any text editor of your choice) and name the file index.html(it is important that the file is saved with the extension ".HTML").
• Now feel free to try the examples below on that file by writing your codes on that file.
• Open that file with chrome to see the output, your browser by default would read the HTML components.

<p> Paragraph Tag </p>

<h2> Heading Tag </h2>
<b> Bold Tag </b>

<i> Italic Tag </i>

<u> Underline Tag</u>

From the above, you would notice a syntax, which has an opening tag and a closing tag. Also, you would see how the tag defines its result.

Unclosed(Self-closing) HTML Tags

Some HTML tags are not closed, for example, br and hr.

<br>

Tag: br stands for break line, it breaks the line of the code.

<hr>

Tag: hr stands for Horizontal Rule. This tag is used to put a line across the webpage.

Now let's look at more important tags that are very useful in the development of your web platform.

HTML Meta Tags

DOCTYPE, title, link, meta and style

HTML Text Tags

<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>, <bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>, <var> and <br>

HTML Link Tags

<a> and <base>

HTML Image and Object Tags

<img>, <area>, <map>, <param> and <object>

HTML List Tags

<ul>, <ol>, <li>, <dl>, <dt> and <dd>

HTML Table Tags

<table>, <tr>, <td>, <th>, <tbody>, <thead>, <tfoot>, <col>, <colgroup> and <caption>

HTML Form Tags

These are tags that you would see often in the development journey, For some of these tags, we would have a separate article explaining their usage and collaboration with other tags.

Do not forget your building block syntax for HTML, you must have written it before writing the building tags.

HTML Tag Cheatsheet

For more learning and understanding, I have attached an HTML tag cheat sheet, try to go over it and maybe play with them.

Document source: Sharprockets

For Videos Join Our Youtube Channel: Join Now