HTML Cheatsheet – A Quick Guide for Beginners & Developers

This CheatSheet covers these all topics from basic to advance concept of HTML

Content Table

1. Basic Structure
2. Text Formatting
3. Lists
4. Links & Anchors
5. Images
6. Tables
7. Forms
8. Semantic Elements
9. Multimedia
10. Meta & SEO
11. Global Attributes
12. Special Entities
13. Advanced / Misc

1. Basic Structure

<!DOCTYPE html> <!-- Declares HTML5 document -->
<html lang="en"> <!-- Root element, language is English -->
<head>
  <meta charset="UTF-8"> <!-- Character encoding -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design -->
  <title>Document Title</title> <!-- Title shown in browser tab -->
</head>
<body>
  <!-- Content goes here -->
</body>
</html>

2. Text Formatting

<h1>Heading 1</h1> <!-- Biggest heading -->
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<p>This is a paragraph.</p>

<strong>Bold</strong>
<em>Italic</em>
<u>Underline</u>
<mark>Highlighted</mark>
<small>Small text</small>
<del>Deleted</del>
<ins>Inserted</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->

Used to structure text with headings, emphasis, and formatting.

3. Lists

<!-- Ordered List -->
<ol>
  <li>First</li>
  <li>Second</li>
</ol>

<!-- Unordered List -->
<ul>
  <li>Apple</li>
  <li>Banana</li>
</ul>

<!-- Definition List -->
<dl>
  <dt>HTML</dt> <!-- Term -->
  <dd>HyperText Markup Language</dd> <!-- Definition -->
</dl>

Ordered = numbered, unordered = bullet points, definition = glossary style.

4. Links & Anchors

<a href="https://example.com">Visit Site</a>
<a href="mailto:someone@example.com">Send Email</a>
<a href="tel:+123456789">Call Now</a>
<a href="#section1">Jump to Section</a>
<a href="file.pdf" download>Download File</a>

<a> is used for navigation, email, phone, download links, and page jumps.

5. Images

<img src="image.jpg" alt="Description" width="300" height="200">

<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Fallback Image">
</picture>

Always add alt for accessibility. <picture> allows responsive images.

6. Tables

<table border="1">
  <caption>Student Data</caption>
  <thead>
    <tr>
      <th>Name</th>
      <th>Roll No</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>101</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">End of Data</td>
    </tr>
  </tfoot>
</table>

<table> organizes data into rows and columns with headers, body, and footer.

7. Forms

<form action="/submit" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

  <input type="password" name="password" placeholder="Enter password">
  <input type="email" name="email">
  <input type="number" name="age" min="18" max="100">
  <input type="date" name="dob">
  <input type="color" name="favcolor">
  <input type="range" min="0" max="10">
  <input type="file" name="upload">

  <textarea name="message" rows="4" cols="50"></textarea>

  <select name="country">
    <option value="in">India</option>
    <option value="us">USA</option>
  </select>

  <input type="radio" name="gender" value="male"> Male
  <input type="radio" name="gender" value="female"> Female

  <input type="checkbox" name="subscribe"> Subscribe

  <button type="submit">Submit</button>
  <button type="reset">Reset</button>
</form>

Forms collect user input with different fields.

8. Semantic Elements

<header>Header Content</header>
<nav>Navigation Links</nav>
<main>Main Content</main>
<article>Article Section</article>
<section>Section Content</section>
<aside>Sidebar</aside>
<footer>Footer Content</footer>

Semantic tags make content meaningful for SEO & accessibility.

9. Multimedia

<video controls width="400">
  <source src="video.mp4" type="video/mp4">
  Your browser does not support video.
</video>

<audio controls>
  <source src="audio.mp3" type="audio/mpeg">
</audio>

<iframe src="https://example.com" width="600" height="400" title="Iframe Example"></iframe>

Embed video, audio, and external sites using these tags.

10. Meta & SEO

<meta name="description" content="Cheatsheet for HTML">
<meta name="keywords" content="HTML, Cheatsheet, Web Dev">
<meta name="author" content="Your Name">
<meta http-equiv="refresh" content="30"> <!-- Refresh every 30s -->
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

Metadata improves SEO, responsiveness, and linking CSS/JS.

11. Global Attributes

id="uniqueID"
class="classname"
title="tooltip text"
style="color:red;"
hidden
draggable="true"
contenteditable="true"
tabindex="1"

These attributes work on most HTML elements for styling and behavior.

12. Special Entities

&lt;  <   (less than)
&gt;  >   (greater than)
&amp; &   (ampersand)
&quot; "   (quote)
&apos; '   (apostrophe)
&nbsp; (non-breaking space)

Used to display reserved symbols safely.

13. Advanced / Misc

<details>
  <summary>Click to Expand</summary>
  Hidden content here
</details>

<progress value="70" max="100"></progress>
<meter value="0.7">70%</meter>

<time datetime="2025-08-26">Aug 26, 2025</time>

<abbr title="Hypertext Markup Language">HTML</abbr>

<code>console.log("Hello World");</code>
<pre>
  Preformatted
    Text
</pre>

Useful for interactive content, progress bars, time, abbreviations, and code snippets.

Checkout My YouTube Channel

Checkout All CheatSheets