HTML Tags - Scientech Easy

The predefined words (also called reserved keywords) used in the HTML are called tags. In an HTML, we write all the documents using tags. For example, we do the beginning of the HTML file with <html> tag and ended with </html> end tag.

HTML tags play a vital role in building any website because they define elements and their respective attributes. They create everything, such as headings, paragraphs, images, links, etc.

Tags are enclosed in angle brackets (<>). They consist of a tag name and attributes and normally come in pairs like <html> and </html>.

A tag name identifies the type of element, and the attributes offer additional information about the element, as shown in the below figure.

As shown in figure, a pair of tags begins with an opening tag, followed by some content, and end with a closing tag. The first tag in a pair of angle bracket is called a start tag or opening tag that tells the browser, “the element starts here”.

The second tag in a pair of angle bracket with forward slash (/) is called close tag or ending tag that tells the browser “the element ends here”. The ending tag is similar to the opening tag but includes a forward slash / before the tag name. For example, <p> is the opening tag for a paragraph, and </p> is the closing or ending tag.

You must include a close tag. If you omit it, the browser applies the effect of opening tag until the end of web page. Remember that HTML tags are not case-sensitive. For example, the tag <html> is the same as <HTML>.

Types of Tags in HTML

There are mainly two types of tags available in the HTML. They are as:

(1) Paired tag: This tag has both start and end tags. For example, <b> and </b> tags are the paired tags.

(2) Empty tag: This tag does not require to be closed. It has only start tag. For example, <br> tag is an empty tag.

How do HTML Tags work?

The function of HTML tags is to define the structure and content of a webpage. When a web browser renders a webpage, it reads the HTML code line by line and interprets these tags to display the content on the webpage.

We use HTML tags to create headings, paragraphs, images, links, forms, and other elements in the webpage.

Common HTML Tags used in Web Development

HTML tags help us to create various elements on a webpage. Here are the most commonly used HTML tags in web development in alphabetical order. Look at the below table.

Tag	Definition
<!–. . .–>	It describes a comment.
<a>	It describes an anchor.
<abbr>	It defines an abbreviation.
<acronym>	It defines an acronym.
<address>	It defines an address tag.
<area>	It defines an area inside an image map.
<article>	It defines an article.
<audio>	It defines embedded sound content.
<b>	It describes the bold text.
<bdo>	It describes the direction of text display.
<big>	Used to define a big text.
<blink>	Used to define blinking text in an HTML document.
<blockquote>	Used to write a long quotation.
<body>	It defines the body of an HTML document.
<br>	It inserts a single line break.
<button>	It defines a clickable button.
<canvas>	It is used to draw graphics with the help of JavaScript.
<center>	Defines centered text.
<cite>	Defines the title of a work (citation).
<code>	Defines a piece of computer code.
<col>	Used to define a column within a table.
<colgroup>	Used to define a group of one or more columns within a table.
<data>	It represents the value of a numerical measurement or a statistical value on a web page.
<datalist>	Represents a list of pre-defined options for an input field on a web page.
<dd>	It defines a definition description.
<del>	It defines deleted text.
<details>	It defines additional information that the user can view or hide.
<dialog>	It defines a dialog box or window.
<dfn>	It describes a definition term.
<div>	It defines a section in the HTML document.
<dl>	Used to define a description list.
<dt>	It defines a term in a description list.
<em>	Used to define emphasized text.
<embed>	Used to embed multimedia content, such as videos, audio files, and images into a web page.
<frameset>	It defines a field-set.
<figcaption>	It defines a caption for a <figure> element.
<figure>	It specifies self-contained content.
<footer>	Used to create the footer section of a web page or document.
<form>	It defines a form.
<h1> to <h6>	It defines an HTML heading from header 1 to header 6.
<head>	It contains metadata or information about the HTML document.
<header>	It defines a header for a section or document.
<hr>	It describes a horizontal rule.
<html>	It defines the root of an HTML document.
<i>	Defines italic text.
<iframe>	Defines an inline frame.
<img>	Used to define an image.
<input>	Defines an input field.
<ins>	Defines inserted text.
<kbd>	It defines a keyboard input.
<label>	It describes a label for an <input> element.
<li>	It defines a list item.
<link>	Used to link a document and an external resource.
<main>	It specifies the main content of a document.
<map>	It defines an image map.
<mark>	Used to mark or highlight a text.
<meta>	It defines metadata about an HTML document.
<menu>	Defines a menu list.
<nav>	It defines navigation links.
<object>	It defines a container for an external application.
<ol>	It defines an ordered list.
<optgroup>	It defines a group of related options in a drop-down list.
<option>	It defines an option on a drop-down list.
<output>	It defines the outcome of a calculation.
<p>	It defines a paragraph.
<param>	It defines a parameter for an object.
<picture>	Used to define a container for multiple image resources.
<pre>	Used to define preformatted text.
<progress>	It represents the progress of a task.
<q>	It defines a short quotation.
<s>	Defines strikethrough text.
<samp>	Defines sample output from a computer code.
<script>	It defines a client-side script.
<section>	It defines a section in an HTML document.
<select>	Used to define drop-down list.
<small>	It defines a smaller text.
<source>	It defines multiple media resources for media elements, such as <video> and <audio>.
<span>	Defines a section in a document.
<strong>	It is used to define an important text.
<style>	It defines style information for a document.
<sub>	Used to define a subscripted text.
<sup>	It defines a superscripted text.
<svg>	It defines a container for SVG graphics.
<table>	It defines a table.
<tbody>	It defines the body of a table.
<td>	It defines a table cell.
<tfoot>	It defines the footer of a table.
<th>	It represents a table header.
<thead>	It represents a table header.
<time>	It represents a specific time.
<title>	It defines a title for the web page.
<tr>	It represents a table row.
<u>	It defines an underlined text.
<ul>	It defines an unordered list.
<var>	It defines a variable.
<video>	Used to embed video content.

Commonly used Basic Tags

Here are some of the commonly used basic tags in HTML that you should keep it mind.

<html>
<head>
<title>
<body>
<h1> to <h6>
<p>
<br>
<hr>
<!–. . . –>

Commonly used Char Tags

Here are some of the commonly used char tags in HTML that you should keep it mind.

<b>
<i>
<em>
<big>
<strong>
<small>
<sup>
<sub>
<bdo>
<u>

Commonly used Output Tags

The most commonly used output tags are as:

<pre>
<code>
<kbd>
<var>
<dfn>
<samp>

Commonly used Block Tags

The most commonly used block tags are as:

<acronym>
<abbr>
<address>
<blockquote>
<q>
<cite>
<ins>
<del>
<s>
<a>

Commonly used Input, List, Image, and Table Tags

The most commonly used input tags are as:

<form>
<input>
<button>
<select>
<optgroup>
<option>
<label>

List tags:

<ul>
<ol>
<li>
<dir>
<dl>
<dt>
<dd>
<menu>

Image tags:

<img>
<map>
<area>

Table tags:

<table>
<caption>
<th>
<tr>
<td>
<thead>
<tbody>

In this tutorial, you have learned about HTML tags and its types with examples. Hope that you will have understood the basic points of all tags available in HTML.
Thanks for reading!!!