Learning HTML is the first step to understanding how websites work. It looks intimidating at first, but once you understand the basic structure, HTML becomes one of the easiest languages to learn. The entire web is built on simple building blocks called tags, and once you know the core ones, everything else makes sense.
This guide will walk you through the most important HTML tags every beginner must understand — and how to use them correctly.
What Are HTML Tags?
HTML tags tell the browser how to structure the content of a webpage.
A tag usually comes in pairs:
<tagname> Content </tagname>
The first tag opens the element.
The second tag closes it.
Some tags are self-closing, which means they don’t need an end tag.
You’ll see examples of both below.
1. The <h1> Tag — Headings
Headings are essential for organizing your page. Search engines also use headings to understand your content, so learning them early helps with SEO.
Example:
<h1>My First Website</h1>
Tip:
Use only one <h1> per page — it’s the main title.
Use <h2> to <h6> for subtitles and sections.
2. The <p> Tag — Paragraphs
Paragraphs structure your text in readable blocks.
Example:
<p>This is a paragraph of text on my webpage.</p>
This is the most common HTML tag after headings. It’s used everywhere.
3. The <img> Tag — Images
The image tag is a self-closing tag. You must include the src attribute to tell the browser where the image is.
Example:
<img src="photo.jpg" alt="A description of the photo">
src= file locationalt= text shown if image fails and used for accessibility
Never skip the alt attribute — it’s important for screen readers and SEO.
4. The <a> Tag — Links
Links connect your webpage to other pages.
The href attribute tells the browser where to go.
Example:
<a href="https://example.com">Visit Example</a>
You can link to websites, pages, files, or even specific sections.
5. The <div> Tag — Containers
A <div> groups elements together.
It doesn’t change appearance by itself, but it’s used for organizing layout.
Example:
<div>
<p>A paragraph inside a div.</p>
</div>
Once you add CSS later, <div> elements become powerful layout tools.
6. The <br> Tag — Line Break
This is a self-closing tag that forces a line break.
Example:
Hello<br>World
Use it sparingly — paragraphs are usually better.
Putting It All Together
Here’s a small snippet that uses all the basic tags:
<h1>My First Webpage</h1>
<p>Welcome to my page! This is my first paragraph.</p>
<img src="cat.jpg" alt="My cat">
<a href="https://google.com">Search on Google</a>
<div>
<p>This paragraph is inside a div container.</p>
</div>
These simple tags form the foundation of HTML. Everything more advanced is built on top of this.
Why These Tags Matter
Because they teach you:
- Structure
- Semantics
- How browsers read content
- How styling will work later when you add CSS
- How every page on the internet is organized
Once you master these tags, you can confidently build real webpages.
Save This (Key Takeaways)
<h1>→ main heading<p>→ text paragraphs<img>→ images (self-closing)<a>→ links to pages<div>→ containers<br>→ line break
Learn these, and you know enough HTML to build your first real page.
Premium HTML Template Pack
Today’s premium content includes a downloadable HTML starter template pack with clean structure, comments, and ready-to-edit sections.
Find it inside the GoldenEgg Advent Calendar.
Leave a Reply