HTML tags are like keywords which defines that how web browser will format and
display the content. With the help of tags, a web browser can distinguish
between an HTML content and a simple content. HTML tags contain three main
parts: opening tag, content and closing tag. But some HTML tags are unclosed
tags.
HTML Tags list: Paired and unpaired
tags
The whole HTML functions on HTML Tags. These tags are the basic
building block of a website. No web technologies like CSS, PHP,
Python, WordPress, etc. will exist without HTML Tags. Today, you will get a
complete HTML tags list; paired and unpaired. You can also download a
PDF of HTML tags list. Let's start with HTML tag definition.
What is an HTML Tag?
HTML Tags are pre-defined elements in HTML, enclosed within these
brackets < > signs. For example: <html>, <table>, etc. All HTML tags has a
particular function associated with them.
Each tag has a special function and a combination of various tags
developes a website. For example, a <p> tag defines a paragraph in the
website and a <table> tag displays a table.
All HTML Tags are predefined, i.e., you cannot create new tags. Look at
the example below, this is an example of a paired tag. Observe that there
are two tags of same name, but the latter one has a slash / before it, it is
a closing tag. Now, what is a closing tag? Let's start with different types of
tags!
Syntax:
<p> Content </p>
Types of tags in HTML- HTML tags list
download
The types of tags in HTML are categorized on the basis of their
appearance. Some tags comes in pairs and others are single. You can
also download HTML tags list pdf or can look at the table at the page end.
There are two types of tags in HTML that are used by the Website
Designers:
1. Paired Tags (Opening and Closing Tags)
2. Unpaired Tags (Singular Tag)
Paired Tags - Opening and Closing Tags
Paired tags are a set of two tags with the same name. In each Paired tag
set, one is an opening tag, and the other one is the closing tag. The
closing tag has a / slash, it means that the tag is closed now.
It is necessary to close a paired tag; otherwise, it can result in the
malfunctioning of the website. When the content is written within paired
tags, then it ensures that the effect of those tags would be limited to only
the content between them.
Look at the list of some paired tags in HTML below. Notice that each tag
has a closing tag with a slash(/) before the name of the tag.
Syntax: <tag> Content </tag>
Example: HTML Code TagTry this code »
<code> text... </code>
List of some paired tags in HTML:
Open Tag Close Tag
<html> </html>
<table> </table>
<form> </form>
<span> </span>
<ul> </ul>
<p> </p>
<head> </head>
Open Tag Close Tag
<div> </div>
Unpaired Tags - Singular Tags
Unpaired tags are single tags with no closing tag. These tags are also
called Singular Tags. These are also called non-container
tags because they do not contain any content.
It is recommended to close the unpaired/singular tags also. But
unfortunately, we do not have the closing tag for those. So, an unpaired
tag is closed after adding a slash(/) just before the greater than > sign. For
example: <br />.
Look below the list of some Unpaired Tags in HTML. Notice the use of
slash(/) in the tags, to close them.
Some Unpaired Tags are:
Open Tag
<br>
<hr>
<meta>
<input>
HTML Heading Tags - H1 tag to H6 tag
Heading tag is used to give headings of different 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 a least important one.
ExampleTry 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
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 p tag - 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 a line break before
and after a paragraph.
Let's take a simple example to see how it works.
ExampleTry 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
This is First Paragraph
This is Second Paragraph
This is Third Paragraph
HTML a tag - Anchor Tag
HTML Hyperlink is defined with the <a> tag (Anchor tag). It is used to give
a link to any 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.
ExampleTry 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
This is a link
Note : Use 'target = _blank' as an attribute in <a> tag to open the link in
a new tab.
Basic HTML
Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<head> Contains metadata/information for the document
<title> Defines a title for the document
<body> Defines the document's body
<h1> to Defines HTML headings
<h6>
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!--...--> Defines a comment
Basic HTML Tags
Head Tag
The head tag <head> contains all the elements describing the document.
Title Tag
The title tag <title> specifies the HTML page title, which is shown in the browser’s
title bar.
Body Tag
The body tag <body> is where you insert your web page’s content.
Paragraph Tag
A paragraph tag <p> is used to define a paragraph on a web page.
Heading Tag
The HTML heading tag is used to define the heading of the HTML document. The
<h1> tag defines the most important tag, and <h6> defines the least.
Let’s practice using these tags and create a web page with them:
Formatting Tags
Emphasis tag
The HTML <em> tag is used to emphasize the particular text in a paragraph.
Bold Tag
The <b> tag is used to make the text bold.
Italic Tag
The <i> tag is used to make the text italic.
Underline Tag
The <u> tag is used to set the text underline.
Basic HTML Tags for Document Structure
Tags Descriptions
Encloses the entire HTML document, serving as the root element
<html>
for all HTML content.
Contains header information about the webpage, including title,
<head> meta tags, and linked stylesheets. It is part of the document’s
structure but is not displayed on the webpage.
Used within the <head> section to define the title of the HTML
<title> document. It appears in the browser tab or window and provides a
brief description of the webpage’s content.
Basic HTML Tags for Document Structure
Tags Descriptions
Encloses the visible content of the webpage, such as text, images,
<body> audio, videos, and links. All elements within this tag are displayed
on the actual webpage when viewed in a browser.
HTML Colors can be applied to text, backgrounds, borders, links, forms,
tables, etc. This article provides an in-depth look at how colors can be
applied to various elements such as text, backgrounds, borders, links,
forms, and tables in HTML. We will explore different color formats
including hexadecimal, RGB, RGBA, HSL, and named colors, offering you
precise control over the color presentation on your web pages.
HTML Colors Name
HTML color names offer a user-friendly way to specify colors. From
classic colors like Red, Green, Blue, Pink, Purple, Sky Blue, Gray, and
Orange, to more exotic shades, HTML provides a wide palette for web
designers. Whether you’re designing a serene theme or a vibrant layout,
HTML color names have got you covered.
HTML Color Usage
Usage Descriptions Syntax
HTML Background Color is the
shade that appears behind the <div
content on a webpage. The style=”background-
Background background covers the total size of color: magenta;”>
Color the element with padding and Div with magenta
border but excludes the margin. It background
makes the text so easy to read for </div>
the user.
<p style=”color:
Text color in HTML specifies the
pink;”>
Text Color color of the text content, similar to
Pink color is used
font color.
</p>
Border Color HTML Border Color refers to the <div style=”border:
Usage Descriptions Syntax
1px solid black;
color of borders around elements border-color: green;”>
like <div>, <img>, etc. It defines This div has a green
the color of the border lines. border
</div>
HTML Link Color specifies the
<a href=”#”
color of the anchor tag within a
style=”color: blue;”>
Link Color webpage, allowing us to define the
Link has a blue color
color of clickable text, and making
</a>
user navigation more visual.
