Introduction
HTML is the foundation of every website on the internet. Whether you want to become a web developer, create your own website, or learn front-end development, understanding HTML is the first step.
HTML stands for HyperText Markup Language. It is used to structure web pages by defining headings, paragraphs, images, links, forms, tables, and many other elements.
Although modern websites also use CSS and JavaScript, HTML remains the core building block of web development.
This comprehensive cheat sheet covers the most important HTML tags beginners should know, along with their purposes and examples.
What Is HTML?
HTML is a markup language used to describe the structure of a webpage.
A browser reads HTML code and displays content accordingly.
Simple example:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first webpage.</p>
</body>
</html>
Every webpage starts with HTML.
Basic HTML Structure Tags
These tags form the foundation of every HTML document.
| Tag | Purpose |
|---|---|
<html> | Root HTML document |
<head> | Contains metadata |
<title> | Browser tab title |
<body> | Visible webpage content |
<meta> | Metadata information |
<link> | External resources |
<style> | Internal CSS |
<script> | JavaScript code |
<!DOCTYPE html> | Defines HTML5 document |
Heading Tags
Headings help organize content.
<h1>Main Heading</h1>
<h2>Sub Heading</h2>
<h3>Section Heading</h3>
Available heading tags:
| Tag |
|---|
<h1> |
<h2> |
<h3> |
<h4> |
<h5> |
<h6> |
<h1> is the most important heading.
Text Formatting Tags
These tags help style text content.
| Tag | Purpose |
|---|---|
<p> | Paragraph |
<b> | Bold text |
<strong> | Important text |
<i> | Italic text |
<em> | Emphasized text |
<u> | Underline text |
<mark> | Highlight text |
<small> | Smaller text |
<del> | Deleted text |
<ins> | Inserted text |
<sub> | Subscript |
<sup> | Superscript |
<br> | Line break |
<hr> | Horizontal line |
Example:
<p>This is a paragraph.</p>
<strong>Important Text</strong>
Link Tags
Links connect web pages.
Anchor Tag
<a href="https://example.com">Visit Website</a>
Common attributes:
| Attribute | Purpose |
|---|---|
| href | Destination URL |
| target | Open behavior |
| title | Tooltip text |
Image Tags
Images are displayed using:
<img src="image.jpg" alt="Example Image">
Important attributes:
| Attribute | Purpose |
|---|---|
| src | Image path |
| alt | Alternative text |
| width | Image width |
| height | Image height |
List Tags
Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
Ordered List
<ol>
<li>First</li>
<li>Second</li>
</ol>
List-related tags:
| Tag |
|---|
<ul> |
<ol> |
<li> |
<dl> |
<dt> |
<dd> |
Table Tags
Tables display structured data.
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
Common table tags:
| Tag | Purpose |
|---|---|
<table> | Table |
<tr> | Row |
<th> | Header cell |
<td> | Data cell |
<thead> | Table header |
<tbody> | Table body |
<tfoot> | Table footer |
Form Tags
Forms collect user input.
<form>
<input type="text">
<button>Submit</button>
</form>
Important form tags:
| Tag |
|---|
<form> |
<input> |
<textarea> |
<button> |
<select> |
<option> |
<label> |
<fieldset> |
<legend> |
Input Types
Common input types:
<input type="text">
<input type="email">
<input type="password">
Popular types:
text
email
password
number
date
checkbox
radio
file
color
range
submit
Semantic HTML Tags
Semantic tags improve structure and SEO.
| Tag | Purpose |
|---|---|
<header> | Header section |
<nav> | Navigation |
<main> | Main content |
<section> | Content section |
<article> | Independent article |
<aside> | Sidebar |
<footer> | Footer section |
Example:
<header>
<nav>Menu</nav>
</header>
Multimedia Tags
Audio
<audio controls>
</audio>
Video
<video controls>
</video>
Useful tags:
| Tag |
|---|
<audio> |
<video> |
<source> |
<track> |
Layout Tags
Used for organizing content.
| Tag |
|---|
<div> |
<span> |
<container> (framework-specific) |
Example:
<div>
Content Here
</div>
HTML5 Advanced Tags
Modern HTML introduces additional elements.
| Tag |
|---|
<canvas> |
<svg> |
<figure> |
<figcaption> |
<details> |
<summary> |
<dialog> |
<progress> |
<meter> |
<template> |
Common HTML Attributes
Attributes provide additional information.
Example:
<a href="#" class="btn">Link</a>
Popular attributes:
| Attribute |
|---|
| id |
| class |
| style |
| href |
| src |
| alt |
| title |
| value |
| name |
| placeholder |
| disabled |
| readonly |
| required |
Most Frequently Used HTML Tags
If you're just starting out, focus on learning:
<html><head><body><h1>to<h6><p><a><img><div><span><ul><ol><li><table><form><input><button><header><section><article><footer>
These tags are used in almost every website.
Best Practices for Beginners
When writing HTML:
Use semantic tags whenever possible.
Keep code properly indented.
Use meaningful alt text for images.
Write descriptive page titles.
Validate your HTML regularly.
Avoid unnecessary nested elements.
Learn HTML before moving to CSS and JavaScript.
Following these practices helps create cleaner and more maintainable websites.
Conclusion
HTML is the backbone of web development. By understanding the most important tags and how they work together, you can create structured, accessible, and SEO-friendly webpages.
While this cheat sheet covers over 100 commonly used HTML elements, beginners should focus on mastering the core tags first. Once you become comfortable with HTML, learning CSS and JavaScript becomes much easier.
Keep practicing, build small projects, and gradually expand your knowledge. Every professional web developer started by learning these same HTML fundamentals.
Frequently Asked Questions
1. What does HTML stand for?
HTML stands for HyperText Markup Language.
2. Is HTML a programming language?
No. HTML is a markup language used to structure webpage content.
3. How many HTML tags exist?
HTML5 includes more than 100 commonly used tags and elements.
4. Should I learn HTML before CSS?
Yes. HTML should be learned first because CSS styles the structure created by HTML.
5. Can I build a website using only HTML?
Yes. However, most modern websites also use CSS for styling and JavaScript for interactivity.
