Comprehensive HTML Cheatsheet
Document Structure
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Page description">
<meta name="keywords" content="keywords, for, search">
<meta name="author" content="Author Name">
<title>Page Title</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
Text Content
Headings
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Sub-subheading</h3>
<h4>Fourth level</h4>
<h5>Fifth level</h5>
<h6>Sixth level</h6>
Paragraphs and Text Formatting
<p>Regular paragraph text</p>
<p><strong>Bold text</strong></p>
<p><em>Italic text</em></p>
<p><mark>Highlighted text</mark></p>
<p><small>Small text</small></p>
<p><del>Deleted text</del></p>
<p><ins>Inserted text</ins></p>
<p><sub>Subscript</sub> and <sup>superscript</sup></p>
<p><code>Code text</code></p>
<p><pre>Preformatted
text</pre></p>
<p><kbd>Keyboard input</kbd></p>
<p><abbr title="Abbreviation">Abbr.</abbr></p>
<p><q>Short quote</q></p>
<blockquote>Long quote</blockquote>
Lists
Unordered List
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Description List
<dl>
<dt>Term</dt>
<dd>Definition</dd>
<dt>Another term</dt>
<dd>Another definition</dd>
</dl>
Links and Navigation
<!-- Basic link -->
<a href="https://example.com">External link</a>
<!-- Internal link -->
<a href="/about">Internal link</a>
<!-- Link to section -->
<a href="#section">Section link</a>
<!-- Email link -->
<a href="mailto:email@example.com">Email link</a>
<!-- Phone link -->
<a href="tel:+1234567890">Phone link</a>
<!-- Download link -->
<a href="file.pdf" download>Download link</a>
<!-- Link with target -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
Opens in new tab
</a>
<!-- Navigation -->
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</nav>
Images and Media
Images
<!-- Basic image -->
<img src="image.jpg" alt="Description">
<!-- Image with size -->
<img src="image.jpg" alt="Description" width="300" height="200">
<!-- Responsive image -->
<img src="image.jpg" alt="Description" srcset="small.jpg 300w,
medium.jpg 600w,
large.jpg 900w"
sizes="(max-width: 320px) 280px,
(max-width: 640px) 580px,
880px">
<!-- Picture element -->
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="Description">
</picture>
<!-- Figure with caption -->
<figure>
<img src="image.jpg" alt="Description">
<figcaption>Image caption</figcaption>
</figure>
Video
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
Forms
Basic Form Structure
<form action="/submit" method="POST">
<!-- Form elements go here -->
<button type="submit">Submit</button>
</form>
Input Types
<!-- Text input -->
<input type="text" name="username" placeholder="Enter username">
<!-- Password -->
<input type="password" name="password" required>
<!-- Email -->
<input type="email" name="email">
<!-- Number -->
<input type="number" name="quantity" min="0" max="100" step="1">
<!-- Date -->
<input type="date" name="birthday">
<!-- Time -->
<input type="time" name="meeting-time">
<!-- Color -->
<input type="color" name="favorite-color">
<!-- File -->
<input type="file" name="document" accept=".pdf,.doc">
<!-- Checkbox -->
<input type="checkbox" name="subscribe" checked>
<!-- Radio buttons -->
<input type="radio" name="gender" value="male">
<input type="radio" name="gender" value="female">
<!-- Range -->
<input type="range" name="volume" min="0" max="100">
<!-- Hidden -->
<input type="hidden" name="user-id" value="123">
Form Elements
<!-- Text area -->
<textarea name="message" rows="4" cols="50"></textarea>
<!-- Select dropdown -->
<select name="country">
<option value="">Select a country</option>
<option value="us">United States</option>
<option value="uk">United Kingdom</option>
</select>
<!-- Datalist -->
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
<!-- Fieldset and Legend -->
<fieldset>
<legend>Personal Information</legend>
<!-- Form elements -->
</fieldset>
<!-- Label -->
<label for="username">Username:</label>
<input type="text" id="username" name="username">
Tables
<table>
<caption>Table Caption</caption>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Footer</td>
</tr>
</tfoot>
</table>
Semantic Elements
<header>Header content</header>
<nav>Navigation content</nav>
<main>
<article>
<section>Section content</section>
<aside>Aside content</aside>
</article>
</main>
<footer>Footer content</footer>
Metadata and SEO
<!-- Basic SEO -->
<meta name="description" content="Page description">
<meta name="keywords" content="keywords, separated, by, commas">
<meta name="author" content="Author Name">
<!-- Open Graph -->
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="image.jpg">
<meta property="og:url" content="https://example.com">
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:title" content="Title">
<meta name="twitter:description" content="Description">
<meta name="twitter:image" content="image.jpg">