Basic HTML Tags Explained (h1 to h6, p, img, a, button)

If you are just starting with HTML, don’t worry — you don’t need to learn everything at once. With just a few basic tags, you can already build your first simple webpage.
In this blog, we will learn the most important HTML tags in a very easy and practical way: h1 to h6, p, img, a, and button.

🧠 What Are HTML Tags?

-HTML tags are like instructions that tell the browser what to show on the screen.

For example:

If you want to show a heading → use a heading tag
If you want to show text → use a paragraph tag
If you want to show an image → use an image tag

So basically, HTML tags help us build the structure of a webpage.

Heading Tags (h1 to h6)

-Heading tags are used to write titles and headings on a webpage.

-There are 6 levels of headings, from biggest to smallest.

html

<h1>Main Heading</h1>

<h2>Sub Heading</h2>

<h3>Section Heading</h3>

<h4>Smaller Heading</h4>

<h5>Very Small Heading</h5>

<h6>Smallest Heading</h6>

👉 How to understand this easily:

h1 → Main title of the page (use only once)

h2→ Main sections (like About, Services)

h3–h6→ Smaller sections and details

Think of it like a book:

h1 = Book title

h2 = Chapters

h3 = Subtopics

-This helps organize your content properly.

Paragraph Tag (p)

-The <p> tag is used to write normal text or paragraphs.

html

<p>This is a paragraph.</p>

👉 Where to use:

About section
Descriptions
Any normal text on your page

-It automatically gives some spacing, so your text looks clean and readable.

Image Tag (img)

-The <img> tag is used to display images on your webpage.

html

<img src="https://angadtech.com/images" alt="image">

👉 Important parts:

src → image link (where the image comes from)

alt→ description of the image

👉 Example use:

Profile photo
Product image
Banner image

-This tag does not have a closing tag, and it shows the image directly.

🔗 Anchor Tag (a)

-The <a> tag is used to create links.

html

<a href="https://example.com">Visit Website</a>

👉 What happens:

When you click the text, it takes you to another page or website.

👉 Open in new tab:

html

<a href="https://example.com" target="_blank">Open Link</a>

👉 Use cases:

Social media links
Website navigation
“Read more” links

🔘 Button Tag

- <button> tag is used to create a clickable button.

html

<button>Click Me</button>

👉 Where it is used:

Contact button
Buy Now button
Submit button

Right now, it will just look like a simple button. Later, with CSS and JavaScript, we can make it more interactive.

💻 Final Example (All Tags Together)

Now let’s combine everything and build a simple webpage:

<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>

    <h1>AngadTechAcademy</h1>
    <h2>About Me</h2>

    <p>Hello, I am learning HTML and building my first webpage.</p>

    <img src="img/angad.jpg"  alt="my image" width="200">
     <br><br>

    <a href="https://instagram.com" target="_blank">My Instagram</a>
    <br><br>

     <a href="contact.html"></a>
    <button>Contact Me</button></a>
 
</a>

</body>
</html>

THIS IS MAIN FILE tags.html

Important note:

1) Keep the image in your project folder

Create a folder named img in the same location as your HTML file
Put your image inside that folder (for example: angad.jpg)

2) Otherwise Use an online image

Local path (D:...) ❌ → Won’t work in browser

Relative path (img/angad.jpg) ✅ → Correct way

Online link ✅ → Also works

3) ✅ Make the button a link


<a href="contact.html">
    <button>Contact Me</button>
</a>

👉 When you click the Contact Me button, it will open the contact.html page.

 - It should be in the same folder as your main HTML file

4) Contact.html file code

👉 When you click the Go Back button, it will open the index.html page.

- It should be in the same folder as your main HTML file


 5) index.html file code

📌 Example folder structure

👉 What this page shows(OUTPUT):

For Executing this file u can right click on tags.html file and click open with live server (Note: Make sure Live Server will be installed)

Imp- for live server installation check my youtube video on my youtube channel (live server installation guide) or also check my another blog on this website (live server setup guide.)

1) tags.html file output

2)contact.html file output when you click on Contact Me Button

3)index.html file output when you click on Go Back Button

🎯 Conclusion

You don’t need many tags to start building websites.

With just these basic HTML tags, you can already create real pages.

The key is to practice and try things yourself.

💡 Tip for Beginners

Try these small changes:

Change the name and text
Add your own image
Put your Instagram link

The more you practice, the more confident you will become.

Happy Coding 🚀

Full Video available on youtube:

Search This Blog

Angad Tech Academy