Sharmistha Pathasala HUB

Sharmistha Pathasala HUB

Your Pocket Learning Platform

Top 10 Must-Know HTML Tags for Beginners

Author By : Asst. prof. Annada Prasad Mishra
Date : 22/04/2025

New to web development? Learn the top 10 essential HTML tags every beginner should know, explained with simple language and examples to kickstart your coding journey.

If you’re just getting started with web development, HTML (HyperText Markup Language) is your very first step. It’s the foundation of all websites and tells the browser how to display content.

To make your learning easier, here are the Top 10 HTML tags every beginner should know – explained in a simple, friendly way. Let’s dive in!

1. <!DOCTYPE html>

It is used to declare which type of document is this. This tag is always at the top of every HTML document. It tells the browser, “Hey, this is an HTML5 page!”

Syntax :

<!DOCTYPE html>

2. <html> .... </html>

It is used to work like a root tag in HTML , in which all the web page goes inside it , it wraps your entire code.

Syntax :

<html>

<!– Content Goes Here –>

</html>

3. <head>...</head> - Hidden info area

This tag holds meta info, like the page title, links to CSS files, or character encoding.

Syntax :

<head>

<title>My first prgram</title>

</head>

4. <title> ... </title> Tag

It is used to show the title of the webpage.

Syntax :

<title>My first prgram</title>

 

5. <body>....</body> Tag - Visible all page content

Everything you want the user to see (text, images, buttons) goes inside the <body>.

Syntax :

<html>

<head>

<title>My First Program</title>

</head>

<body>

<h1>Hello World</h1>

</body>

</html>

6. <h1>.....<h6> Tag - Heading Tag

Use headings to organize content. <h1> is the biggest, <h6> is the smallest.

Syntax :

<html>

<head>

<title>My First Program</title>

</head>

<body>

<h1>Hello World</h1>

<h2>Hello World</h2>

<h3>Hello World</h3>

<h4>Hello World</h4>

<h5>Hello World</h5>

<h6>Hello World</h6>

</body>

</html>

7. <p>.....</p> - Paragraph Tag

This tag is used to write the normal text content on webpage.

Syntax :

<p>

<!– Content Goes Here –>

</p>

 

8. <a>....</a> - Anchor Tag / Hyperlink Tag / Link Tag

This tag is used to create or add clickable links.

Syntax :

<a href=”https://www.google.com”> Click Here goto Google page</a>

9. <img/> - Image Tag

Want to add any pictures on the webpage ? This is the tag my friend. In this tag “src” means Source from where you add picture , “alt” means alternative text, which helps when internet slow then picture is not showing it shows only alternative text , then height and width set the dimension of the picture.

Syntax :

<img src=”koala.jpg” alt=”Koala Image” height=”200px” width=”200px”/>

10. <div>....</div> - Division Tag

Used to group content. It’s super useful when you start using CSS.

Syntax :

<div>

<p>Welcome Sharmistha Pathsala HUB</p>

</div>

Final Thoughts

These 10 HTML tags are like building blocks for any website. As a beginner, learning these will give you a strong foundation and confidence to explore more advanced HTML and CSS.

👉 Pro Tip: Try building a simple webpage using just these tags to practice!

💡 Want More?

  • Follow for more HTML tips and tricks!

  • Download our FREE HTML Cheat Sheet PDF (Coming Soon!)

  • Subscribe to our newsletter for weekly web dev tips.

Scroll to Top