HTML tags are the basic instructions used to organize content inside an HTML document. They tell the browser what a particular piece of content represents, such as a heading, paragraph, link, image, list, or section.
When a browser loads an HTML file, it interprets the markup and builds the webpage structure from the elements defined in the document. Understanding how tags work is therefore one of the first concepts a beginner should learn before moving to CSS, JavaScript, or frontend frameworks.
In this guide, we will focus on the structure and classification of HTML tags, how opening and closing tags work, what void elements are, how tags differ from elements, and how to choose appropriate HTML tags while creating webpages.
An HTML tag is markup written using angle brackets. The tag name identifies the type of content or structure that the browser should interpret.
For example, the following markup creates a paragraph:
<p>HTML is used to structure webpage content.</p>
Here, <p> identifies the content as a paragraph. The browser uses this information when constructing the webpage.
HTML tags are not programming instructions in the same sense as statements in languages such as C, Java, or Python. They are part of a markup language used to describe the structure and meaning of content.
A typical HTML element is written using an opening tag, some content, and a closing tag.
<tagname>Content</tagname>
For example:
<h1>Welcome to CSE Gyan</h1>
The markup contains three important parts:
The closing tag contains a forward slash before the tag name. It indicates where the element's content ends.
The terms tag and element are often used interchangeably in beginner tutorials, but technically they are not exactly the same.
| HTML Tag | HTML Element |
|---|---|
A markup component such as <p>.
|
The complete structure, including the tags and their content. |
Example: <p>
|
Example: <p>Hello</p>
|
| Represents markup syntax. | Represents a complete part of the document structure. |
Therefore, <p> is a tag, while <p>Hello</p> represents a paragraph element.
Many HTML elements use two tags: an opening tag and a closing tag. These are commonly called paired tags because the content is placed between the two tags.
<h2>HTML Tutorial</h2>
In this example, <h2> starts the heading and </h2> marks its end.
| Tag | Typical Use |
|---|---|
<html>...</html> |
Root of the HTML document |
<head>...</head> |
Document metadata and resources |
<body>...</body> |
Document content |
<p>...</p> |
Paragraph content |
<h1>...</h1> |
Main heading |
<a>...</a> |
Hyperlink |
Some HTML elements do not contain content and therefore do not use a separate closing tag. These are known as void elements.
A void element represents a complete piece of markup by itself. Examples include elements used for line breaks, images, metadata, and form controls.
| Element | Purpose |
|---|---|
<br> |
Inserts a line break. |
<hr> |
Represents a thematic break. |
<img> |
Embeds an image. |
<input> |
Creates a form input control. |
<meta> |
Provides metadata about the document. |
<link> |
Connects the document to an external resource. |
<p>First line<br>Second line</p>
The <br> element creates a line break between the two pieces of text.
The term void element is more precise than the older expression "unpaired tag" because these elements do not contain child content.
HTML elements can be placed inside other elements. This is called nesting.
<div>
<h2>HTML Tags</h2>
<p>Learn the fundamentals of HTML markup.</p>
</div>
In this example, the heading and paragraph are nested inside the <div> element.
Correct nesting is important because it keeps the document structure predictable and easier for browsers, developers, assistive technologies, and other tools to interpret.
When elements are nested, their opening and closing tags should follow the correct order.
<p>
This is <strong>important</strong> information.
</p>
<p>
This is <strong>important</p></strong>
In the incorrect example, the elements are closed in the wrong order. The <strong> element should be closed before the surrounding paragraph is closed.
HTML tags can be accompanied by attributes that provide additional information about an element. Attributes are normally written inside the opening tag.
<a href="about.html">About Us</a>
Here, href is an attribute of the anchor element. It specifies the destination of the link.
Another example is the image element:
<img src="logo.png" alt="CSE Gyan Logo">
In this markup, src identifies the image resource and alt provides alternative text.
Attributes are covered in greater detail on the dedicated HTML Attributes page.
HTML tag names are generally written using lowercase letters because lowercase markup is the conventional and recommended style for modern HTML documents.
<p>Hello World</p>
Using lowercase tag names makes the source code consistent and easier to read. It also follows the style commonly used in modern HTML examples and development tools.
HTML contains many elements, and they can be grouped according to the role they perform. These classifications are useful for learning, although they are not all formal HTML specification categories.
| Category | Examples | Purpose |
|---|---|---|
| Document Structure | <html>, <head>, <body> |
Defines the basic document structure. |
| Text Content | <p>, <h1>, <strong> |
Represents text and its meaning. |
| Navigation | <a>, <nav> |
Creates and organizes navigation. |
| Grouping | <div>, <section> |
Groups related content. |
| Media | <img>, <audio>, <video> |
Embeds or presents media. |
| Forms | <form>, <input>, <button> |
Collects user input. |
| Tables | <table>, <tr>, <td> |
Represents tabular information. |
| Semantic Structure | <header>, <main>, <article> |
Describes the purpose of page sections. |
HTML provides several elements for representing headings, paragraphs, emphasis, quotations, and other types of text.
| Tag | Purpose |
|---|---|
<h1> to <h6> |
Represent headings at different levels. |
<p> |
Represents a paragraph. |
<strong> |
Indicates strong importance. |
<em> |
Indicates emphasis. |
<mark> |
Highlights text for a particular purpose. |
<small> |
Represents side comments or small print. |
For example:
<p> Learning <strong>HTML</strong> is important for web development. </p>
Semantic elements describe the role of their content. Instead of simply creating a generic container, a semantic element communicates what that part of the document represents.
| Element | Typical Role |
|---|---|
<header> |
Introductory content for a page or section. |
<nav> |
A group of navigation links. |
<main> |
The primary content of the document. |
<section> |
A thematic grouping of content. |
<article> |
Self-contained content that can stand on its own. |
<aside> |
Related or supplementary content. |
<footer> |
Footer information for a page or section. |
<header>
<h1>CSE Gyan</h1>
</header>
<main>
<article>
<h2>HTML Tutorial</h2>
<p>Learn HTML step by step.</p>
</article>
</main>
<footer>
<p>Educational Resources</p>
</footer>
Semantic markup makes the purpose of different areas clearer and can improve maintainability, accessibility, and document understanding.
HTML elements are also commonly discussed according to how they participate in the normal flow of a webpage.
A block-level element traditionally begins on a new line and can occupy the available width of its containing area. Examples include:
<div><p><h1> to <h6><section><article>Inline elements generally participate within the current line of text rather than automatically creating a new block. Examples include:
<a><span><strong><em>Modern HTML and CSS provide more flexible layout behavior than this simple classification suggests, so the exact visual behavior of an element can also be changed using CSS.
The <div> and <span> elements are generic containers. They are useful when no more meaningful semantic element is appropriate.
<div>
<h2>Student Information</h2>
<p>This section contains student details.</p>
</div>
<p> Learn <span>HTML</span> step by step. </p>
The main difference is that <div> is commonly used as a generic block container, while <span> is commonly used for a smaller piece of inline content.
Whenever a semantic element accurately describes the content, it is usually better to use that element instead of adding unnecessary generic containers.
HTML comments allow developers to place notes in source code without displaying those notes as normal webpage content.
<!-- This is an HTML comment -->
Comments are useful for explaining sections of code, leaving development notes, or temporarily documenting markup.
Comments should not be used to store passwords, private information, API keys, or other sensitive data because the HTML source may be accessible to users.
The following example demonstrates how several different elements can work together in a small HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Tags Example</title>
</head>
<body>
<header>
<h1>CSE Gyan</h1>
</header>
<main>
<section>
<h2>Learn HTML</h2>
<p>
HTML provides the structure of a webpage.
</p>
<a href="html-attributes.php">
Learn HTML Attributes
</a>
</section>
</main>
<footer>
<p>CSE Gyan Educational Resources</p>
</footer>
</body>
</html>
This example demonstrates document structure, headings, paragraphs, links, semantic elements, metadata, and normal HTML nesting without mixing unrelated styling or scripting into the example.
When an HTML document is opened, the browser reads its markup and constructs a document tree commonly represented as the DOM (Document Object Model).
For example:
<body>
<h1>HTML Tags</h1>
<p>Learn HTML basics.</p>
</body>
The browser identifies the <body> as a parent element and the heading and paragraph as elements contained within it.
CSS can then control the visual presentation of these elements, while JavaScript can interact with the document and modify its content or behavior.
Beginners often make structural mistakes while learning HTML. Most of these can be avoided by understanding how elements are opened, nested, and closed.
alt text for meaningful images.
An HTML tag is markup written inside angle brackets that identifies how a part of an HTML document should be interpreted.
A tag is a piece of markup such as <p>. An element generally refers to the complete structure, such as <p>Hello</p>.
Paired tags are elements that normally use an opening tag and a closing tag, with content placed between them.
A void element is an HTML element that does not contain child content and therefore does not have a separate closing tag. Examples include <img>, <br>, and <input>.
Semantic HTML gives meaningful structure to content. It can make source code easier to maintain and can help browsers, assistive technologies, and search engines understand the role of different sections.
HTML should primarily describe the structure and meaning of content. CSS should normally be used to control colors, spacing, fonts, borders, and other visual presentation.
Nesting means placing one HTML element inside another element. The elements should be closed in the correct order to maintain a valid structure.
HTML tags form the markup foundation of webpages. They identify different types of content and help the browser construct the document structure.
A good understanding of opening and closing tags, void elements, nesting, attributes, semantic elements, and common HTML classifications makes it easier to write clean and maintainable webpages.
Beginners should first become comfortable with the purpose of commonly used elements and then learn specialized HTML topics such as attributes, links, images, lists, tables, forms, and multimedia separately.