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 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:
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 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:
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 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:
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:
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.