For working professionals
For fresh graduates
Study abroad
More

HTML Tags you should know in 2025: Types & Functions

Updated on 07/04/2025513 Views

Table of Content

Did you know? Approximately 97.6% of websites use HTML5 as their markup language, making it the dominant standard for modern web development!

HTML tags are the building blocks of web pages, defining structure and helping browsers render content properly. But if you're new to web development, the sheer number of HTML tags can be overwhelming.

In this article, we’ll break down an easy-to-follow HTML tags list, covering both basic HTML tags and advanced options. By the end, you'll know exactly when and how to use these tags to create well-structured, effective web pages.

HTML Tags Explained

HTML tags are essential for turning raw content into a structured, readable web page. Whether you're adding text, images, or links, these tags tell the browser how to organize and display your content.

Let's explore the structure and importance of HTML tags in detail.

What is HTML?

HTML (Hypertext Markup Language) is the standard language used for creating and structuring content on the web. It acts as a set of instructions that tells a web browser how to display text, images, links, and other elements.

Think of HTML as the blueprint for a webpage, providing the structure and layout needed for everything to appear correctly.

Building and structuring web content can feel overwhelming without a solid foundation. Check out the Software Engineering Courses by upGrad to help you gain expertise in building web pages and beyond. Start learning today!

Basic HTML Document Structure

Every HTML document follows a basic structure that ensures it functions properly in a browser.

Let’s look at the core elements:

<!DOCTYPE html>: This tag tells the browser that the document is written in HTML5.
<html>: The root element of your HTML document, which contains all other HTML tags.
<head>: This section contains meta-information about the page, such as the title, link to stylesheets, and scripts.
<body>: This section contains the content of the page—the text, images, and links that users see when they visit your website.

Here’s an example of the basic structure:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text.</p>
  </body>
</html>

Output:

This simple structure forms the foundation of every HTML document. All other HTML tags you use will fit into this hierarchy, creating a seamless, organized web page.

Understanding HTML structure is essential for building functional, responsive web pages. The UI/UX Design Bootcamp at upGrad will teach you how to design seamless user interfaces and structure HTML for better performance. Start learning today!

Also Read: Structure of HTML: The Essential Guide to Building Web Pages in 2025

Now that you understand how HTML tags work and why they’re essential, let’s look into the specifics and start with the basic HTML tags.

Basic HTML Tags

Essential HTML tags form the foundation of nearly every HTML document. These tags are key to structuring your webpage and ensuring proper display across browsers.

Let’s go through them one by one.

<html>

The <html> tag is the root element of an HTML page. It wraps all the content in your document, indicating to the browser that everything inside it is HTML code. This tag marks the start of your webpage’s structure and acts as the container for all other HTML elements. Without this tag, the browser couldn’t interpret the content as an HTML document correctly.

Key points about the <html> tag:

Root Element: It is the outermost tag that contains all the other HTML elements on the page.
Document Type: It signals to the browser that the document is written in HTML, which is crucial for proper rendering.
Language Attribute: The <html> tag can include a lang attribute to specify the language of the content (e.g., lang="en" for English). The lang attribute is crucial for search engines and screen readers, helping them identify the primary language of the page, improving SEO and accessibility.

Example Code:

<html lang="en">
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a simple webpage.</p>
  </body>
</html>

In this example, the <html> tag is used to wrap the entire HTML document, and the lang="en" attribute specifies that the content is in English.

Output:

This tag is essential for marking the start of your HTML structure and ensuring proper browser interpretation.

<head>

The <head> tag is used to store metadata about your webpage. Metadata refers to information about the page that isn't directly displayed to the user but is important for browsers and search engines to interpret and index the page.

This tag is essential for SEO, accessibility, and ensuring the page functions correctly across different devices and browsers.

Here are some key elements typically found inside the <head>:

<title>: Defines the title of the webpage, which appears in the browser tab or window.
<meta>: Specifies meta-information about the page, like character encoding, description, and keywords.
- Example: <meta charset="UTF-8"> defines the character encoding for the page, ensuring proper display of text.
- Example: <meta name="description" content="This is a description of my webpage"> provides a brief description of the page's content, which search engines use in search results.
<link>: Links external resources, such as CSS files or favicons.
- Example: <link rel="stylesheet" href="style.css"> links to an external stylesheet.
<script>: Includes JavaScript files to add interactivity to the page.

Example Code:

<head>
  <title>My Webpage</title>
  <meta charset="UTF-8">
  <meta name="description" content="This is a description of my webpage">
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>

The <body> tag contains the visible content of your webpage - everything that users will see and interact with. Anything you want to display to the user, such as text, images, videos, links, or forms, goes inside the <body> tag.

Some common HTML elements used inside the <body> tag include:

Headings (<h1>, <h2>, etc.): Used for titles and subheadings to organize content.
Paragraphs (<p>): Displays text in readable blocks.
Images (<img>): Embeds visual content.
Links (<a>): Links to other pages or websites.
Lists (<ul>, <ol>, <li>): Displays items in a list format.
Forms (<form>, <input>): Collects user input.

Example Code:

<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text that introduces the webpage.</p>
  <img src="image.jpg" alt="An example image">
  <a href="https://www.example.com">Click here to visit Example</a>
</body>

Output:

<title>

The <title> tag is essential for defining the title of your webpage. It appears in the browser tab and is used by search engines to index your webpage.

A well-crafted title helps users identify the page's content quickly and improves your page’s ranking on search engines.

Here’s why the <title> tag is important:

SEO Importance: The title is one of the first things search engines look at when indexing a page. A descriptive and relevant title can help your webpage rank higher in search results.
User Experience: The title appears in the browser tab, helping users identify and switch between multiple open tabs. It’s especially useful for bookmarking and sharing links.

Example Code:

<head>
  <title>My Webpage</title>
</head>

The title "My Webpage" will appear in the browser tab in this example.

<p>

The <p> tag is one of the most commonly used HTML tags. It defines a paragraph of text, which is the basic building block for displaying written content on a webpage.

The <p> tag automatically adds spacing before and after the paragraph, ensuring that the text is readable and well-organized.

Key Points:

Structure: Every paragraph you want to display on the page should be wrapped in <p> tags. This ensures that the text is properly structured and formatted.
Spacing: The browser automatically adds some space above and below each paragraph, making the content easier to read.
No Nested Paragraphs: You cannot place a <p> tag inside another <p> tag. If you do so, the browser will close the first paragraph tag and start a new one.

Example Code:

<p>This is a paragraph of text on my webpage.</p>

Output:

Here’s an example of a basic HTML page with all the tags discussed:

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <meta charset="UTF-8">
    <meta name="description" content="This is a description of my webpage">
  </head>
  <body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph of text on my webpage.</p>
    <img src="image.jpg" alt="An example image">
  </body>
</html>

Output:

Also Read: Top 25+ HTML Project Ideas for Beginners in 2025: Source Code, Career Insights, and More

With the foundational tags covered, it's time to refine the presentation. Let’s now explore Formatting Tags to enhance your content's visual structure and readability.

Formatting Tags

Formatting tags in HTML allow you to control how text and other content are displayed on the webpage. They are essential for organizing content in a readable and visually appealing way. By applying these tags correctly, you can emphasize important information, structure text, and improve the overall user experience.

You’ll walk through several commonly used HTML tags for formatting and show how they affect the text and content on your webpage.

<b>

The <b> tag is used to make text bold. While this tag visually emphasizes text, it doesn’t add any specific meaning to it from a semantic standpoint. If you need to highlight text in a way that conveys importance, it’s better to use the <strong> tag instead, as it adds semantic meaning.

Example:

<p>This is a <b>bold</b> word.</p>

Output:

<strong>

The <strong> tag is used to indicate strong emphasis. This tag doesn’t just bold the text; it also conveys to screen readers and search engines that the enclosed text is important.

Using <strong> instead of <b> is a better practice for both accessibility and SEO.

Example:

<p>This is a <strong>strongly emphasized</strong> word.</p>

Output:

<i>

The <i> tag is used to italicize text. Like the <b> tag, it doesn't add any semantic meaning but can still be used to change the appearance of text.

Example:

<p>This is an <i>italicized</i> word.</p>

Output:

<em>

The <em> tag is used to emphasize text. While the <i> tag simply makes the text italic, <em> adds semantic meaning, indicating that the enclosed text should be stressed.

It's commonly used to highlight key terms or concepts.

Example:

<p>This is an <em>emphasized</em> word.</p>

Output:

<u>

The <u> tag is used to underline text. While it is often used in print to highlight text, it’s generally recommended to use CSS for underlining. The <u> tag can confuse screen readers and is often used incorrectly for non-linking content.

Example:

<p>This is an <u>underlined</u> word.</p>

Output:

<s>

The <s> tag is used to display text with a strikethrough, often showing that content is no longer relevant or has been removed.

Example:

<p>This is a <s>struck-through</s> word.</p>

Output:

<small>

The <small> tag is used to reduce the size of the text. This can be useful for things like fine print, legal disclaimers, or any content that should be displayed smaller than the rest of the text.

Example:

<p>This is <small>smaller</small> text.</p>

Output:

<mark>

The <mark> tag is used to highlight text, often used to emphasize parts of content that match a search query or are of particular interest. It typically highlights text with a yellow background.

Example:

<p>This is <mark>highlighted</mark> text.</p>

Output:

<del>

The <del> tag is used to represent deleted text. It shows the text with a strikethrough to indicate that it has been removed.

Example:

<p>This is <del>deleted</del> text.</p>

Output:

H3: <sub>

The <sub> tag is used to display text as a subscript, which is typically seen in scientific formulas or chemical equations.

Example:

Output:

<sup>

The <sup> tag is used to display text as a superscript, which is typically used for exponents or footnotes.

Example:

<p>H<sub>2</sub>O</p>

Output:

These simple tags go a long way in creating visually structured and accessible content, but organization is just as important.

While <b> and <i> were traditionally used for visual styling, they should be avoided in favor of <strong> and <em> to add meaning to the content for search engines and accessibility tools.

Let’s move on to list tags, the perfect way to arrange information for clarity and ease of use.

In HTML, list tags organize content into an ordered or unordered format. Whether you’re displaying steps in a process, items in a collection, or links to important sections, lists are an essential way to make content more readable and structured.

Let’s get into how these lists are created:

<ul> - Unordered List

The <ul> tag is used to create an unordered list, which displays a list of items without a specific order. The list items are typically marked with bullet points by default.

How to Use:

You wrap the entire list in the <ul> tag and each individual item in an <li> (list item) tag.

Example:

<ul>
  <li>Apples</li>
  <li>Bananas</li>
  <li>Cherries</li>
</ul>

Output:

When to Use:

Use <ul> when the order of items doesn’t matter. For example, a list of ingredients or features.

<ol> - Ordered List

The <ol> tag creates an ordered list, meaning the items are presented in a specific order, often numbered. This tag is perfect for displaying instructions, rankings, or any content where sequence matters.

How to Use:

Similar to the <ul> tag, the <ol> tag wraps the entire ordered list, and each item within it is enclosed in the <li> tag.

Example:

<ol>
  <li>First, preheat the oven to 350°F.</li>
  <li>Second, mix the dry ingredients.</li>
  <li>Third, bake for 30 minutes.</li>
</ol>

Output:

When to Use:

Use <ol> when the order of items is important, such as steps in a process or rankings.

<li> - List Item

The <li> tag is used within both <ul> and <ol> tags to define individual list items. The content inside <li> tags becomes the elements of the list, whether it’s an unordered or ordered list.

How to Use:

The <li> tag is placed inside either an <ul> or an <ol> tag, and each <li> tag contains one item.

Example:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Output:

When to Use:

You’ll use <li> tags whenever you’re creating a list (whether ordered or unordered). Every item in the list needs to be wrapped in its own <li> tag.

<dl>, <dt>, and <dd> - Description Lists

The <dl> tag defines a description list, which is useful when you need to create a list of terms and their corresponding descriptions, like in a glossary.

<dl>: The description list element that wraps the entire list.
<dt>: The term (or item) being described.
<dd>: The description or definition of the term.

How to Use:

You’ll use <dl> to create the list, and then place the terms and their descriptions inside <dt> and <dd> tags, respectively.

Example:

<dl>
  <dt>HTML</dt>
  <dd>A markup language used for creating web pages.</dd>
  
  <dt>CSS</dt>
  <dd>A stylesheet language used to describe the presentation of a document written in HTML.</dd>
</dl>

Output:

When to Use:

Use the <dl>, <dt>, and <dd> tags when creating glossaries, lists of definitions, or any situation where you need to pair terms with explanations.

Table Tags

HTML tables are an essential tool for organizing data into rows and columns. Whether you’re displaying simple data, such as a list of names and phone numbers, or more complex data like financial figures, tables are essential for organizing information.

Let’s explore these tags with examples and see how they work in practice.

<table> - Defining a Table

The <table> tag is the container for all the elements that make up a table. This is the root tag for your table and holds everything inside it, from the rows and columns to the headers and data.

Example:

<table>
  <tr>
    <td>Row 1, Column 1</td>
    <td>Row 1, Column 2</td>
  </tr>
  <tr>
    <td>Row 2, Column 1</td>
    <td>Row 2, Column 2</td>
  </tr>
</table>

Output:

The code above will display a simple table with 2 rows and 2 columns. Each <tr> represents a row, and the <td> represents a data cell within each row.

<tr> - Table Row

The <tr> tag defines a table row. It is used to group the cells in a row and is essential for structuring the table into horizontal sections. Inside each <tr>, you will place the table cells using the <td> (for data cells) or <th> (for header cells).

Example:

<table>
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
  </tr>
</table>

Output:

In this example, the first row contains header cells defined by <th>, and the second row contains data cells defined by <td>. The result is a table where the headers are bold and centered by default.

<th> - Table Header

The <th> tag defines a table header cell. Header cells are typically displayed in bold and centered by default. The <th> tag is used to mark the title of a column or row, providing context for the data displayed in the table. It is an important part of semantic HTML tags as it helps search engines and screen readers understand the structure of the data.

Example:

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jai</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ajay</td>
    <td>30</td>
  </tr>
</table>

Output:

This table has headers for "Name" and "Age," with data below each. The headers will be bold and centered, and the data cells will align beneath the respective headers.

<td> - Table Data

The <td> tag is used for regular data cells inside a table. It defines individual pieces of data in a row. You will use <td> tags inside <tr> tags to populate the table with data.

Example:

<table>
  <tr>
    <td>Jai</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ajay</td>
    <td>30</td>
  </tr>
</table>

Output:

This table displays two rows of data: one for "Jai" and "Ajay," with their respective ages.

<caption> - Table Caption

The <caption> tag is used to provide a title or description for the table. It appears above the table by default and is useful for providing context to the data displayed in the table.

Example:

<table>
  <caption>List of Students and Ages</caption>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jai</td>
    <td>25</td>
  </tr>
  <tr>
    <td>Ajay</td>
    <td>30</td>
  </tr>
</table>

Output:

The table will include a title "List of Students and Ages" above it, providing users context before viewing the data.

<thead>, <tbody>, and <tfoot> - Table Groups

These tags are used to group different parts of a table. While not strictly necessary, they help organize complex tables, especially when there is a lot of data. Using these tags can also improve accessibility and help with styling.

<thead>: Groups the header content.
<tbody>: Groups the body content of the table.
<tfoot>: Groups the footer content, typically used for summary rows or totals.

Example:

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jai</td>
      <td>25</td>
    </tr>
    <tr>
      <td>Ajay</td>
      <td>30</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>55</td>
    </tr>
  </tfoot>
</table>

Output:

The table will have a header section, body section, and a footer. The footer in this example sums up the ages, showing "Total: 55."

These foundational elements allow you to present complex information in an accessible format. Now that your data is organized, let’s move on to form and input tags, the key to making your webpages interactive and gathering user input.

Form and Input Tags

Forms are essential for user interaction on websites. Whether you’re collecting user information, receiving feedback, or allowing users to submit data, form tags are key to building interactive websites.

Let’s look at the fundamental HTML tags used to create forms and gather user input.

<form> - The Form Container

The <form> tag is the root element for any form in HTML. It wraps all the input elements and defines the boundaries of the form. It tells the browser that the elements inside it are part of a form that should be submitted when the user interacts with it.

Example:

<form action="/submit" method="POST">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <input type="submit" value="Submit">
</form>

Explanation: The <form> tag encloses all form elements. The action attribute specifies where to send the form data, and the method attribute specifies how the data is sent (in this case, via POST).

Output:

The form contains a text input field for the user's name and a submit button.

<input> - Input Fields

The <input> tag is used to create various types of input fields, such as text boxes, radio buttons, checkboxes, and more. The type attribute specifies what kind of input the field will accept.

Example (Text Input):

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
  <input type="submit" value="Submit">
</form>

Explanation: The type="email" defines an input field specifically for email addresses, and the input element will automatically validate that the entered text is in the correct email format.

Output:

A field that allows the user to input their email, with automatic validation.

<label> - Label for Inputs

The <label> tag is used to define labels for form elements, enhancing accessibility. When the label is clicked, it focuses on the associated input field, improving the user experience.

Example:

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username">
</form>

Explanation: The for attribute in the <label> tag links the label to the input field with the corresponding id. This helps screen readers and improves accessibility.

Output:

The text "Username:" is clickable and focuses on the username input field when clicked.

<textarea> - Multi-line Text Input

The <textarea> tag is used for multi-line text input, such as comments or feedback. Unlike the <input> tag, which is for single-line text, <textarea> allows for more extensive user input.

Example:

<form>
  <label for="feedback">Feedback:</label>
  <textarea id="feedback" name="feedback" rows="4" cols="50"></textarea>
</form>

Explanation: The rows and cols attributes define the size of the textarea (the number of visible lines and columns of text). This allows users to input multiple lines of text.

Output:

A text area where users can type multiple lines of feedback.

<select> and <option> - Dropdown List

The <select> tag is used to create a dropdown list, and the <option> tags inside it define the available choices. Dropdowns are useful when you want to limit user input to a set of predefined options.

Example:

<form>
  <label for="country">Country:</label>
  <select id="country" name="country">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
    <option value="uk">United Kingdom</option>
  </select>
</form>

Explanation: The <select> element creates a dropdown menu, and each <option> represents an item in the list. The value attribute specifies the value sent when the form is submitted.

Output:

A dropdown list where users can select their country from the options provided.

<button> - Buttons for User Interaction

The <button> tag is used to define clickable buttons, which can trigger actions within a form, such as submitting the form or resetting its fields. You can also use JavaScript to trigger other actions.

Example:

<form>
  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Explanation: The type="submit" button sends the form data to the server, while the type="reset" button clears all fields in the form.

Output:

Two buttons: one for submitting the form and one for resetting all input fields.

<fieldset> and <legend> - Grouping Form Elements

The <fieldset> tag is used to group related form elements, while the <legend> tag provides a title for the grouped elements. This helps organize forms visually and semantically.

Example:

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
  </fieldset>
</form>

Explanation: The <fieldset> groups the form elements, and the <legend> provides a label for the group. This is particularly useful for creating logical sections within large forms.

Output:

A group of form elements labeled "Personal Information."

With form and input tags, you now have the tools to create interactive forms that enable users to submit data and engage with your site. These elements not only improve functionality but also enhance user experience and accessibility.

With your forms in place, let's explore multimedia tags to enhance your content with images, audio, and video.

Multimedia Tags

Multimedia tags are essential for adding rich media content, such as images, audio, and video, to your webpages. These elements help create a more engaging and interactive user experience.

Let’s look at the HTML tags used to integrate multimedia content and see how they work with examples.

<img> - Image Tag

The <img> tag is used to embed images on your webpage. It does not have a closing tag, and it’s one of the most commonly used HTML elements for displaying images.

How to Use:

You define the image’s location with the src (source) attribute and provide alternative text for accessibility with the alt attribute. It’s important always to use the alt attribute for SEO and accessibility purposes.

Example:

<img src="logo.png" alt="Website Logo">

Explanation: The src specifies the image file ("logo.png"), and the alt provides a description of the image ("Website Logo") for screen readers or if the image fails to load.

Output:

The image will be displayed where the <img> tag is placed in the document.

<audio> - Audio Tag

The <audio> tag is used to embed sound files on your webpage. It supports a variety of audio formats like MP3, Ogg, and WAV. Through the controls attribute, you can also add controls like play, pause, and volume.

How to Use:

You can specify the audio file using the src attribute and include the controls attribute for user interaction.

Example:

<audio controls>
  <source src="audio.mp3" type="audio/mp3">
  Your browser does not support the audio element.
</audio>

Explanation: The controls attribute provides a play/pause button, volume control, and progress bar. The <source> element specifies the audio file and its format.

Output:

The audio player appears, allowing users to play, pause, and control the volume of the audio file.

<video> - Video Tag

The <video> tag is used to embed videos on your webpage. It supports multiple video formats like MP4, WebM, and Ogg. Like the <audio> tag, it also allows you to add controls for user interaction, such as play, pause, and volume.

How to Use:

You define the video file using the src attribute and provide controls for the user.

Example:

<video controls width="600">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

Explanation: The controls attribute allows users to interact with the video. The width attribute controls the size of the video player. The <source> tag specifies the video file and format.

Output:

The video player will appear with play/pause controls, volume control, and a timeline for users to interact with the video.

<iframe> - Embedding External Content

The <iframe> tag allows you to embed external content, such as videos from YouTube or maps from Google Maps, within your webpage. It essentially acts as a window to display another webpage inside your page.

How to Use:

The src attribute specifies the URL of the content to embed, and the width and height attributes define the size of the embedded content.

Example:

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315" frameborder="0" allowfullscreen></iframe>

Explanation: The src contains the URL of the embedded content (in this case, a YouTube video). The frameborder attribute removes the border around the iframe, and allowfullscreen enables fullscreen mode.

Output:

The YouTube video will be embedded within the page and playable directly from the webpage.

<picture> - Responsive Images

The <picture> tag is used to provide different versions of an image for different screen sizes or resolutions. It is especially useful for responsive web design, ensuring that the best image is shown based on the user's device.

How to Use:

You define multiple sources for the image using the <source> tag and specify conditions (like screen size or resolution) under which each source should be used.

Example:

<picture>
  <source media="(max-width: 600px)" srcset="small-image.jpg">
  <source media="(min-width: 601px)" srcset="large-image.jpg">
  <img src="default-image.jpg" alt="Responsive Image">
</picture>

Explanation: The <source> tag specifies different images for different screen sizes, ensuring that users get the optimal image for their device. The img tag serves as a fallback if the <picture> tag is not supported.

Output:

Depending on the screen size, either the small image or the large image will be displayed.

With multimedia tags, you can seamlessly integrate images, audio, and video into your webpages, enhancing user engagement and interaction. These tags open up endless possibilities for creating dynamic, multimedia-rich content.

Next, we’ll focus on semantic tags, which help give your content deeper meaning through proper structure.

Semantic Tags

Semantic HTML tags are designed to clearly define the structure and meaning of content on a webpage. These tags provide information about the type of content they contain, making it easier for browsers, search engines, and screen readers to interpret the page correctly.

Proper use of semantic tags not only helps improve SEO but also ensures better accessibility for users with disabilities, making content easier to navigate with screen readers.

You’ll go over key semantic tags and how they help structure your content more meaningfully.

<header> - Defining the Page or Section Header

The <header> tag defines a page or section's introductory content or navigational elements. This often includes the site logo, navigation menu, and title, and it provides a clear starting point for the content that follows.

Example:

<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>

Explanation: The <header> tag encapsulates the introductory content for the page, which helps both search engines and users understand that this is the start of the page. The navigation inside the <header> allows users to find key sections of the website quickly.

Output:

The header will display the title and a navigation menu at the top of the page.

<footer> - Defining the Page or Section Footer

The <footer> tag defines the page's bottom section or a specific section. This typically contains copyright information, contact details, and links to privacy policies or terms of use.

Example:

<footer>
<p>&copy; 2025 My Website</p>
<a href="#privacy-policy">Privacy Policy</a>
<a href="#terms-of-service">Terms of Service</a>
</footer>

Explanation: The <footer> tag wraps up the page or section with additional information, ensuring users and search engines know this is the conclusion or extra content at the end.

Output:

The footer will display copyright information and links to legal pages at the bottom of the page.

<section> - Grouping Content Into Thematic Sections

The <section> tag is used to group related content into distinct sections of a webpage. Each section typically has its own heading, which allows both users and search engines to understand the content’s structure.

Example:

<section>
<h2>About Us</h2>
<p>Our company has been a leader in web development for over a decade...</p>
</section>

Explanation: The <section> tag defines a distinct block of thematically related content. It’s often used for grouping content like articles, product descriptions, or blog posts.

Output:

A section is created with a heading and related content, making the page easier to navigate and understand.

<article> - Defining Self-contained Content

The <article> tag is used to define a piece of content that is independent and could stand alone, such as a blog post, news article, or product description. It is typically used to wrap content that is meaningful on its own and can be syndicated or shared.

Example:

<article>
<h2>Latest Web Development Trends</h2>
<p>Web development is constantly evolving. From mobile-first design to AI-driven interfaces...</p>
</article>

Explanation: The <article> tag wraps self-contained content that can be shared independently of other parts of the website. It makes it easier to define content that has its own context.

Output:

The article will be structured as a self-contained block of content, complete with its own heading and body text.

<aside> - Defining Tangential Content

The <aside> tag is used to define content that is tangentially related to the main content. It’s commonly used for sidebars, related links, advertisements, or additional information that isn’t part of the primary flow of content.

Example:

<aside>
<h3>Related Articles</h3>
<ul>
<li><a href="#">Understanding HTML</a></li>
<li><a href="#">CSS Basics</a></li>
</ul>
</aside>

Explanation: The <aside> tag allows you to separate content that is related but not directly part of the main content. This improves the organization of your page.

Output:

A sidebar or additional content block that is visually separate from the main content.

<nav> - Defining Navigation Links

The <nav> tag is used to define a block of navigation links. These links typically help users move between sections of the page or to different pages within the website. It helps browsers and screen readers identify the navigation menu.

Example:

<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#services">Services</a></li>
</ul>
</nav>

Explanation: The <nav> tag is essential for organizing navigation links. It is semantically helpful for search engines and users, clearly identifying which parts of the page are dedicated to navigation.

Output:

A navigation menu displayed, helping users easily move between key sections of the website.

Semantic tags are essential for structuring your content in a meaningful way, improving accessibility and SEO. With the structure set, let’s explore metadata tags, which provide key information to browsers and search engines.

Metadata Tags

Metadata tags provide essential information about your webpage that isn't directly visible to users but is crucial for browsers, search engines, and other services. These tags help describe the page's content and enhance the user experience.

Let’s look at some of the most important metadata tags and how to use them.

<meta> Tags - Defining Webpage Metadata

The <meta> tag is used to define various types of metadata about your webpage, which is essential for improving SEO, accessibility, and functionality. It’s placed within the <head> section and provides critical information about the content, such as character encoding, page description, author, and more.

Here are the most commonly used <meta> tags:

Example:

<head>
  <meta charset="UTF-8">
  <meta name="description" content="A comprehensive guide to HTML5 and web development">
  <meta name="keywords" content="HTML5, web development, tutorial, coding">
  <meta name="author" content="Jai Sharma">
  <meta name="robots" content="index, follow">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Explanation:

charset="UTF-8": Specifies the character encoding for the page, ensuring proper text rendering.
name="description": Provides a brief description of the page, which search engines often display in search results.
name="keywords": Defines a set of keywords related to the page content, helping search engines understand the page's relevance.
name="author": Indicates the author of the webpage, typically used for content attribution.
name="robots": Controls how search engine crawlers index the page (e.g., "index, follow" tells crawlers to index the page and follow links).
name="viewport": Ensures the page is responsive by setting the viewport width to match the device's width, and defines the initial zoom level for mobile devices.

Output:

These meta tags help improve SEO, make the page responsive, and ensure proper encoding and rendering.

<link> - Linking External Resources

The <link> tag is essential for linking external resources like stylesheets, favicons, and other necessary files to your webpage. It’s typically placed within the <head> section.

Example:

<head>
  <link rel="stylesheet" href="styles.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

Explanation:

The first <link> tag links to an external CSS file, which styles the webpage.
The second <link> tag links to a favicon, which appears in the browser tab.

Output:

The page will be styled according to the linked stylesheet, and the browser tab will display the favicon.

These tags are essential for creating modern, efficient, and SEO-friendly webpages.

Also Read: Top 10 Front-End Developer Project Ideas & Topics For Beginners

Now that you’re familiar with the core HTML tags, let’s look into using them effectively to create well-structured, organized pages in your web development process.

How to Use HTML Tags?

Using HTML tags effectively is essential for building clean, efficient, and accessible web pages. Proper tag usage improves user experience, SEO, and maintainability. To help you write better, more effective code, let's explore best practices for HTML tags and common mistakes to avoid.

Best Practices for Using HTML Tags

Effective HTML tag usage ensures clean, efficient, and accessible web pages that improve user experience. Here’s how to use HTML tags properly and avoid common mistakes that can impact your code’s performance.

Use Semantic Tags: Always use semantic tags like <header>, <article>, <footer>, and <section> to define the structure of your content clearly. This helps with SEO and makes your site more accessible.
Avoid Overuse of Divs: Don’t rely solely on <div> tags for layout. Use semantic tags wherever possible to improve the clarity of your code.
Keep Tags Consistent: Ensure consistency in the way you use tags. For instance, always use <h1> for the main heading and use <h2>, <h3>, etc., for subheadings in a logical hierarchy.
Use Descriptive Alt Text: For images, always include the alt attribute with a description of the image to improve accessibility and SEO.
Close Tags Properly: Ensure that all tags are properly opened and closed to avoid rendering issues and improve code readability.
Indent Nested Tags: Always use indentation for nested tags to make your HTML more readable and easier to debug.

Now that you know the best practices, let’s address common pitfalls that can undermine your HTML structure and performance.

Common Mistakes to Avoid

Even with best practices in place, it's essential to be aware of common mistakes that can disrupt your page's structure and impact its performance. Here are key pitfalls to avoid for cleaner, more efficient HTML.

Incorrect Use of Tags: Avoid using non-semantic tags like <div> and <span> when you should be using semantic tags like <article>, <section>, or <nav>.
Missing Alt Text for Images: Never empty the alt attribute for <img> tags. Always describe the image to improve accessibility and help with SEO.
Not Using Proper Heading Tags: Avoid skipping heading tags (e.g., going from <h1> to <h3>). Always use headings in the proper order to maintain a logical structure.
Overusing Inline Styles: To keep HTML clean and maintainable, inline styles (style="") should be avoided in favor of external CSS files.
Neglecting Accessibility: Don’t ignore accessibility best practices, like using the correct semantic tags, adding alt text to images, and ensuring keyboard navigability.

Understanding how to apply these tags effectively ensures your pages are structured logically, accessible, and future-proof. Mastering these concepts allows you to build efficient, scalable websites that perform well across all platforms.

Conclusion

To wrap up, learning HTML tags is the first step towards creating clean, efficient, and accessible web pages. Now that you understand the core tags, start by building a simple, structured webpage using semantic HTML tags. Focus on creating a clear layout with proper headings, sections, and forms.

Once comfortable, explore more advanced topics like responsive design and integrating multimedia content. Keep experimenting, and always test your code for accessibility and SEO improvements.

If you want to deepen your understanding of AI or explore other areas in the tech field, upGrad’s career counseling services can guide you in choosing the right path. Visit your nearest upGrad center today for in-person guidance and take the next step in advancing your career!

FAQs

1. How do HTML semantic tags improve SEO?

Semantic HTML tags, such as <article>, <section>, and <header>, help search engines understand the content of your page by clearly defining its structure. Using a proper HTML tags list improves your site’s crawlability and indexing, boosting SEO by highlighting relevant sections and improving content visibility.

2. Are <div> and <span> considered obsolete HTML tags?

While <div> and <span> are not obsolete, their overuse can be problematic. They are non-semantic tags, which means they don’t provide any meaning to the content they enclose. For better SEO and accessibility, replace them with semantic HTML tags like <article>, <header>, or <section> wherever possible.

3. How can I ensure my HTML code is accessible to all users?

To ensure accessibility, focus on using proper semantic HTML tags like <header>, <footer>, <nav>, and <main> to provide structure. Also, always include alt text for images with the alt attribute, use headings in the correct order, and ensure that your forms are keyboard-navigable and well-labeled.

4. What is the role of the <meta> tag in web development?

The <meta> tag provides essential metadata about your webpage, such as character encoding, description, and keywords. It helps browsers and search engines understand the page’s content better, enhancing user experience and improving your site’s SEO. A properly filled out HTML tags list with <meta> information can drive more organic traffic.

5. How do I use the <figure> and <figcaption> tags correctly?

The <figure> tag is used to wrap media content, such as images, diagrams, or videos, while the <figcaption> tag provides a description or caption for the media. This makes your content more accessible and provides additional context, especially for SEO purposes. It’s important to pair these tags for better content structure.

6. Can using too many <div> tags negatively affect my HTML code?

Yes, overusing <div> tags can lead to cluttered and inefficient code, making it harder for browsers, search engines, and screen readers to understand your content. Instead, try to use semantic HTML tags like <article>, <section>, or <nav> to structure your webpage meaningfully and improve accessibility and SEO.

7. How can I optimize my HTML code for mobile devices?

To optimize HTML for mobile, always use the <meta name="viewport"> tag with the proper settings. This ensures that the page is responsive and adjusts based on the device's screen size. Additionally, using semantic HTML tags like <main> and <header> allows for a clean, accessible layout across devices.

8. When should I use <section> versus <div>?

Use <section> when grouping content that has a logical theme or subtopic, such as an article or a blog post section. Unlike <div>, which is a generic container, <section> provides semantic meaning and improves accessibility. This helps search engines and screen readers better understand your content.

9. How do I handle outdated or obsolete HTML tags?

Obsolete HTML tags like <font> or <center> should be avoided. These tags are no longer supported in modern web design standards. Instead, use CSS for styling and positioning. Always rely on semantic HTML tags like <header>, <footer>, and <section> for improved accessibility and SEO.

10. What is the difference between <nav> and <header>?

The <nav> tag is specifically used to define navigation links within your webpage, whereas the <header> tag wraps the introductory content or navigation for the entire page or section. Using these HTML elements properly ensures that both search engines and users can easily find key sections of your site.

11. Why should I prioritize using semantic HTML tags in my projects?

Using semantic HTML tags makes your content more accessible to all users, including those using screen readers. It improves the overall structure of your page and helps search engines understand the content, leading to better indexing and SEO performance. A well-structured HTML tags list creates a more efficient, maintainable codebase.

Join 10M+ Learners & Transform Your Career

Learn on a personalised AI-powered platform that offers best-in-class content, live sessions & mentorship from leading industry experts.

upGrad Learner Support

Talk to our experts. We are available 7 days a week, 9 AM to 12 AM (midnight)

Indian Nationals

1800 210 2020

Foreign Nationals

+918068792934

Disclaimer

1.The above statistics depend on various factors and individual results may vary. Past performance is no guarantee of future results.

2.The student assumes full responsibility for all expenses associated with visas, travel, & related costs. upGrad does not provide any a.

HTML Tags you should know in 2025: Types & Functions

HTML Tags Explained

What is HTML?

Basic HTML Document Structure

Basic HTML Tags

<html>

<head>

<body>

<title>

<p>

Formatting Tags

<b>

<strong>

<i>

<em>

<u>

<s>

<small>

<mark>

<del>

H3: <sub>

<sup>

List Tags

<ul> - Unordered List

<ol> - Ordered List

<dl>, <dt>, and <dd> - Description Lists

Table Tags

<table> - Defining a Table

<tr> - Table Row

<th> - Table Header

<td> - Table Data

<caption> - Table Caption

<thead>, <tbody>, and <tfoot> - Table Groups

Form and Input Tags

<form> - The Form Container

<input> - Input Fields

<label> - Label for Inputs

<textarea> - Multi-line Text Input

<select> and <option> - Dropdown List

<button> - Buttons for User Interaction

<fieldset> and <legend> - Grouping Form Elements

Multimedia Tags

<img> - Image Tag

<audio> - Audio Tag

<video> - Video Tag

<iframe> - Embedding External Content

<picture> - Responsive Images

Semantic Tags

<header> - Defining the Page or Section Header

<footer> - Defining the Page or Section Footer

<section> - Grouping Content Into Thematic Sections

<article> - Defining Self-contained Content

<aside> - Defining Tangential Content

<nav> - Defining Navigation Links

Metadata Tags

<meta> Tags - Defining Webpage Metadata

<link> - Linking External Resources

How to Use HTML Tags?

Best Practices for Using HTML Tags

Common Mistakes to Avoid

Conclusion

FAQs

1. How do HTML semantic tags improve SEO?

2. Are <div> and <span> considered obsolete HTML tags?

3. How can I ensure my HTML code is accessible to all users?

4. What is the role of the <meta> tag in web development?

5. How do I use the <figure> and <figcaption> tags correctly?

6. Can using too many <div> tags negatively affect my HTML code?

7. How can I optimize my HTML code for mobile devices?

8. When should I use <section> versus <div>?

9. How do I handle outdated or obsolete HTML tags?

10. What is the difference between <nav> and <header>?

11. Why should I prioritize using semantic HTML tags in my projects?

upGrad Learner Support

Disclaimer