HTML Tags:

Tags define what will be the format of the content displayed on the web browser.

HTML Tags mainly have two parts opening tag and a closing tag.

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

Some HTML tags are self-closing tags or these tags are called empty tags.

This will be the main template for our code to execute, we will write our source code inside the body tag and will see the result in the browser.

Now go to any folder in your PC and create a file named "index.html" and paste the code given below. And then save the file and go to your web browser.

Now copy the file path of index.html and paste in web browser.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> Tags in HTML</title>
</head>
<body>



</body>
</html>

Now, let's start with learning HTML Tags.

To execute all the given HTML Tags below copy them one by one and paste into the body tag of "index.html" and refresh your browser to see the result:

Using HTML Tags:

1). Heading

As the name suggests 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 heading and h6 is the smallest heading.

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

Now to check this code copy this source code and paste it into the body tag of the "index.html". And after saving "index.html" refresh your web browser.

Output:

This is h1

This is h2

This is h3

This is h4

This is h5

This is h6

2). Navbar

<nav> tag is used to create a navbar. Copy the code given below and paste it into the "index.html" and then refresh your browser.

<nav> This is our navbar </nav>

3). Header

<header> tag is used to create a page header.

<header> This is our header </header>

4). Main

Used to create the main content section of the webpage.

<main> This is our main container tag for our html document</main>

5). Div

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

<div> Div tag is used for division</div>

6). Section

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

<section> This is our section </section>

7). Paragraph

<p> tag is used to create a paragraph.

<p> This is our 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. In the below code, href is the tag attribute.

<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. In the given example below "This is our mark text" is will be the marked 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). List

<li> tag is used to create list items.

<li> This is my first list </li>
<li> This is my second list </li>

This is my first list

This is my second list

17). Code

<code> tag is used to display source code on the web page.

<code> console.log('Hello Developers, in our HTML Simplified Series') </code>

18). Superscript

<sup> tag is used to create superscript text.

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

(a+b)²

19). Subscript

<sub> tag is used to create subscript text.

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

H₂O

HTML Tags PDF Download

Download Now

Tags in HTML