html

Basic tags of HTML

HTML is known as Hypertext Markup Language. It is widely used in web applications to set their front-end structures. It is a simple and user-friendly programming language. It contains a set of elements and these elements are based on the tags.

In this language, every tag contains two basic things: one is an opening tag with the sign of angle bracket “<” and the other is an ending tag with the sign of closing angle bracket “>”. HTML uses different tags for different content structures, such as tables, lists, images on a web page, etc. In this article, we will learn about some basic and important tags of HTML with some code examples.

Syntax of an HTML tag

<b>I have a pet.</b>

In the following section, we will explore more about the structure of an HTML element.

An element is based on the following parts:

Opening tag: It contains the name of an element that is wrapped up in opening and closing angle brackets. It indicates the opening of a tag, such as in the above-given example <b> is an opening tag.

Closing tag: it is the same as the opening tag at the end of the content; however, it contains a forward slash at the start of the closing tag such as </b>. It shows that an element is ended here.

Content: Content is the text between the opening and closing tags. Such as in the above-given example, “I have a pet.” is the content between the tags.

Element: An element is the collection of content and tags. In the above figure, all things together make an element.

Nesting elements/ tags

In HTML, we can use nested or multiple tags within a single element. For example, if I want to emphasize a word from a statement then I can use a tag inside another tag and this phenomenon is known as Nesting tags. Have a look at the following example.

<p> I have a <strong>cat</strong> pet. </p>

In the given example, we used nested tags to emphasize a specific word “cat”. However, when you are using nested tags make sure that you close your tags properly. In this example, first, we open the paragraph tag <p> and then start a new tag <strong>, so according to this you should have to close the </strong> tag first and after that close the first paragraph </p> tag.

Empty elements

In HTML, some elements can be used without any content and these elements do not need a closing tag such as an image tag. Have a look at the given example for a better understanding.

Example

<img src= "images\image1.png" alt="Testing Image">

This <image> tag contains two attributes “src” and “alt”; however, there is no inner content and no closing tag. The purpose of this tag is to insert an image on an HTML page.

Mandatory tags of HTML

Some basic tags of HTML are given in the form of code below.

Example

<!DOCTYPE html>
<html>
<head>
<title>Document Titel</title>
</head>

<body>
<!--It is the structure of a comment-->
Content of document.
</body>
</html>

Description of this example is given below:

<!DOCTYPE>: It defines the type of document.

<html>: It defines that the document is HTML based.

<head>: It contains the metadata of the defined document.

<title>: This tag defines the title of an HTML document.

<body>: It defines that the body of the document starts from here which contains the content of the document.

All the above tags are the basic tags of html which are necessary to start a HTML document. Moreover, there is a list of some other tags of HTML.

List of Basic tags in HTML

Some of the most used basic tags are listed below:

<a>: It is an anchor tag which is used to add a link in an HTML document for navigating from one page to another.

<p>: It is used to define paragraphs in HTML.

<h1> to <h6>: These tags are used to create the different headings in HTML.

<br>: It is used for a line break.

<b>: This tag is used to highlight the specific text from a line or paragraph.

<i>: It is used for the italic text.

<div>: It is used for the division of documents.

<li>: This tag is used for the list creation.

<img>: This tag is used to merge an image on an HTML file.

<strong>: It is used to emphasize a text.

Conclusion

HTML uses different tags for the different content structures, such as table structure, a list of bullet points, to set an image on a web page, etc. This post explains the basic tags of HTML which are used to structure the HTML document where every single tag starts with an opening sign “<” and ends with a closing sign “>”. All basic tags are defined in this tutorial with simple code examples.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.