Essential HTML Tags Explained with Examples | Beginner Guide (Taj Mahal Project)



Introduction 

When we start learning web development, the very first step we take is understanding HTML (HyperText Markup Language). HTML is the backbone of every website, and without it, we cannot structure our web pages properly.

In this beginner-friendly guide, we will explore the most essential HTML tags using simple examples. To make it more practical, we will connect everything to a mini project — “About Taj Mahal” webpage — so that we learn not just theory, but also how to apply it in real-world projects.


Why Should We Learn HTML Tags?

Before jumping into the tags, let’s understand why they are important.

  • They help us structure content on a webpage
  • They improve readability and SEO
  • They allow us to add images, text, and lists
  • They form the base for CSS styling and JavaScript functionality

When we build a project like an About Taj Mahal webpage, these tags help us organize information in a clean and user-friendly way.


HTML Tags Required for Our “About Taj Mahal” Project

Let’s now explore the most important HTML tags every beginner should know.


1. Ordered List in HTML

We use the <ol> tag when we want to display a numbered list.

Key Points:

  • It creates an ordered (numbered) list
  • Uses <li> for list items
  • Supports different numbering styles
Syntax:

<ol type="1">
  <li>Item</li>
</ol>

Example:

<ol type="a">
  <li>Apple</li>
  <li>Mango</li>
  <li>Grapes</li>
</ol>

2. Unordered List in HTML

We use the <ul> tag to create a bulleted list.

Key Points:
  • Displays items with bullets
  • Uses <li> for items
  • Supports styles like circle, square, and disc
Example:

<ul type="square">
  <li>Apple</li>
  <li>Mango</li>
  <li>Grapes</li>
</ul>

Using CSS:

list-style-type: circle;
list-style-image: url(path);

In our Taj Mahal project, we can use this to show keypoints about Taj Mahal.


Attributes of <ol> and <ul>

  • type → Changes numbering style (a, A, i, I)
  • start → Starts list from a specific number (<ol start="5">)
  • reversed → Displays list in reverse order
These attributes give us flexibility in designing lists.


3. Paragraph Tag in HTML

The <p> tag is used to define a paragraph.

Key Points:

  • It is a block-level element
  • Automatically adds spacing
Example:

<p>Welcome to our Taj Mahal webpage.</p>


In our project, we will use paragraphs to describe history of the Taj Mahal.


4. Italic Text in HTML

We use the <i> tag to display text in italic format.

Key Points:

  • Used for emphasis
  • Makes content visually appealing
Example:

<i>This is italic text</i>

 We can use this for quotes or special highlights in our webpage.

5. Image Tag in HTML

The <img> tag helps us display images on a webpage.

Key Points:

  • It is a self-closing tag
  • Adds visual content

Important Attributes:

  • src → Image path
  • alt → Alternative text (important for SEO)
  • title → Tooltip text
  • width & height → Size
Example:

<img src="tajmahal.jpg" alt="Taj Mahal monument in India" width="300px" height="200px" title="Taj Mahal" />

In our project, this is one of the most important tags because we will display Taj Mahal image.


6. Heading Tags in HTML

Headings define titles and structure of content.

Key Points:
  • <h1> is the most important
  • <h6> is the least important
  • Helps in SEO ranking
Example:

<h1>Taj Mahal</h1>
<h2>History</h2>
<h3>Architecture</h3>

Proper use of headings improves both user experience and search engine visibility.

7. Line Break Tag in HTML

The <br> tag is used to break a line.

Key Points:

  • Moves content to next line
  • Self-closing tag
Example:

Hello <br/> Welcome

Useful when we want to control spacing manually.


8. Bold Tag in HTML

The <b> tag is used to display bold text.

Example:

<b>This is bold text</b>

We can use this to highlight important keywords or headings.

Full Practice Example of All HTML Tags

Now, let’s combine everything into one simple example:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Topic example code</title>
  </head>
  <style>
    ul {
      list-style: none;
      list-style-image: url("../assets/list-image.png");
    }
  </style>
  <body>
    <ol type="a">
      <li>Apple</li>
      <li>Mango</li>
      <li>Grapes</li>
    </ol>
    <ul>
      <li>Apple</li>
      <li>Mango</li>
      <li>Grapes</li>
    </ul>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Ea laudantium
      sapiente temporibus, voluptates fugiat voluptate. Expedita similique,
      voluptates iusto magni odit recusandae dignissimos molestiae doloremque
      quo nihil velit? Minus, eum?
    </p>
   <i>Welcome to our web site</i> <br/>
   <img src="./photo.jpeg" width="100px" height="100px" alt="topic image"/>

   <div>
    <h1>Heading 1</h1>
    <h2>Heading 2</h2>
    <h3>Heading 3</h3>
    <h4>Heading 4</h4>
    <h5>Heading 5</h5>
    <h6>Heading 6</h6>
   </div>

   <b>This is bold text</b>
  </body>
</html>

Output 

When we run this code in a browser, we will see:

  • A structured webpage
  • Headings and lists
  • Paragraph content
  • Image display
  • Styled text

This is how we start building real-world projects using HTML.






Conclusion

In this article, we explored the most essential HTML tags that every beginner must learn. By understanding these tags, we are taking the first step toward building professional websites.

Instead of just learning theory, we also connected everything to a real-world Taj Mahal project, which helps us understand how HTML works practically.


📚 Explore Full Series

Continue learning step by step from our complete roadmap click the link below:
👉 HTML & CSS Learning Series


What’s Coming Up Next?

In the next part of this HTML & CSS series, we will build a complete “About Taj Mahal” webpage from scratch.

We will:

  • Structure the full webpage
  • Apply CSS styling
  • Create a clean and modern layout

Stay tuned, because this is where our learning becomes even more exciting 🚀


Follow for More

If you’re interested in learning HTML, CSS, React, and MERN Stack,

stay connected for more beginner-friendly tutorials and real-world projects.


Comments

Post a Comment

Popular posts from this blog

Complete HTML Layout Tutorial for Beginners (With Examples & Explanation)

Image
Introduction to HTML Layout If you are starting your web development journey, understanding the HTML layout structure is the first and most important step. Every website you see on the internet is built using HTML as its foundation, and learning how the layout works will help you build structured and professional web pages. HTML layout defines how content is arranged on a webpage. It helps developers organize text, images, links, and other elements in a meaningful way so that users can easily navigate and understand the content. In this tutorial, we will learn: What HTML is Basic HTML structure Explanation of each element Important meta tags What is HTML? HTML (Hyper Text Markup Language) is the standard language used to create web pages. It provides the basic structure of a website, which is then styled using CSS and made interactive using JavaScript. 🔹 HyperText HyperText refers to text that contains links. These links allow users to move from one webpage to another or nav...
Read more

HTML Tags and Attributes Explained (Beginner Guide with Form Examples)

Image
Introduction to HTML Tags and Attributes If you are starting your journey in web development, understanding HTML tags and attributes is the first and most important step. These are the core building blocks of every webpage, especially when creating forms like registration forms, login forms, and signup forms. Every website you see on the internet is made using HTML elements, and tags are used to define those elements. Attributes enhance those elements by providing additional functionality and information. Without understanding tags and attributes, it becomes difficult to build structured and interactive web pages. In this tutorial, we will learn: What HTML tags are What HTML attributes are Types of HTML tags Essential HTML tags used in forms What Is an HTML Tag? An HTML tag is a keyword enclosed in angle brackets ( < > ) used to define the structure and content of a webpage. Tags tell the browser how to display content such as headings, paragraphs, images, links, and mo...
Read more

Most Commonly Used HTML Tags (Beginner-Friendly Guide)

Image
HTML (HyperText Markup Language) is the foundation of every website we see on the internet. Whether we are building a simple webpage or a complex web application, HTML is the starting point that helps us structure content effectively. In this article, we will explore the most commonly used HTML tags, understand how they work, and learn the difference between block-level elements and inline elements. This guide is designed especially for beginners who want to build a strong foundation in web development. By learning these essential concepts, we can improve our coding skills, write cleaner and more organized code, and create well-structured, professional-looking web pages. It also helps us understand how browsers render content and how different elements behave in real-world projects. Why Should We Learn HTML Tags? Before diving into the types of elements, let’s understand why learning HTML tags is important. When we understand HTML properly: We can create well-structured web pages ...
Read more