HTML Cheatsheet
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>
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>console.log("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>
<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
<img src="image.jpg" 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="https://www.example.com" 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>
</tfoot>
</table>
Links
<a href="https://www.codewithharry.com" target="_blank" rel="noopener">Visit
CodeWithHarry</a>
<a href="mailto:
[email protected]">Send Email</a>
<a href="#section1">Jump to Section</a>
Forms & Inputs
<form action="/action.php" 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>
<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
<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="styles.css">
JavaScript Integration
<script>
console.log("Hello, World!");
</script>
<script src="script.js"></script>
Comments
<!-- This is a comment -->
Accessibility
<img src="dog.jpg" 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.
