Simplifying HTML: 10 Key Tags Explained

Published by

Kriti Ranjan

on

June 20, 2025

Hey fellow coders! 👩‍💻
If you’re just getting started with web development, HTML might feel like alphabet soup. But some tags? You’ll see them pop up again and again — like that one friend who shows up to every party with snacks 🍿.

So today, I’m breaking down the top 10 HTML tags I’ve used most — and more importantly, where they show up in real-world websites.

Let’s go! 🚀

1. `<a>` — The Link Tag 🔗

What it does: Creates hyperlinks.
Use-case: Navigating from one page to another.

💡 Real Example:
When you click “Buy Now” on Amazon or “Sign Up” on a blog — that’s the <a> tag doing its thing!

<a href="https://codewithkriti.wordpress.com">Visit my blog</a>

2. `<img>` — The Image Tag 🖼️

What it does: Displays images.
Use-case: Product images, profile pictures, blog thumbnails.

💡 Real Example:
Every image on Pinterest or in a recipe blog — yup, you’re looking at <img>.

<img src="kriti-coding.png" alt="Kriti coding at her desk">

3. `<p>` — Paragraph Tag ✍️

What it does: Adds body text.
Use-case: Articles, descriptions, about sections — basically any text that’s not a heading or a button.

💡 Real Example:
The main content on news websites like BBC or blog posts (like this one!) use tons of <p>.

<p>I’m learning to build websites — one tag at a time!</p>

4. `<h1>` to `<h6>` — Heading Tags 📰

What it does: Defines titles and subheadings.
Use-case: SEO, structure, hierarchy of content.

💡 Real Example:
The big bold title at the top of any web page? That’s usually an <h1>. Smaller subheadings? <h2> and so on.

<h1>Welcome to Code With Kriti</h1>
<h2>Today’s Topic: HTML Tags</h2>

5. `<div>` — The Container Tag 📦

What it does: A box to hold other elements.
Use-case: Layout, grouping content, organizing sections.

💡 Real Example:
Ever seen those card-style sections on Netflix’s homepage? Each of those is wrapped in a <div>.

<div class="card">
  <img src="card.jpg">
  <p>This is inside a card!</p>
</div>

6. `<span>` — The Inline Wrapper 🎨

What it does: Wraps small pieces of text or elements without breaking layout.
Use-case: Styling a word or phrase inside a sentence.

💡 Real Example:
Highlighting keywords in an article or changing one word’s color.

<p>I’m learning <span style="color: blue;">HTML</span> every day.</p>

7. `<ul>`, `<ol>`, and `<li>` — List Tags 📋

What it does: Makes lists (unordered or ordered).
Use-case: To-do lists, feature sections, menus.

💡 Real Example:
Bullet points on Notion or a recipe step list on a cooking blog.

<ul>
  <li>Practice daily</li>
  <li>Fix bugs</li>
  <li>Celebrate small wins</li>
</ul>

8. `<form>` — The Interaction Tag 🧾

What it does: Collects user input.
Use-case: Contact forms, login/signup pages, surveys.

💡 Real Example:
Newsletter popups, feedback forms — all built with <form>.

<form action="/submit">
  <input type="text" placeholder="Your Name">
  <button type="submit">Send</button>
</form>

9. `<input>` — The Field Tag ✍️

What it does: Input fields inside forms.
Use-case: Text boxes, radio buttons, checkboxes, email fields.

💡 Real Example:
That little box you type your name into while placing an order? That’s <input>.

<input type="email" placeholder="Enter your email" required>

10. `<button>` — The Action Tag 🖱️

What it does: Creates clickable buttons.
Use-case: Submitting forms, triggering actions, CTA buttons.

💡 Real Example:
“Add to Cart,” “Submit,” “Load More” — these are all <button> elements.

<button type="submit">Subscribe</button>

So next time you click a link, fill out a form, or scroll through a list — just remember, it all started with some good old-fashioned HTML. 💻❤️

✨ Wrapping It Up!

Learning HTML isn’t just about memorizing syntax — it’s about understanding how those tags show up in real life.

These are the tags I see (and use) every single day — whether I’m blogging, building, or just viewing websites more critically.

CodeWithKriti