05/02/2026, 20:38 HTML Cheatsheet | Blog | CodeWithHarry
</>CodeWithHarry
Start Learning Tutorials
HTML Cheatsheet
"HTML Cheatsheet for all the HTML beginners"
By CodeWithHarry Updated: April 5, 2025
Boilerplate
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
[Link] 1/9
05/02/2026, 20:38 HTML Cheatsheet | Blog | CodeWithHarry
Headings
There are six levels of headings. <h1> is the most important (largest), and <h6> is the least
important (smallest).
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Containers
Container elements group or hold other content.
<div>This is a block container (div)</div>
<span>This is an inline container (span)</span>
<p>This is a paragraph</p>
<pre>Preserves formatting and spaces</pre>
<code>[Link]("Code snippet")</code>
<blockquote>A block quotation of text</blockquote>
Text Formatting
<b>Bold text</b>
<strong>Important text (semantic)</strong>
<i>Italic text</i>
<em>Emphasized text (semantic)</em>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Smaller text</small>
[Link] 2/9
05/02/2026, 20:38 HTML Cheatsheet | Blog | CodeWithHarry
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>
Lists
Ordered List
<ol>
<li>First</li>
<li>Second</li>
</ol>
Unordered List
<ul>
<li>Item A</li>
<li>Item B</li>
</ul>
Definition List
<dl>
<dt>HTML</dt>
<dd>HyperText Markup Language</dd>
</dl>
Media
[Link] 3/9
05/02/2026, 20:38 HTML Cheatsheet | Blog | CodeWithHarry
<img src="[Link]" alt="Description" width="300" height="200">
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
<video width="480" height="320" controls>
<source src="video.mp4" type="video/mp4">
</video>
<iframe src="[Link] width="600" height="400"></iframe>
Tables
<table border="1">
<caption>Sample Table</caption>
<thead>
<tr>
<th>Column 1</th>
<th colspan="2">Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">Rowspan</td>
<td>Data A</td>
<td>Data B</td>
</tr>
<tr>
<td>Data C</td>
<td>Data D</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td colspan="2">100</td>
</tr>
[Link] 4/9
05/02/2026, 20:38 HTML Cheatsheet | Blog | CodeWithHarry
</tfoot>
</table>
Links
<a href="[Link] target="_blank"
rel="noopener">Visit CodeWithHarry</a>
<a href="[Link] Email</a>
<a href="#section1">Jump to Section</a>
Forms & Inputs
<form action="/[Link]" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br>
<input type="password" name="password" placeholder="Enter Password"><br>
<input type="checkbox" name="subscribe" value="yes"> Subscribe<br>
<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female<br>
<select name="country">
<option value="us">USA</option>
<option value="ca">Canada</option>
</select><br>
<textarea name="comments" rows="4" cols="30"></textarea><br>
<input type="file" name="resume"><br>
<input type="number" name="age" min="18" max="100"><br>
<input type="range" name="volume" min="0" max="100"><br>
<input type="date" name="dob"><br>
[Link] 5/9
05/02/2026, 20:38 HTML Cheatsheet | Blog | CodeWithHarry
<input type="email" name="email"><br>
<input type="url" name="website"><br>
<input type="search" name="query"><br>
<button type="submit">Submit</button>
</form>
Characters & Symbols
© ©
< <
> >
& &
$ $
™ ™
® ®
(non-breaking space)
Semantic Elements
<header>Page header</header>
<nav>Navigation links</nav>
<section>Section of content</section>
<article>Independent article</article>
<aside>Sidebar content</aside>
<footer>Page footer</footer>
<main>Main content</main>
Meta Tags
[Link] 6/9
05/02/2026, 20:38 HTML Cheatsheet | Blog | CodeWithHarry
<meta charset="UTF-8">
<meta name="description" content="HTML Cheatsheet">
<meta name="keywords" content="HTML, Cheatsheet, Code">
<meta name="author" content="Your Name">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
CSS Integration
<style>
body { font-family: Arial; background-color: #f0f0f0; }
</style>
<link rel="stylesheet" href="[Link]">
JavaScript Integration
<script>
[Link]("Hello, World!");
</script>
<script src="[Link]"></script>
Comments
<!-- This is a comment -->
Accessibility
[Link] 7/9
05/02/2026, 20:38 HTML Cheatsheet | Blog | CodeWithHarry
<img src="[Link]" alt="Brown dog running in a park">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
Responsive Design
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media (max-width: 600px) {
body { font-size: 16px; }
}
</style>
Beginner Tips
1. Use a modern editor (VS Code) with Emmet.
2. Indent and close all tags properly.
3. Practice using semantic elements.
4. Always include alt for images.
5. Learn CSS + JavaScript alongside HTML.
6. Test your HTML in multiple browsers.
7. Use the W3C Validator to check for errors.
Download HTML CheatSheet
Tags
Share
html cheatsheet
[Link] 8/9
05/02/2026, 20:38 HTML Cheatsheet | Blog | CodeWithHarry
Main Learn
Home Courses
Contact Tutorials
Work With Us Notes
My Gear
Legal Social
Terms GitHub
Privacy Twitter (X)
Refund YouTube
Facebook
Made with ❤️ and ☕ in India
[Link] 9/9