HTML Tags: Essential and Basic Tags for Creating an HTML Document

HTML Tags: Essential and Basic Tags for Creating an HTML Document

6 mins read32K Views Comment
clickHere
Rashmi
Rashmi Karan
Manager - Content
Updated on Oct 29, 2023 00:56 IST

HTML tags form the basic structure of any webpage or HTML document. In this blog, we will discuss some essential and basic HTML tags with examples.

2022_03_What-is-46.jpg

HTML or Hypertext Markup Language is used to create web pages and web applications on the internet. It is a computer language that defines the structure of a web page. If you are just starting with HTML, here are essential and basic HTML tags that you will need to know. Knowledge of these HTML tags will help you build a basic HTML page.

Table of Contents

What are HTML tags?

HTML tags are special keywords that specify how a web browser must format and display the content. Tags are wrapped in brackets < and >. They start with an open angle bracket (<) and close with a closed angle bracket (>). The ending tag has a forward slash before the name of the element. They can nest (be placed) inside one another.

HTML Tag Syntax:

<example>The first tag is the opening tag that indicates the start while the second tag is the closing tag that depicts the end </example>.

For Example –

 
<p>This is a paragraph</p>
Copy code

In the above example, the opening <p> tag indicates the start of a new paragraph. The </p> is the closing tag that ends it.

Why do we need to open and close HTML tags?

It is very important to open and close tags. It tells the web browser when a piece of code begins and ends so that it can distinguish it from other sections of the page.

Missing a closing tag can result in browser incompatibilities. It can make your HTML web page content appear improper. When web developers troubleshoot problems in HTML code, typically, they look for missing closing tags as the first step.

However, not all HTML tags have an end tag. Some tags work without closing tags. For example, the <img> tag for showing images does not need an end tag.

Also Read: Difference Between HTML and XML

Essential HTML Tags

Every HTML document must have some essential tags so that a web browser can understand and display it correctly. These tags help web browsers distinguish between simple text and HTML text. Let’s understand how many HTML tags are there.

There are four essential HTML tags that form the basic structure for every HTML file:

  1. <html></html>
  2. <head></head>
  3. <title></title>
  4. <body></body>

Before we talk about the essential tags, let’s learn about the HTML document declaration, i.e. <!DOCTYPE>.

<!DOCTYPE>

<!DOCTYPE> is not a tag but a declaration that tells the browser about the document type. It specifies the version of HTML that the document is using so that browsers can display web pages correctly. All HTML documents must start with this declaration. It is not case-sensitive.

Syntax in HTML5:

 
<!DOCTYPE html>
Copy code

Or

 
<!doctype html>
Copy code

Now, let us understand the essential tags in detail.

1. <html></html>

The <html> tag defines the document as a web page. It also specifies the beginning and end of the HTML document.

It contains all HTML elements except the <!DOCTYPE html> declaration. All other other tags are nested between the <html> and </html> tags.

Syntax:

 
<html>Content</html>
Copy code

2. <head></head>

The <head> tag represents the head section of the HTML document. It gives information about the webpage, which is not displayed on the browser window. It contains the information related to the webpage and contains tags such as, <title>, <meta>, <link>, etc. The <head> tag is located between the <html> tag and the <body> tag.

Syntax:

 
head><title>Webpage Title</title></head>
Copy code

3. <title></title>

As the name suggests, the <title> tag specifies the title of the web page. This tag is described in the head tag. The content in between the <title>…</title> tag appears on the tab or title bar in the browser window.

Syntax:

 
<title>Webpage Title</title>
Copy code

4. <body></body>

This tag contains all the information and other visible content that we want to display on the web page. All the images, links, plain text, videos, etc. go between the <body> and </body> tags.

The body tag contains other tags such as the <p> tag for paragraph, <strong> tag for bold text, <a> tag for images, <ol> tag for ordered list, etc.

Syntax:

 
<body> Content </body>
Copy code
Learn How to Write HTML Comments
Learn How to Write HTML Comments
Have you ever wondered how developers leave notes or disable parts of HTML code without affecting the webpage? This is done using HTML comments. Let us understand more! Learn what...read more
HTML Formatting: HTML Tags for Text Formatting (With Examples)
HTML Formatting: HTML Tags for Text Formatting (With Examples)
Have you ever wondered how is text formatting done in HTML using HTML formatting tags? Let us understand it in detail with the help of various examples.
HTML Horizontal Line – Learn How to Use the hr Tag in HTML
HTML Horizontal Line – Learn How to Use the hr Tag in HTML
This tutorial explains the HTML hr tag and its styling with syntax and examples to create thematic line breaks in HTML documents.While working on web pages, you may want to...read more

Basic HTML Tags

Apart from essential tags, an HTML document can have as many tags as you want to display your content properly. Using the basic tags, you can format content, add heading, align content, add sections, and do a lot more on a website. Here is the list of some of the commonly used basic HTML tags.

1. <h1></h1>

This tag defines the HTML headings. The heading tag makes the text bigger and bold compared to the plain text. There are six heading tags in HTML: h1, h2, h3, h4, h5, h6. The <h1> tag represents the most important heading while <h6> is for the least important ones.

Syntax:

 
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Copy code

2. <p></p>

This tag defines a paragraph. When we use the <p> tag, the web browser automatically inserts a single blank line before and after each <p> element to make the text more readable.

Example:

 
<p>My first paragraph.</p>
Copy code

3. <img>

The image tag allows us to insert images into a web page. It has no closing tag. The attributes of the image tag include:

  • src: the source file (src)
  • alt: alternative text
  • width
  • height

Example:

 
<img src="naukrilearning.jpg" alt="naukri learning" width="100" height="100">
Copy code

4. <a></a>

The <a> tag or the anchor tag allows us to link one web page to another page or a section of the same page. The <a> tag has an href attribute that holds the destination URL. Using the anchor tag, we can create a hyperlink to web pages, files, email addresses, segments on the same page, etc.

Example:

 
<a href="https://www.shiksha.com/online-courses/">This is a link</a>
Copy code

5. <!– Comment –>

The comment tag helps programmers to understand the HTML source code. The comments are not visible on the web page in a browser.

Syntax:

 
<a href="https://www.shiksha.com/online-courses/">This is a link</a>
Copy code

To get started with your first HTML document:

  • Copy the code given below
  • Paste it into your editor (example – Notepad in Windows)
  • Save the file with .htm or .html extension (example – mypage.html)
  • Open the HTML page in your web browser

Here is the code to create an HTML document with all the essential and basic tags of HTML as discussed above.

 
<!DOCTYPE html>
<html>
<head>
<title>My Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph</p>
</body>
</html>
Copy code

It will display as below on your web browser:

2022_03_HTML-Code-on-Web-Browser.jpg

Also Read: Top HTML Interview Questions and Answers

Conclusion

This article discussed the essential HTML tags for creating an HTML document or web page. You should understand that they work at a basic level to form an HTML document. In our upcoming articles, we will dive deep into some of the topics introduced in this blog and present other important HTML concepts.

FAQs

Do all HTML tags need to have closing tags?

No, not all HTML tags have closing tags. In HTML, singleton tags or self-closing tags, or void tags do not require a closing tag to be valid. For example, the tag to break the line does not require a closing tag.

What is a list tag in HTML5?

The list tag or tag allows us to add the contents in an HTML document in listed order. There are two types of HTML lists: u2022 Ordered list (by default, list items will be marked with numbers) u2022 Unordered list (list items will be marked with bullets)

About the Author
author-image
Rashmi Karan
Manager - Content

Rashmi is a postgraduate in Biotechnology with a flair for research-oriented work and has an experience of over 13 years in content creation and social media handling. She has a diversified writing portfolio and aim... Read Full Bio

Comments