HTML Tags: A Comprehensive Guide for Web Developers

HTML, or HyperText Markup Language, is the backbone of a website. It provides the structure and layout for web pages. HTML tags are the building blocks that define headings, paragraphs, images, links, and more. If you're a beginner or an experienced web developer looking to refresh your knowledge, understanding HTML tags is essential for creating well-structured, easily navigable, and user-friendly websites.

Accelerate your career as a skilled MERN Stack Developer by enrolling in a unique Full Stack Developer - MERN Stack Master's program. Get complete development and testing knowledge on the latest technologies.

HTML Basic Tags

Basic HTML tags define various elements used to structure and format web pages. Here’s a table listing basic HTML tags along with their descriptions.

Tag	Description
<!DOCTYPE>	Defines the type of the document
<html>	The root element that wraps the entire HTML document
<head>	Contains meta-information about the document (like title, charset, etc)
<title>	Sets the title of the web page (shown in the browser tab)
<body>	Contains the content of the HTML document, like text, images, links, etc
<h1> to <h6>	Header tags from largest (<h1>) to smallest (<h6>)
<p>	Defines a paragraph
<br>	Inserts a line break
<hr>	Inserts a horizontal line
<!--...-->	Defined a comment

Here's a simple HTML page using only the basic HTML tags:

<!DOCTYPE html>
<html>
<head>
<title>Sample HTML Page</title>
</head>
<body>
<h1>Welcome to My HTML Page</h1>
<hr>
<p>This is a paragraph of text that gives a basic introduction to the page.<br>It demonstrates line breaks and headers.</p>
<h2>Section Title</h2>
<p>Paragraph under a secondary heading.</p>
<h3>Subsection Title</h3>
<p>Paragraph under a smaller heading.</p>
<h4>Heading Level 4</h4>
<p>List of items.</p>
<h5>Heading Level 5</h5>
<p>List of sub-items.</p>
<h6>Smallest Heading</h6>
<p>All done!</p>
<!-- This is a comment. It won't appear on the page but helps explain code. -->
</body>
</html>

Output:

HTML Basic Tags

HTML Formatting Tags

Formatting tags in HTML are used to style and emphasize text. They help highlight or structure content visually without using CSS.

Bold & Emphasis

Tag	Description
<b>	Makes text bold
<strong>	Indicates strong importance (usually bold)
<i>	Makes text italic
<em>	Emphasizes text

Fonts and Highlights

Tag	Description
<u>	Underlines text
<mark>	Highlights text like a marker
<small>	Displays smaller text
<sub>	Subscript text (e.g., H<sub>2</sub>O)
<sup>	Superscript text (e.g., x<sup>2</sup>)

Text Modification and Codes

Tag	Description
<del>	Strikethrough text (deleted)
<ins>	Underlined text (inserted)
<code>	Displays text in a monospace font
<pre>	Preserves spacing and formatting exactly as typed

Other Formatting Tags

Tag	Description
<abbr>	Defines an acronym or abbreviation
<address>	Contact information of the owner
<bdi>	Separates a part of the text
<bdo>	Overrides the current text direction
<blockquote>	A section that is quoted from another source
<cite>	Defines the title of a work
<dfn>	Specifies a term that is going to be defined
<kbd>	Indicates keyboard input
<meter>	Indicates scalar measurement
<progress>	Defines task progress
<q>	Indicates short quotation
<s>	Defines incorrect text
<template>	Defines a container
<time>	Shows a specific time
<var>	Defines a variable

Here's a simple HTML page with the HTML Formatting tags:

<!DOCTYPE html>
<html>
<head>
<title>HTML Formatting Tags</title>
</head>
<body>
<h2>HTML Formatting Examples</h2>
<p>This is a <b>bold</b> text example.</p>
<p>This is an <i>italic</i> text example.</p>
<p>This is an <u>underlined</u> word.</p>
<p>This is a <strong>strong</strong> text, often bold.</p>
<p>This is an <em>emphasized</em> text, often italic.</p>
<p>This text is <mark>highlighted</mark>.</p>
<p>This is <small>smaller text</small> than the normal font.</p>
<p>This text is <del>deleted</del> and no longer valid.</p>
<p>This is <ins>inserted</ins> text (usually underlined).</p>
<p>Water formula: H<sub>2</sub>O (with subscript).</p>
<p>Einstein's formula: E = mc<sup>2</sup> (with superscript).</p>
</body>
</html>

Output:

HTML Formatting Tags

Master Java programming and elevate your career with the Java Certification Course by Simplilearn. Gain in-demand skills and become job-ready. Enroll now and transform your future!

HTML Forms and Input Tags

Form tags in HTML enable user interaction through elements. They collect and submit user data to a server.

Tag	Description
<form>	An HTML form for user input
<input>	An input control
<label>	A label for an <input> element
<textarea>	A multi-line text input field
<button>	A clickable button
<select>	A drop-down list
<option>	An option in a drop-down list
<optgroup>	Groups related options in a drop-down list
<fieldset>	Groups related elements within a form
<legend>	A caption for the <fieldset>
<datalist>	A list of predefined options for input controls
<output>	The result of a calculation or user action

Here's a simple HTML page with the HTML Forms & Input tags:

<!DOCTYPE html>
<html>
<head>
<title>Form Example</title>
</head>
<body>
<h2>User Information Form</h2>
<form>
<fieldset>
<legend>Personal Details</legend>
<label for="name">Name:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="dob">Date of Birth:</label><br>
<input type="date" id="dob" name="dob"><br><br>
<label for="bio">Short Bio:</label><br>
<textarea id="bio" name="bio" rows="4" cols="30"></textarea><br><br>
</fieldset>
<fieldset>
<legend>Preferences</legend>
<label for="country">Country:</label><br>
<select id="country" name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select><br><br>
<label>Subscribe to newsletter:</label><br>
<input type="checkbox" id="subscribe" name="subscribe"> Yes<br><br>
</fieldset>
<button type="submit">Submit</button>
</form>
</body>
</html>

Output:

HTML Forms and Input Tags

HTML Input Tags

Tag	Description
<input type="text">	A single-line text field
<input type="password">	Obscured text input for sensitive data like passwords
<input type="email">	Validates that the entered text is an email address
<input type="number">	Accepts numeric values
<input type="checkbox">	Allows multiple selections from a group of options
<input type="radio">	Allows a single selection from a group of options
<input type="submit">	Submits the form to the server
<input type="reset">	Resets all fields to their initial values
<input type="file">	Allows users to upload files
<input type="date">	Displays a date picker
<input type="range">	Creates a slider control
<input type="hidden">	Stores data without displaying it to the user
<input type="color">	Opens a color picker
<input type="tel">	Accepts a telephone number
<input type="url">	Validates a properly formatted URL
<input type="seacrh">	Styled for search inputs
<input type="datetime-local">	Allows selecting both date and time (no timezone)

HTML Image Tags

With the image HTML tags, you can customize the image’s source, alt text, height, and width to improve design and accessibility.

Tag	Description
<img>	Embeds an image
<map>	A client-side image map
<area>	An area inside an image map
<canvas>	Used to draw graphics
<figure>	Self-contained content
<picture>	A container for multiple image resources
<svg>	A container for SVG graphics

Here's a simple HTML page with the HTML Image tags:

<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h1>Image Tag Demo</h1>
<!-- Basic image -->
<img src="https://via.placeholder.com/300" alt="Placeholder Image">
<br><br>
<!-- Image with different size -->
<img src="https://via.placeholder.com/150x100" alt="Custom Size Image">
<br><br>
<!-- Image with broken URL -->
<img src="broken-link.jpg" alt="This image could not be loaded">
</body>
</html>

Output:

HTML Image Tags

Supercharge your programming expertise with Simplilearn's Python Training! Join today and take your coding career to the next level.

HTML Audio/Video Tags

Audio and video HTML tags embed media files directly in a webpage. These tags support controls like play, pause, and volume, making multimedia content more interactive.

Tag	Description
<audio>	Defines an audio content
<source>	Multiple media resources
<track>	Text tracks for media elements
<video>	Defines a video content

Here's a simple HTML page with the HTML Audio & Video tags:

<!DOCTYPE html>
<html>
<head>
<title>Audio and Video Example</title>
</head>
<body>
<h2>HTML Audio Example</h2>
<audio controls>
<source src="sample-audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<h2>HTML Video Example</h2>
<video width="400" controls>
<source src="sample-video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</body>
</html>

Output:

HTML Audio & Video Tags

HTML Links and Lists Tags

The HTML link tags create hyperlinks, enabling navigation between pages or websites. HTML also supports <ul>, <ol>, and <li> for organizing content into unordered or ordered lists.

Tag	Description
<a>	A hyperlink
<link>	Link to style sheets
<nav>	Navigation links
<menu>	An alternate unordered list
<ul>	Unordered list
<ol>	Ordered list
<li>	A list item
<dl>	A description list

Here's a simple HTML page with the HTML Links & Lists tags:

<!DOCTYPE html>
<html>
<head>
<title>Links and Lists Example</title>
</head>
<body>
<h2>Useful Resources</h2>
<ul>
<li><a href="https://www.simplilearn.com">Simplilearn Homepage</a></li>
<li><a href="https://www.simplilearn.com/tutorials">Tutorials</a></li>
<li><a href="https://www.simplilearn.com/courses">All Courses</a></li>
</ul>
<h2>Steps to Start Learning</h2>
<ol>
<li><a href="#">Choose a topic of interest</a></li>
<li><a href="#">Enroll in a beginner-friendly course</a></li>
<li><a href="#">Practice regularly with projects</a></li>
</ol>
</body>
</html>

Output:

HTML Links & Lists Tags

Ready to master the MERN Stack? Join our Full Stack Developer - MERN Stack Master's program and accelerate your career with comprehensive development and testing skills. Contact us today to get started!

HTML Table Tags

Table tags in HTML are used to display data in a structured grid format. Tables help organize content such as schedules, reports, or comparisons.

Tag	Description
<table>	Table container
<thead>	Table head
<tbody>	Table body
<tfoot>	Table foot
<tr>	Table row
<th>	Table header cell
<td>	Table data cell

Here's a simple HTML page with the HTML Table tags:

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Example</title>
</head>
<body>
<table border="1">
<caption>Employee Information</caption>
<tr>
<th>Name</th>
<th>Department</th>
<th>Location</th>
</tr>
<tr>
<td>Alice</td>
<td>Engineering</td>
<td>New York</td>
</tr>
<tr>
<td>Bob</td>
<td>Marketing</td>
<td>San Francisco</td>
</tr>
<tr>
<td>Charlie</td>
<td>HR</td>
<td>Chicago</td>
</tr>
</table>
</body>
</html>

Output:

HTML Table Tags

How to Check a Website’s HTML Tags?

Here are the popular ways to check a website’s HTML tags:

Right-click on your webpage and select “View Page Source” to see all the raw HTML tags.
Press F12 (Windows) or Cmd + Option + I (Mac) to open Developer Tools and inspect specific elements.
Use online tools like W3C Validator or SEO site audit tools to analyze and highlight your site's HTML tags and structure.

Conclusion

HTML tags form the foundation of every web page, enabling web developers to structure content, embed media, create forms, and build interactive elements. Whether you're working on a simple landing page or a web app, understanding how to use HTML tags and their functions correctly is essential for clean, accessible, and responsive design.

Want to take your web development skills to the next level? Enroll in the Full Stack Developer - MERN Stack course by Simplilearn. You'll learn everything from front-end basics to back-end development using MongoDB, Express.js, React, and Node.js—perfect for building modern, full-featured web applications.

Program Name	Duration	Fees
Full Stack Development Program with Generative AI Cohort Starts: 2 May, 2025	20 weeks	$4,000
Full Stack (MERN Stack) Developer Masters Program Cohort Starts: 7 May, 2025	6 months	$1,449
Full Stack Java Developer Masters Program Cohort Starts: 28 May, 2025	7 months	$1,449
Automation Test Engineer Masters Program Cohort Starts: 4 Jun, 2025	8 months	$1,499

Table of Contents

HTML Basic Tags

HTML Formatting Tags

HTML Forms and Input Tags

HTML Image Tags

HTML Audio/Video Tags

HTML Links and Lists Tags

HTML Table Tags

How to Check a Website’s HTML Tags?

Conclusion

HTML Tags: A Comprehensive Guide for Web Developers

Table of Contents

HTML Basic Tags

HTML Formatting Tags

HTML Forms and Input Tags

HTML Image Tags

HTML Audio/Video Tags

HTML Links and Lists Tags

HTML Table Tags

How to Check a Website’s HTML Tags?

Conclusion

HTML Basic Tags

Here's a simple HTML page using only the basic HTML tags:

Output:

Unleash Your Career as a Full Stack Developer!

HTML Formatting Tags

Bold & Emphasis

Fonts and Highlights

Text Modification and Codes

Become a Full Stack Developer in Just 6 Months!

Other Formatting Tags

Here's a simple HTML page with the HTML Formatting tags:

Output:

HTML Forms and Input Tags

Here's a simple HTML page with the HTML Forms & Input tags:

Output:

HTML Input Tags

Take the Leap and Master Java Development

HTML Image Tags

Here's a simple HTML page with the HTML Image tags:

Output:

HTML Audio/Video Tags

Here's a simple HTML page with the HTML Audio & Video tags:

Output:

Boost Your Career and Unlock High-Paying Jobs!

HTML Links and Lists Tags

Here's a simple HTML page with the HTML Links & Lists tags:

Output:

HTML Table Tags

Here's a simple HTML page with the HTML Table tags:

Output:

Want a Top Software Development Job? Start Here!

How to Check a Website’s HTML Tags?

Conclusion

Our Software Development Courses Duration And Fees

Recommended Reads

Get Affiliated Certifications with Live Class programs

Full Stack Developer - MERN Stack Masters Program

Python Training

Java Certification Training