HTML Cheatsheet – A Quick Guide for Beginners & Developers

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

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>

This is the foundation of every HTML document. you will see this basic structure in every website without this not a single website can exist if it does then it will not rank on google and have poor structure too.

<!DOCTYPE html> → This tells browser that this is HTML5. Earlier only we use html but as html5 come after that we use Doctype to declare that this website uses latest html which is HTML5.
<html lang="en"> → It is root element, which help us to describe or set the page language, here it is set to English if you want to set page language to hindi then you will use “hi” in place of “en”.
<head> → Metadata (not shown on page). Head tag contains information about page which you will not see on any website. you can only see this when you right click on mouse choose view source page or inspect. This helps us to improve page SEO (Search Engine Optimization) if SEO is good there is higher chances that your page or website will rank on google search. Below are some commonly used meta data which we use generally use in every website.
- <meta charset="UTF-8"> → Supports all characters.
- <meta name="viewport"...> → Makes page responsive on mobile. This sets the default zoom level to 100%.
- <title> → Title shown in browser tab.
<body> → Visible content of the webpage goes here. This text appears in browser tab and in search results.

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