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
Rashmi
Rashmi Karan
Manager - Content
Updated on Nov 8, 2024 12:04 IST

HTML, or HyperText Markup Language, is the foundational language used to create and structure content on the web. Tags form the heart of HTML, essential building blocks that define how elements on a webpage are displayed and interacted with. This blog will discuss some essential and basic HTML tags with examples.

HTML tags

HTML or Hypertext Markup Language is used to create web pages and web applications online. 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

Recommended online courses

Best-suited HTML & CSS courses for you

Learn HTML & CSS with these high-rated online courses

– / –
25 days
β‚Ή4.24 K
6 weeks
– / –
– / –
β‚Ή2.95 K
190 hours
β‚Ή7.5 K
4 weeks
– / –
1 month
β‚Ή3.2 K
28 hours
Free
2 hours
β‚Ή449
11 hours
Free
2 hours

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.

Difference between XML and HTML
Difference between XML and HTML
This article is about difference between XML and HTML. This article will tell you different advantages and disadvatages of XML and HTML.

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.

Four essential HTML tags form the basic structure for every HTML file:

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

Before discussing 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 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 web page's title. 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.Have you ever wondered...read more
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 headings, align content, add sections, and do a lot more on a website. Here is a 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 bolder than plain text. HTML has six heading tags: 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 (for 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

Top 62+ HTML Interview Questions and Answers for 2024
Top 62+ HTML Interview Questions and Answers for 2024
Here are the HTML interview questions most likely to be asked during the interviews. This list also covers some HTML CSS interview questions to help you start or move ahead...read more

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: Ordered list (by default, list items will be marked with numbers) and Unordered list (list items will be marked with bullets). 

How many HTML tags are there?

Mozilla Developer Network mentions that there are 142 HTML tags. 

Why do we use HTML tags?

HTML tags are essential for structuring content on the web. They allow browsers to interpret and display text, images, links, and other elements correctly. Tags help organize content into headings, paragraphs, lists, and more, making it easier for users to read and navigate.

 

What is the difference between block-level and inline HTML tags?

Block-level tags create a new block of content and typically start on a new line (e.g., <div>, <p>, <h1>). Inline tags do not start on a new line; they only occupy as much width as necessary (e.g., <span>, <a>, <img>). This distinction affects how elements are displayed on the page.

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