HTML Tags

Every HTML tag has a special meaning to the browser. Each tag performs its own function and helps in creating the proper structure of a web page. You can't create ur own tags, all tags are predefined.

Syntax:

<tag> Content </tag>

Types of Tags

Paired Tags

Unpaired Tags

Paired Tags

Paired tags are those tags that comes in pair. They have an opening and a closing tag.

Syntax:

<tag> Content </tag>

Some Paired Tags are:

<html> </html>

<table> </table>

<form> </form>

<span> </span>

<p> </p>

Unpaired Tags

Unpaired tags do not have a closing tag. These are opened same as paired tags but do not have to be closed.

Some UnPaired Tags are:

<!DOCTYPE>

<br>

<hr>

<meta>

<input>

HTML Heading Tag

Heading tag is used to give headings of particular 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 least important one.

Example Try this code »

<!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.

Example Try this code »

<!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

Let's take a simple example to see how it works. It is a notable point that a browser itself add an empty line before and after a paragraph.

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

<a>

</a>

This tag is called anchor tag and anything between the openingtag and the closingtag 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.

Example Try this code »

<!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.

Example Try this code »

<!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