Home » HTML » HTML Tags

HTML Tags

HTML Tags: In HTML, every tag has a special meaning. The full HTML works on HTML Tags, with a specified purpose to each one of those. Each HTML Tag performs its own function and helps in creating the proper structure of a web page. All HTML Tags are predefined.

HTML has Paired and Unpaired Tags. Both types differ in their syntax. Paired Tags always work in pair, whereas Unpaired tags work individually. Look at the syntax of a Paired tag below.

Syntax:

<tag> Content </tag>

Types of HTML Tags

There are two types of HTML Tags which are used by the website developers:

  • Paired Tags
  • Unpaired Tags

Paired Tags

Paired tags are a set of two tags with the same name. The difference is that one is an opening tag, and the other one is the closing tag.

It is necessary to close a paired tag; otherwise, it can result in the malfunctioning of the website. When the content is written within paired tags, then it ensures that the effect of those tags would be limited to only the content they are surrounding.

Notice below, the syntax and then a list of paired tags in HTML. Notice that each tag has a closing tag with a slash(/) before the name of the tag.

Syntax: <tag> Content </tag>

Some important Paired Tags in HTML are:

Open Tag Close Tag
<html> </html>
<table> </table>
<form> </form>
<span> </span>
<p> </p>

Unpaired Tags

Unpaired tags do not have a closing tag. These tags work individually and don't depend on a closing tag. These are also called non-container tags because they do not contain any content.

It is recommended to close the unpaired tags also. But unfortunately, we do not have the closing pair for those. So, an unpaired tag is closed after adding a slash(/) after the name of the tag. For example: <br/>

Look below the list of some Unpaired Tags in HTML. Notice the use of slash(/) in the tags, to close them.

Some Unpaired Tags are:

Open Tag
<br>
<hr>
<meta>
<input>

HTML Heading Tag

Heading tag is used to give headings of different sizes in a document. There are six different HTML heading tags, which gives different heading sizes and are defined by <h1> to <h6> tags. <h1> gives the largest heading and <h6> gives the smallest one. So <h1> can be used for most important headings and <h6> can be used for a least important one.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Heading Tag </title>
</head>
<body>
<h1> This is Heading 1 </h1>
<h2> This is Heading 2 </h2>
<h3> This is Heading 3 </h3>
<h4> This is Heading 4 </h4>
<h5> This is Heading 5 </h5>
<h6> This is Heading 6 </h6>
</body>
</html>

Output

HTML Heading Example

This is Heading 1

This is Heading 2

This is Heading 3

This is Heading 4

This is Heading 5
This is Heading 6

HTML Paragraph Tag

The <p> tag is used to define a paragraph in a document. HTML paragraph or HTML <p> tag gives the text inside it, a paragraph like finishing. It is a notable point that a browser itself add an empty line before and after a paragraph.

Let's take a simple example to see how it works.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Paragraph Tag </title>
</head>
<body>
<p> This is First Paragraph </p>
<p> This is Second Paragraph </p>
<p> This is Third Paragraph </p>
</body>
</html>

Output

HTML Paragraph Tag Example

This is First Paragraph

This is Second Paragraph

This is Third Paragraph


HTML Anchor Tag

HTML Hyperlink is defined with the <a> tag (Anchor tag). It is used to give a link to any file, webpage, image etc.

This tag is called anchor tag and anything between the opening <a> tag and the closing </a> tag becomes part of the link, and a user can click that part to reach to the linked document.

Following is the simple syntax to use <a> tag.


<!DOCTYPE html>
<HTML lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Anchor Tag </title>
</head>
<body>
<a target="_blank" href="https://www.coderepublics.com"> This is a link </a>
</body>
</html>

Output

HTML Anchor Tag Example This is a link


Note : Use 'target = _blank' as an attribute in <a> tag to open the link in a new tab.


HTML Image Tag

The Image Tag is used to add Images in HTML documents. The HTML <img> tag is used to add image in a document. The 'src' attribute is used to give source(address) of the image. The height and width of the image can be controlled by the attributes - height="px" and width="px".

The 'alt' attribute is used as an alternative in a case if the image is not shown. Anything written as a value of this attribute will be displayed. It will give information about the image.


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> HTML Image Tag </title>
</head>
<body>
<img src="HTML-Image.png" width="400px" height="200px">
</body>
</html>

Output

HTML Image Tag Example
HTML Image



Color Picker

List of color names supported by all browser »



Character Code

List of character codes to display special character »



Language Code

List of all language supported by all browser »



Country Code

List of Country code supported by all browser »