HTML Tags Every Beginner Should Know

HTML (HyperText Markup Language) is the foundation of every webpage you see on the internet. It uses a set of codes called tags to structure content such as text, images, videos, and links. If you’re new to HTML, this guide will walk you through the most essential HTML tags, their types, how they work, and provide clear code examples so you can start building simple websites today.

📌 What Are the Tags in HTML?

Tags in HTML define elements on a webpage. Each tag tells the browser how to display the content inside it. For example:

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

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

The above code uses the <p> tag to mark a paragraph. Tags usually come in pairs—an opening tag and a closing tag, except in the case of empty or void elements.

🔍 HTML Opening and Closing Tags

Every HTML element begins with an opening tag and ends with a closing tag, which includes a forward slash (/) before the tag name.

<b>This is bold text</b>

<b>This is bold text</b>

Here, <b> is the opening tag and </b> is the end tag in HTML.

🔸 How many tags are in a regular element?
Typically, a regular HTML element has two tags—an opening and a closing tag.

🔗 HTML Tags Classification: Container vs. Empty Tags

There are two different types of tags:

1. Container Tags – Have both opening and closing tags.
Example:

<div>This is a container tag</div>

<div>This is a container tag</div>

2. Empty Tags – Also called void elements, do not have closing tags.
Example:

<br> <!-- Breaks the line -->
<img src="image.jpg" alt="An image">

<br> <!-- Breaks the line -->
<img src="image.jpg" alt="An image">

💡 Examples of empty elements in HTML include: <br>, <hr>, <img>, <meta>, and <input>.

📃 HTML Tag List for Beginners

Here’s a basic HTML cheat sheet every beginner should save:

💬 What Character Is Used to Indicate an End Tag?

A forward slash / is used to indicate an end tag in HTML.

</p> <!-- Closing a paragraph tag -->

</p> <!-- Closing a paragraph tag -->

🖼️ Which HTML Tag Designates Links to Other Web Pages?

The <a> tag is used for hyperlinks.

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

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

Use the href attribute to reference another value or URL.

🔠 Is HTML Case Sensitive?

No, HTML is not case-sensitive. <DIV> and <div> are treated the same. However, best practices and HTML5 recommend lowercase for consistency.

⚠️ Remember: While HTML5 is not case sensitive, JavaScript and CSS are.

🧱 Container Tag in HTML Example

<div class="container">
  <p>Put your HTML text here.</p>
</div>

<div class="container">
  <p>Put your HTML text here.</p>
</div>

In this example, <div> is the container tag, and it wraps other elements inside it.

🔖 The <code> Tag in HTML

The <code> tag is used to display programming code:

<pre><code>let x = 10;
console.log(x);</code></pre>

<pre><code>let x = 10;
console.log(x);</code></pre>

This will preserve the formatting and highlight it as code in the browser.

🧾 How to Use the <a> Tag Properly

To create a link to another webpage:

<a href="https://www.wikipedia.org">Go to Wikipedia</a>

<a href="https://www.wikipedia.org">Go to Wikipedia</a>

You can also use it to reference internal page anchors or files.

📂 How to Read an HTML File

If you’re wondering how to read an HTML file, you can open it in any browser by double-clicking the .html file or using a code editor like VS Code, Sublime, or Notepad++.

📄 What Element Needs to Be Added to Complete This Paragraph?

Often, you may forget to close the <p> tag. Here’s how to complete it:

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

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

📚 Common HTML Questions