Scribd
Upload
3 views11 pages

HTML tags

HTML tags are essential elements that define how content is formatted and displayed in web browsers, consisting of opening and closing tags, with some being unpaired. The document provides a comprehensive overview of HTML tags, categorizing them into paired and unpaired tags, and includes examples of various tags such as headings, paragraphs, and links. Additionally, it discusses the application of colors in HTML for text, backgrounds, and borders, along with their syntax.

Uploaded by

shivani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views11 pages

HTML tags

HTML tags are essential elements that define how content is formatted and displayed in web browsers, consisting of opening and closing tags, with some being unpaired. The document provides a comprehensive overview of HTML tags, categorizing them into paired and unpaired tags, and includes examples of various tags such as headings, paragraphs, and links. Additionally, it discusses the application of colors in HTML for text, backgrounds, and borders, along with their syntax.

Uploaded by

shivani
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 11

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.

You might also like