HTML Tags and Elements

Back to: HTML Tutorials

HTML Tags and Elements with Examples

In this article, I am going to discuss HTML Tags and Elements with Examples. Please read our previous article where we discussed How to Download and Install Visual Studio Code Editor to develop HTML-based Web Applications. At the end of this article, you will learn everything about Html tags and elements with Examples.

What are Tags in Html?

HTML tags are simply keywords that specify how web browser formats and displays content on the screen. A web browser can distinguish between simple content and HTML content using tags.

To create HTML documents and render their properties, HTML tags are required. The order in which the tags occur determines where the element appears.

The HTML tags contain three main parts: an opening tag, content, and closing tag. But some HTML tags are unclosed tags. When a web browser reads an HTML document, the web browser reads it from top to bottom and left to right. HTML tags are used to create HTML documents and render their properties. Each HTML tags have different properties. An HTML file must have some essential tags so that the web browser can differentiate between simple text and HTML text.

You can use as many tags as you want as per your code requirement. All HTML tags are enclosed in between angle brackets. HTML consists of over 100 tags. Each HTML tag has different properties. But as a developer, you only use a handful of tags on your web pages. It’s not mandatory to remember all tags but you must have sound knowledge about them.

1. All HTML tags must enclosed within < > angular brackets.
2. Every tag in HTML performs different tasks.
3. If you have used an open tag <tag>, then you must use a close tag </tag> (except some tags).

As you have seen in the Introduction part, all HTML elements have opening and closing tags and the content to be displayed is placed between them. In HTML <H1> & <h1> have the same meaning because tags are not case sensitive.

Anatomy of Tags

Types of Tags in Html

There are three types of tags in Html paired tags, unpaired tags, and self-closing tags.

Paired Tags

Paired tags in Html are those tags that have both opening tags and closing tags. Paired tags start with an opening tag followed by some content and end with a closing tag. For example, the heading opening tag is written as <h1> followed by some content “This is a heading tag” and the closing tag is written as </h1>.

Example: 

<h3> This is a heading tag </h3>

Output:

This is a heading tag

Unpaired Tags

Unpaired tags in Html are those tags that have only an opening tag and do not have a closing tag. For unpaired tags an opening tag is sufficient; they do not require a closing tag. These tags are also known as empty tags.

1. <hr>: hr stands for horizontal rule; it is used to separate different sections in a document.
2. <br>: br stands for a break; it is used to add line breaks in the document.

Self-Closing Tags

Self-closing tags in Html are those tags that do not require closing tags. In the self-closing tag, the opening tag is the only important tag required for formatting. The input tag, image tag are classic examples of self-closing tags.

<img src="1.png" alt="This is an image"/>
<input type="text" placeholder="Name" />

Here you can see src, alt, type, and placeholder inside the opening tag they are known as attributes. We will cover attributes in detail in the coming articles. In short, attributes are something that provides some extra information about the element. Attributes are always defined in elements opening tag.

Basic Html Tags

Let us understand some basic HTML Tags.

Division Tag in HTML

A division tag is used to define a section in a web document. The <div> tag is like a container; it is used to hold all other elements within it. There can be many division tags inside a single web page. A division tag is used to group similar elements together.

<div>
    <h3> I am outer div</h3>
    <div>
           <h3> I am inner div </h3>
    <div>
<div>

Output:

The division element is a block-level element. There are two types of elements in the Html document block-level element and inline element.

Block-level elements are those that take up the complete width of the screen, whereas inline elements take up only the necessary amount of space. Every block-level element begins on a new line. Inline elements do not begin on a new line.

Examples of block-level elements are the heading tag, paragraph tag, header tag, etc. Examples of inline elements are anchor tag, span tag, bold tag, image tag, etc.

Section Tag in HTML

Section and division both have the same functionality; both are used as a container to store different elements together.

<section>
    <div>
         <h3> This is a Section </h3>
    </div>
</section>

Output:

Heading Tag in HTML

A heading tag is used to define a heading in an Html document. There are a total of 6 heading tags in Html. H1 is the most important heading and H6 is the least important heading.

Example: All heading tags from H1 to H6

<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>

Output:

Paragraph Tag in HTML

A paragraph tag is used to define a paragraph in an Html document.

<p>My First paragraph</p>

Output: My First Paragraph

Span Tag in HTML

A span tag is an inline element used to mark or style a specific part of the element. Span tags are mostly used with CSS to style different elements.

<p> My First <span style=’’color : blue;’’> paragraph </span> </p>

Output:

Anchor Tag in HTML

Anchor tags are used to insert links into Html documents.<a> tags are useful in linking one page to another page. The most important attribute in the anchor tag is “href” which is used to indicate the destination of the link.

<a href="www.youtube.com">YouTube</a>

Output:

Note: This is just an overview of what anchor tags are. We will discuss them in detail in the coming tutorial.

What are elements in Html?

Elements are the building block of Html documents. HTML documents are nothing more than text files containing HTML elements. HTML tags are used to define these elements. A single web page can contain many elements. The order in which the tags occur determines where the element appears.

Anatomy of Elements

An element is a group of opening tags, closing tags, and content between them. Above you can see a Button Element. It has an opening tag <Button> a text “Submit” and a closing tag </button>. When you run the above code, this is what you get to see in the browser.

The Button element defines a button in Html Document. It has an opening tag <Button> and a closing tag </Button> with a text to be displayed on the Button between them.

Nested Elements in HTML

In Html, elements can contain other elements too within them. This is called the nesting of elements. An Html document can contain many nested elements.

For Example

<div>
    <h3>This is a nested Element</h3>
    <p> This is a nested Element</p>
</div>

Output:

Example:

<p> This is a <b> nested </b> Element </p>
<p> This is a nested <i> Element </i> </p>

Output:

Nested elements can be useful if we want to apply some extra styling to certain text inside elements, as shown in the example above. To make them bold and italic, we nested a bold tag around the word nested and an italic tag around the word element inside the paragraph tag.

Empty Elements in HTML

Elements in Html which do not have any content are called empty elements. An empty element does not have closing tags. For Example, the <br> element.

<p> This is a paragraph with <br> line break </p>

Output:

Example: The <hr> element.

<p> Hello Learners </p>
<hr>
<p> Welcome to Html Tutorial</p>

Output:

In the next article, I am going to discuss Attributes in HTML with Examples. Here, in this article, I try to explain HTML Tags and Elements with Examples and I hope you enjoy this HTML Tags and Elements article.