Previous Next

What is tag in HTML?

In HTML tag define what will be the format of the content displayed on the web browser.

Tags mainly have two parts one is opening tag and a closing tag.

HTML tag starting tag is enclosed within <> and closing tag enclosed within </>

Some HTML tags are self-closing tags or these tags are called empty tags. We don't need </> to close these tag.

Now, let's see different tags used in HTML

1). Heading

Heading tag is used to create the heading on web pages.

There are 6 headings available in HTML from h1 to h6.

h1 is the largest and h6 is the smallest heading.

<h1> This is h1 in HTML </h1>
<h2> This is h2 in HTML </h2>
<h3> This is h3 in HTML </h3>
<h4> This is h4 in HTML </h4>
<h5> This is h5 in HTML </h5>
<h6> This is h6 in HTML </h6>

Output:

This is h1

This is h2

This is h3

This is h4

This is h5

This is h6

2). Navbar

This tag is used to create a navbar in HTML document.

<nav> This is navbar </nav>

3). Header

This tag is used to create page header.

<header> This is header </header>

4). Main

<main> tag in HTML is used to create the main content section of the webpage.

<main> This is our main container tag </main>

5). Div

<div> tag is used to create division on a webpage.

<div> This is div tag </div>

6). Section

<section> is used to create the particular section. It can contain more than one HTML tag.

<section> This is section </section>

7). Paragraph

<p> tag is used to create a paragraph.

<p> This a Paragraph</p>

8). Span

<span> is used to style the part of the text.

<span> This is our span text</span>

9). Anchor

<a> tag is used to create hyperlinks.

<a href="https://www.geekshelp.org"> Click Here </a>

Click Here

10). Footer

<footer> tag is used to create a footer for the webpage. And we can use more than one tag in the footer tag.

<footer> This is footer of our html document </footer>

11). Mark

<mark> tag is used to highlight the background of the text.

<p> <mark> This is our mark text </mark> And this is another text </p>

This is our mark text And this is another text

12). Strike

<strike> is used to place horizontal lines on the text.

<p> This is normal text </p>
<strike> This is strike text </strike>

This is normal text

~~This is strike text~~

13). Button

<button> tag used to create a button on web page.

<button> Click Here </button>

14). Small

<small> used to display small text. The text which is inside the <small> tag that text will be small as compared to normal text.

<p> This is paragraph and <small>This is small text </small></p>

This is paragraph and This is small text

15). Pre

<pre> tag is used to create pre-formatted text. This will display the text on the web browser in which way we write on "index.html"

<pre>
        This is
        my pre-formatted text 
    in HTML
</pre>

	This is
    	my pre-formatted text 
    in HTML

16). Superscript

<sup> tag is used to create superscript text.

<p>(a+b)<sup>2</sup></p>

(a+b)²

17). Subscript

<sub> tag is used to create subscript text.

<p>H<sub>2</sub>O</p>

H₂O

Code Described in the video

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Tags in HTML </title>
</head>
<body>
    <!-- heading in html -->
    <h1> This is a heading </h1>
    <h2> This is a heading </h2>
    <h3> This is a heading </h3>
    <h4> This is a heading </h4>
    <h5> This is a heading </h5>
    <h6> This is a heading </h6>
    
    <!-- paragraph in html -->
    <p> This is a paragraph </p>
    <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi a ab debitis dignissimos, aut officia omnis nihil dicta illo non. Adipisci, asperiores possimus atque dignissimos cumque veritatis tempore temporibus perferendis provident. Voluptate illo magni ipsam? Ad fugit minus atque, quasi deserunt similique amet quod molestias numquam sint nihil reprehenderit nesciunt.</p>

    <!-- navbar in html -->
    <nav> This is a navbar </nav>
    <!-- section tag in html -->
    <section> This is section </section>
</body>
</html>