Advertisement

Advertisement


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


<!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. It is a notable point that a browser itself add an empty line before and after a paragraph.


<!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 link is defined with the <a> tag (Anchor tag). It is used to give link to any other 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









Become a Patron!

Note: If the updated content is not visible to you please refresh the cookies by pressing CTRL + Shift + R.