Can I use multiple tags on one page?

You can technically use multiple tags, but it's best practice to use only one per page. The should represent the main topic, while other headings like and define subsections. This improves SEO and accessibility.

What is the difference between and ?

is a block-level element used to group larger content sections, like paragraphs or forms. is an inline element used to style or highlight small parts of text. Use them based on layout and styling needs.

Common HTML Tags

Published: 6 Jul 2025

HTML tags are the building blocks of web pages. They tell the browser how to display content like text, images, links, and more. Whether you’re new to web development or just brushing up your skills, understanding these common tags is essential.

In this article, we’ll explore 10 of the most commonly used HTML tags, each explained with easy-to-follow code examples to help you learn quickly.

Table of Content

<html> – Root of the Document
<head> – Metadata Section
<title> – Browser Tab Title
<body> – Visible Page Content
<h1> to <h6> – Headings
<p> – Paragraph
<a> – Anchor / Hyperlink
<img> – Image Element
<ul>, <ol>, <li> – Lists
<div> – Content Container
Conclusion
FAQs

1. <html> – Root of the Document

The <html> tag wraps the entire HTML document. Everything you write for the web page goes inside this tag.

html

CopyEdit

<!DOCTYPE html>

<html>

<head>

<title>Sample Page</title>

</head>

<body>

<h1>Hello, World!</h1>

</body>

</html>

2. <head> – Metadata Section

The <head> tag contains meta-information like title, character encoding, and linked files (CSS, JS).

html

CopyEdit

<head>

</head>

3. <title> – Browser Tab Title

Sets the title of the page that appears in the browser tab and search engine results.

html

CopyEdit

<title>Welcome to My Website</title>

4. <body> – Visible Page Content

Holds all the visible content displayed to users, such as text, links, and images.

html

CopyEdit

<body>

<h1>This is a Heading</h1>

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

</body>

5. <h1> to <h6> – Headings

Defines headings. <h1> is the main title; <h6> is the smallest subheading.

html

CopyEdit

<h1>Main Title</h1>

<h2>Subheading</h2>

<h3>Section Title</h3>

6. <p> – Paragraph

Used for adding blocks of text as paragraphs.

html

CopyEdit

<p>This is a simple paragraph explaining something important.</p>

7. <a> – Anchor / Hyperlink

Creates a clickable link to another page or website.

html

CopyEdit

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

8. <img> – Image Element

Displays an image. Requires src for image path and alt for description.

html

CopyEdit

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

Creates ordered and unordered lists.

Unordered List:

html

CopyEdit

<ul>

<li>JavaScript</li>

</ul>

Ordered List:

html

CopyEdit

<ol>

<li>Login</li>

<li>Select Product</li>

<li>Checkout</li>

</ol>

10. <div> – Content Container

Acts as a block-level container for other HTML elements. Useful for layout and styling.

html

CopyEdit

<h2>Product</h2>

<p>This is a product description.</p>

</div>

Conclusion

These 10 HTML tags are the foundation of every webpage. Whether you’re building a personal blog or starting a full-stack project, understanding how these elements work will set you on the right path in web development.

FAQs

Below are some of the most common queries about HTML tags—answered in a clear and simple way.

What are HTML tags used for?

HTML tags are used to define the structure and content of a webpage. They tell the browser how to display text, images, links, and other elements. Every webpage is built using these tags.

Which HTML tag is most commonly used?

The <p> tag is one of the most widely used HTML tags. It is used to create paragraphs and structure text content. Most web pages use this tag multiple times for organizing information.

Are HTML tags case-sensitive?

No, HTML tags are not case-sensitive, which means <BODY> and <body> are treated the same. However, it is a good practice to write all tags in lowercase. This keeps your code clean and easier to maintain.

Can I use multiple <h1> tags on one page?

You can technically use multiple <h1> tags, but it’s best practice to use only one per page. The <h1> should represent the main topic, while other headings like <h2> and <h3> define subsections. This improves SEO and accessibility.

What is the difference between <div> and <span>?

<div> is a block-level element used to group larger content sections, like paragraphs or forms. <span> is an inline element used to style or highlight small parts of text. Use them based on layout and styling needs.

What is the purpose of the <head> tag in HTML?

The <head> tag contains meta-information about the page such as its title, charset, linked CSS, and SEO data. It’s not visible to users but is essential for browsers and search engines to understand your site.

How do I add an image using HTML?

You use the <img> tag with the src attribute to specify the image file path. The alt attribute provides alternative text for accessibility and SEO. Example: <img src=”image.jpg” alt=”Description”>

What does the <a> tag do?

The <a> tag creates a clickable hyperlink that connects one page to another. You define the URL using the href attribute. It’s commonly used for menus, navigation, and external links.

What’s the difference between ordered and unordered lists in HTML?

An <ol> tag creates a numbered list (1, 2, 3), while <ul> creates a bulleted list. Both use <li> tags to define list items. These help organize content in a readable format.

Why is the <html> tag important?

The <html> tag is the root element of an HTML document. It wraps all the content and tells the browser that the page should be rendered as HTML. Without it, the browser might not understand the code properly.