Top Must Know Tags for Beginners

Introduction

So now you’ve made it past the “What is HTML?” phase. That was the warm-up. In the first article, we saw how HTML is the structure of a webpage.

Now that you know how an HTML page is built, it’s time to get your hands with the actual tags that you’ll be using 99% of the time while building websites.

Most people get confused thinking they need to learn 100s of tags to start but honestly, you just need these 7 essential tags in the beginning.

Let’s get started.

Table of Contents

1. <p>– Paragraph

2. <h1> to <h6> – Headings

3. <a> – Anchor (Links)

4. <img> – Image

5. <div> – Division / Container

6. <ul>, <ol>, <li> – Lists

7. <span> – Inline Element

Bonus: What’s Next?

1 ) <p> – Paragraph

This is the most basic tag. Whenever you want to write some text on the screen, just wrap it in a paragraph tag.

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

You’ll use this everywhere for descriptions, instructions, bio, whatever.

2 ) <h1> to <h6> – Headings

Headings are like titles or section names.
<h1> is the biggest one (main title), and <h6> is the smallest.

<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>

Tip: Use only one <h1> per page. After that, you can use <h2>, <h3>, and so on for structure.

3 ) <a> – Anchor (for Links)

Wanna add a link to another website or page? Use the anchor tag.

<a href="https://google.com" target="_blank">Go to Google</a>

href="": This is where your link goes.

⚠️We should use targets when we want to open links in new tabs instead of our main tab.

target="_blank": This opens the link in a new tab (optional, but useful).

4 ) <img> – Image

Want to show your photo, or your school logo? Use this.

<img src="myphoto.jpg" alt="My Profile Photo" width="200">

• src: Link or path of the image file.

• alt: Very important. Describe the image for accessibility or when image doesn’t load.

• width: Optional, to resize your image.

📌 Pro Tip: Always add alt text. Google and screen readers love it.

5 ) <div> – Division

This is like a box or container. Helps you group content together.

<div class="card">
  <h2>My Profile</h2>
  <p>This is my bio inside a div.</p>
</div>

It doesn’t show anything fancy by default, but it’s super useful when we start adding CSS (styling) later.

6 ) <ul>, <ol>, <li> – Lists

Unordered List (bullets):

<ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
</ul>

Ordered List (numbers):

<ol>
  <li>Step One</li>
  <li>Step Two</li>
  <li>Step Three</li>
</ol>

7 ) <span> – Inline Element

This one is kind of like <div> but for inline text. Use it when you want to style part of a sentence.

<p>This is <span style="color:red;">red text</span> inside a sentence.</p>

It won’t break lines like <div>, it just highlights the part you wrap it around.

Common Mistakes Beginners Make

Final Thoughts

You don’t need to learn all the tags at once. These 7 tags will get you started with 80% to 90% of your HTML journey. Once you use them, they’ll become super easy.

👇 What’s Next?

Now that you know the most used tags, the next step is learning how to take input from users.

See you in the next article. We’ll build our first form!