English
Amharic
Arabic
Armenian
Belarusian
Bengali
Bosnian
Bulgarian
Catalan
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Czech
Danish
Dutch
Esperanto
Estonian
French
Frisian
Galician
Georgian
German
Greek
Gujarati
Haitian Creole
Hausa
Hawaiian
Hebrew
Hindi
Hmong
Hungarian
Icelandic
Igbo
Indonesian
Irish
Italian
Japanese
Javanese
Malagasy
Malay
Malayalam
Maltese
Maori
Marathi
Mongolian
Myanmar (Burmese)
Nepali
Pashto
Persian
Polish
Portuguese
Punjabi
Romanian
Russian
Slovenian
Somali
Spanish
Sudanese
Swedish
Tajik
Tamil
Telugu
Thai
Turkish
Ukrainian
Urdu
What are The 21 tags in HTML with Examples
HTML Tags
To become a good web developer, you need to know the intricacies of HTML tags and how to use them.
Ever since Semantic tags came with HTML 5, using HTML tags has become even easier and more comfortable.
Every tag in HTML has some meaning, no tag should be used anywhere unnecessarily as per one’s wish.
If you are reading this blog of HTML tag, then we hope that you will definitely know what is HTML?
What are HTML Tags:-
HTML tag means words and method of writing words using which an HTML document is created, no HTML webpage can be created without using tags.
To write any content in HTML tag, you have to open and close the tag,
Example of HTML tag:
body> Your content will appear between the open and close tags.
HTML tag is opened with “” and bound with “”.
There are two types of tags in HTML,
Paired tag,
Unpaired tag.
Paired tag means that after opening it to use it, it also has to be closed in the end.
Unpaired tags means those tags which after opening for use, there is no need to close them at the end.
Further in this HTML tag tutorial, we will understand which tag is Paired and which is Unpaired.
All HTML Tags:-
Now we will look at all the HTML tags one by one and understand what each one is used for.
There are a total of 132 to 142 tags in HTML, so we will see the most used tags first.
List of html tags
<html>,<head>,<title>,<meta>,<script>,<link>,<style>,<body>,<header>,<nav>,<div>,<p>,<span>,<a>,<img />,<b> & <strong>,<br />,<hr />,<i>,<u>,<h1> to<h6>,<table>,<thead>,<tbody>,<tfoot>,<tr>,<td>,<th>,<ul>,<ol>,<li>,<form>,<input>,<button>,<aside>,<footer>,<main>,<article>,<section>
(1)- <html>
<html> tag is the most important tag of any webpage, the entire code of the HTML document is in between this tag, it is a paired tag.
Example:
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>
(2)- <head>
The <head> tag contains meta information related to the HTML document (webpage) like webpage title, description, language, etc.
Stylesheet (CSS) and JavaScript used in the webpage are also linked in the <head> tag.
The content placed in <head> tag is not visible to the user of the webpage, it is only for web browser, search engine, social media bot, etc.
Example:
<head>
“Content”
</head>
(3)- <title>
We can keep the title of the webpage with title> tag, so we can see it in the tab bar of the web browser.
Example:
<title> HARTRON EXAM </title>
(4)- <meta>
Meta means detailed information about some information (Data about Data).
With the help of <meta> tag, we tell the web browser about the detailed information of the webpage like title, description, color, etc. of the webpage.
The information given in <meta> tag is very useful, because this information is used in SEO (Search Engine Optimization) so that search engines like Google, Bing can understand about the webpage.
Example:
<meta name=”dc.language” content=”hi_IN” />
(5)- <script>
With <script> tag, we can add any external JavaScript to the webpage and use it, for which we need to add the URL (link) of JavaScript.
With this tag we can also write internal JavaScript.
Example:
<script src=”Add address of external JavaScript file”></script>
<script>
internal javascript
</script>
(6)- <link>
With <link> tag we can use any CSS style in our HTML webpage.
Example:
<link rel=”stylesheet” type=”text/css” href=”Add address of CSS file” />
(7)- <style>
With <style> tag, we can write internal CSS in the tag of HTML of our webpage without linking any external CSS file.
Example:
<style>
body{
background-color: yellow;
}
</style>
(8)- <body>
In the <body> tag, we keep the content for which the user has come to our webpage, only useful things should be kept in this tag.
Most of the content and tags in any webpage are in the <body> tag.
Example:
<body> Content will be added here </body>
(9)- <header>
The <header> tag is the top of a webpage, which contains a menu or any navigation content according to the webpage, making it easier for the user to navigate through the website.
There may also be some other special tags inside this tag like <nav> tag.
Example:
<header>
“LOGO”
<nav>
“MENU”
</nav>
</header>
(10)- <nav> (Navigation)
When we have to provide a list which contains links to the pages of the website or any such information which makes it easier for the user to navigate through the website, we write it in the <nav> tag.
<nav> tag means navigation, by using it, search engine bots also easily know that from here they can crawl (index) more pages of the website.
Example:
<nav>
<ul>
<li>
<a href=”/about-us”>About Us</a>
</li>
<li>
<a href=”/contact-us”>Contact Us</a>
</li>
<li>
<a href=”/categories”>Categories</a>
</li>
</ul>
</nav>
(11)- <div>
Whenever we create a webpage, it has many departments within a single section, then the
tag works to keep all those departments separate.
The <div> tag has no specific use, so you can use it anywhere in your webpage. (except inside <head> tag)
Example:
<body>
<div>Department 1</div>
<div>Department 2</div>
<div>Department 3</div>
</body>
(12)- p>
<p> Tags are used to write paragraphs, so that it looks a little different from other sections.
If you are writing an article or blog post, then it is necessary to use <p> tag to write the paragraph.
Example:
<article>
<p>In this Hindi tutorial we are understanding about HTML tags.</p>
</article>
(13)- <span>
When we have to design only a small part of the entire content in a tag like <div> tag or <p> tag, then we use <span> tag.
<span> tag does not have any design of its own, hence you can easily give it a different style.
Example:
<div>
<p>If you need any help, please let us know in the Comment section/span>.</p>
</div>
(14)- <a> (Anchor Tag)
The <a> (Anchor) tag is used to make any text on a web page clickable and send the user to another page.
When the user clicks on the text containing the anchor tag, it is redirected to another page, in which it is also necessary to provide a link to the other page.
Example:
<p> Visit a href=”https://www.hartronexam.com”> W3 Hindi </a></p>
(15)- <img /> (Image)
We can add images to our HTML webpage by using <img /> tag.
To add an image, you must have the source (URL) of the image.
The <img /> tag is a self-closing tag that is not bound to a closing tag.
Example:
<div>
<img src=”https://www.hartronexam.com/wp-content/uploads/2022/12/W3-logo.png”/>
</div>
(16)- <b> (Bold) & <strong>
With <b> tag, we can make the text of our webpage only bold and different.
Example:
<p>I am an <b>Indian</b></p>
(17)- <i>(Italic)
The <i> tag is used to make text appear in italic format.
Example:
<p>Italic text appears <i>skewed</i> to appear below the text</p>
(18)- <u>(Underline)
With <u> tag, we can underline (_) below the text, which can highlight that text a little.
Example:
<p>The u tag causes <u>underline</u> to appear below the text</p>
(19)- <br /> (Break Row)
With <br /> tag, you can end a line anywhere in an HTML webpage and start a new line.
Example:
<p> From here onwards the words <br/> will come in a new line.</p>
(20)- <hr /> (Horizontal Row)
With the help of <hr/> tag, we can create a sharp line or divider anywhere on the webpage.
Example:
<p> Further words from here </p>
<hr/>
<p>Will come after the divider.</p>
(21)- <h1> to <h6> heading tags
In the HTML webpage, it is necessary to give a heading to all the departments according to the subject.
To give title in HTML, a total of 6 tags (h1,h2,h3,h4,h5,h6) are used according to the importance of the title.
<h1> tag is the most important in the webpage, it contains the main title of the webpage, there is only one <h1> tag in the entire webpage, then <h2> inside it, and <h3> inside <h2> and so on. You can use heading tags up to <h6>.
<h1> is given to the most important and <h6> is given to the least important heading.
Using heading tags makes it easier for search engines and users to understand the structure of your webpage.
Example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Summary
So friends, till now we have understood about a total of 20-30 tags in this HTML tag tutorial, soon our team will add content about the remaining tags also.
So if you liked our blog, or have any advice or suggestion related to this blog, then you can tell us in the comment section, thank you.