HTML Cheat Sheet
Use this HTML cheat sheet as a quick reference for common tags, attributes, page structure, forms, tables, media, and semantic elements.
Basic HTML Page Template
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page Title</title>
</head>
<body>
<h1>Hello, HTML</h1>
<p>This is a basic HTML page.</p>
</body>
</html>
Core Document Tags
<!DOCTYPE html>
Defines the document as HTML5.
Learn HTML on Mimo
HTML
<!DOCTYPE html>
<html>
The root element of the page.
HTML
<html lang="en">
<head>
Holds metadata, the page title, CSS links, and other information that does not appear as main page content.
HTML
<head>
<title>My Page</title>
</head>
<body>
Holds the visible content of the page.
HTML
<body>
<h1>Welcome</h1>
</body>
<title>
Sets the browser tab title.
HTML
<title>My Page</title>
<meta>
Adds metadata such as character encoding, description, and viewport settings.
HTML
<meta charset="UTF-8">
<link>
Links external files, most often CSS files.
HTML
<link rel="stylesheet" href="style.css">
<script>
Adds JavaScript to the page.
HTML
<script src="app.js"></script>
Head Metadata
HTML
<head>
<meta charset="UTF-8">
<meta name="description" content="A beginner-friendly HTML page.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Cheat Sheet</title>
<link rel="stylesheet" href="styles.css">
</head>
Useful Metadata
charset="UTF-8"supports common characters and symbols.name="description"adds a search-friendly page summary.name="viewport"helps pages display properly on mobile devices.<title>sets the browser tab title and often appears in search results.<link rel="stylesheet">connects a CSS file.
Headings
Use headings to structure content, not just to make text larger.
HTML
<h1>Main page heading</h1>
<h2>Section heading</h2>
<h3>Subsection heading</h3>
<h4>Smaller subsection</h4>
<h5>Minor heading</h5>
<h6>Smallest heading</h6>
Heading Uses
<h1>is the main page heading, usually one per page.<h2>marks main sections.<h3>marks subsections inside H2 sections.<h4>to<h6>create deeper content levels.
Text Tags
Paragraph
HTML
<p>This is a paragraph.</p>
Important Text
HTML
<strong>This text is important.</strong>
Emphasized Text
HTML
<em>This text is emphasized.</em>
Small Text
HTML
<small>This is small supporting text.</small>
Highlighted Text
HTML
<mark>This text is highlighted.</mark>
Line Break
HTML
<p>First line<br>Second line</p>
Thematic Break
HTML
<hr>
Links
Basic Link
HTML
<a href="https://example.com">Visit Example</a>
Open Link in a New Tab
HTML
<a href="https://example.com" target="_blank" rel="noopener">
Open Example
</a>
Link to Another Page
HTML
<a href="about.html">About</a>
Email Link
HTML
<a href="mailto:hello@example.com">Email us</a>
Phone Link
HTML
<a href="tel:+123456789">Call us</a>
Useful Link Attributes
hrefsets the destination.target="_blank"opens the link in a new tab.rel="noopener"improves new-tab security.mailto:opens an email app.tel:starts a phone call on supported devices.
Images
Basic Image
HTML
<img src="images/profile.jpg" alt="Profile photo of Alex">
Image with Width and Height
HTML
<img
src="images/product.jpg"
alt="Blue running shoes"
width="400"
height="300"
>
Decorative Image
HTML
<img src="images/divider.png" alt="">
Lazy-Loaded Image
HTML
<img src="images/course.jpg" alt="Person coding on a laptop" loading="lazy">
Useful Image Attributes
srcsets the image file path or URL.altdescribes the image.widthsets the image width.heightsets the image height.loading="lazy"delays loading until the image is needed.
Lists
Unordered List
HTML
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Ordered List
HTML
<ol>
<li>Create a file</li>
<li>Add HTML</li>
<li>Open it in a browser</li>
</ol>
Description List
HTML
<dl>
<dt>HTML</dt>
<dd>The markup language used to structure web pages.</dd>
<dt>CSS</dt>
<dd>The language used to style web pages.</dd>
</dl>
List Tags
<ul>creates an unordered list.<ol>creates an ordered list.<li>creates a list item.<dl>creates a description list.<dt>marks a term.<dd>marks a description.
Semantic Layout Tags
HTML
<header>
<h1>Website Name</h1>
</header>
<nav>
<a href="/">Home</a>
<a href="/about.html">About</a>
<a href="/contact.html">Contact</a>
</nav>
<main>
<section>
<h2>Featured Courses</h2>
<p>Start learning web development today.</p>
</section>
</main>
<footer>
<p>© 2026 Website Name</p>
</footer>
Common Semantic Tags
<header>contains introductory page or section content.<nav>contains navigation links.<main>contains the main page content.<section>groups related content.<article>marks standalone content, such as a blog post.<aside>contains related side content.<footer>contains footer content.<div>is a generic container with no semantic meaning.
Articles, Sections, and Divs
Article
Use <article> for content that can stand alone.
HTML
<article>
<h2>What Is HTML?</h2>
<p>HTML structures content on the web.</p>
</article>
Section
Use <section> for grouped content inside a page.
HTML
<section>
<h2>Course Benefits</h2>
<p>Learn by building practical projects.</p>
</section>
Div
Use <div> when no meaningful semantic tag fits.
HTML
<div class="card">
<h2>HTML Basics</h2>
<p>Learn the structure of web pages.</p>
</div>
Forms
Basic Form
HTML
<form action="/submit" method="post">
<label for="email">Email</label>
<input type="email" id="email" name="email">
<button type="submit">Subscribe</button>
</form>
Form Tags
<form>wraps form fields.<label>describes a form field.<input>creates an input field.<textarea>creates a multi-line text field.<select>creates a dropdown.<option>creates a dropdown option.<button>creates a clickable button.<fieldset>groups related fields.<legend>adds a label for a field group.
Common Input Types
HTML
<input type="text" name="username">
<input type="email" name="email">
<input type="password" name="password">
<input type="number" name="age">
<input type="date" name="birthday">
<input type="checkbox" name="subscribe">
<input type="radio" name="plan" value="basic">
<input type="file" name="avatar">
<input type="submit" value="Send">
Input Type Uses
textcreates a short text field.emailcreates an email field.passwordhides entered text.numbercreates a number field.datecreates a date picker.checkboxcreates an on/off choice.radiocreates one choice from a group.filecreates a file upload field.submitcreates a submit control.
Useful Form Attributes
HTML
<input
type="email"
id="email"
name="email"
placeholder="you@example.com"
required
>
Common Form Attributes
idconnects an input to a label.nameidentifies the submitted form value.placeholderadds hint text inside the field.requiredmakes the field required.valuesets a default value.disableddisables the field.readonlymakes the field read-only.minsets a minimum value.maxsets a maximum value.maxlengthlimits text length.
Textareas and Dropdowns
Textarea
HTML
<label for="message">Message</label>
<textarea id="message" name="message"></textarea>
Dropdown
HTML
<label for="language">Choose a language</label>
<select id="language" name="language">
<option value="html">HTML</option>
<option value="css">CSS</option>
<option value="javascript">JavaScript</option>
</select>
Grouped Radio Buttons
HTML
<fieldset>
<legend>Choose a plan</legend>
<label>
<input type="radio" name="plan" value="basic">
Basic
</label>
<label>
<input type="radio" name="plan" value="pro">
Pro
</label>
</fieldset>
Buttons
HTML
<button type="button">Click me</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Button Types
buttoncreates a generic button.submitsubmits a form.resetresets form fields.
Use <button> for actions. Use <a> for navigation.
Tables
Use tables for structured data, not page layout.
HTML
<table>
<caption>Team Members</caption>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alex</td>
<td>Developer</td>
</tr>
<tr>
<td>Sam</td>
<td>Designer</td>
</tr>
</tbody>
</table>
Table Tags
<table>creates a table.<caption>adds a table title or description.<thead>groups header rows.<tbody>groups body rows.<tfoot>groups footer rows.<tr>creates a table row.<th>creates a header cell.<td>creates a data cell.
Audio and Video
Audio
HTML
<audio controls>
<source src="audio/lesson.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Video
HTML
<video controls width="640">
<source src="videos/demo.mp4" type="video/mp4">
Your browser does not support the video element.
</video>
Useful Media Attributes
controlsshows browser playback controls.autoplaystarts playback automatically.mutedmutes audio.looprepeats playback.posteradds a preview image for video.widthsets the video width.
Embeds and Iframes
HTML
<iframe
src="https://example.com"
title="Example website"
width="600"
height="400">
</iframe>
Useful Iframe Attributes
srcsets the embedded page URL.titledescribes the iframe for accessibility.widthsets the frame width.heightsets the frame height.loading="lazy"delays loading.
Lazy-Loaded Iframe
HTML
<iframe
src="https://example.com"
title="Example page"
loading="lazy">
</iframe>
HTML Entities
Use entities for reserved characters and common symbols.
Common Entities
<is written as<>is written as>&is written as&"is written as"'is written as'- © is written as
© - ® is written as
® - € is written as
€ - A non-breaking space is written as
Example:
HTML
<p>Use <h1> for the main heading.</p>
Global Attributes
Global attributes work on most HTML elements.
HTML
<p id="intro" class="lead" title="Intro text">Welcome to the page.</p>
Common Global Attributes
idcreates a unique identifier.classcreates a reusable CSS or JavaScript hook.styleadds inline CSS.titleadds extra hover text.hiddenhides an element.tabindexcontrols keyboard focus order.data-*stores custom data.aria-*adds accessibility information.
Custom Data Attribute
HTML
<button data-user-id="42">View Profile</button>
Accessibility Basics
Use Semantic HTML First
HTML
<button type="button">Open menu</button>
Avoid clickable <div> elements.
HTML
<div onclick="openMenu()">Open menu</div>
Better:
HTML
<button type="button" onclick="openMenu()">Open menu</button>
Label Form Fields
HTML
<label for="username">Username</label>
<input type="text" id="username" name="username">
Add Useful Alt Text
HTML
<img src="chart.png" alt="Chart showing monthly revenue growth">
Use Empty Alt Text for Decorative Images
HTML
<img src="decorative-line.png" alt="">
Comments
HTML
<!-- This is an HTML comment -->
Use comments to explain sections or temporary notes.
HTML
<!-- Main navigation -->
<nav>
<a href="/">Home</a>
<a href="/courses.html">Courses</a>
</nav>
Do not put private information in HTML comments. Users can view page source.
Connecting CSS
External CSS
HTML
<link rel="stylesheet" href="styles.css">
Internal CSS
HTML
<style>
body {
font-family: Arial, sans-serif;
}
</style>
Inline CSS
HTML
<p style="color: blue;">Blue text</p>
External CSS is best for most projects because it keeps structure and styles separate.
Connecting JavaScript
External JavaScript
HTML
<script src="script.js"></script>
Inline JavaScript
HTML
<script>
console.log("Page loaded");
</script>
Place scripts near the end of <body> when they depend on page elements.
HTML
<body>
<button id="button">Click me</button>
<script src="script.js"></script>
</body>
Common Page Pattern
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="A simple HTML page example.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Course Landing Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Learn HTML</h1>
<p>Build the structure of web pages.</p>
</header>
<nav aria-label="Main navigation">
<a href="/">Home</a>
<a href="/courses.html">Courses</a>
<a href="/contact.html">Contact</a>
</nav>
<main>
<section>
<h2>Featured Lesson</h2>
<article>
<h3>HTML Basics</h3>
<p>Learn tags, attributes, and page structure.</p>
<a href="/lessons/html-basics.html">Start lesson</a>
</article>
</section>
<section>
<h2>Subscribe</h2>
<form action="/subscribe" method="post">
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<button type="submit">Subscribe</button>
</form>
</section>
</main>
<footer>
<p>© 2026 Example Website</p>
</footer>
<script src="script.js"></script>
</body>
</html>
Common Mistakes
Missing the alt Attribute
HTML
<img src="image.jpg">
Better:
HTML
<img src="image.jpg" alt="Person learning HTML on a laptop">
Using a Link as a Button
HTML
<a href="#" onclick="saveForm()">Save</a>
Better:
HTML
<button type="button" onclick="saveForm()">Save</button>
Using a Table for Layout
HTML
<table>
<tr>
<td>Sidebar</td>
<td>Main content</td>
</tr>
</table>
Better: use semantic HTML and CSS layout.
HTML
<main class="layout">
<aside>Sidebar</aside>
<section>Main content</section>
</main>
Forgetting Form name Attributes
HTML
<input type="email" id="email">
Better:
HTML
<input type="email" id="email" name="email">
Forms need name values to submit data correctly.
Quick Reference
Create a Page
Use:
HTML
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Add a Heading
Use:
HTML
<h1>Main heading</h1>
Add Text
Use:
HTML
<p>Paragraph text</p>
Add a Link
Use:
HTML
<a href="https://example.com">Link text</a>
Add an Image
Use:
HTML
<img src="image.jpg" alt="Image description">
Add a List
Use:
HTML
<ul>
<li>Item</li>
</ul>
Add a Form
Use:
HTML
<form>
<label for="email">Email</label>
<input type="email" id="email" name="email">
</form>
Add a Button
Use:
HTML
<button type="button">Click me</button>
Add a Table
Use:
HTML
<table>
<tr>
<th>Heading</th>
</tr>
<tr>
<td>Value</td>
</tr>
</table>
Link CSS
Use:
HTML
<link rel="stylesheet" href="styles.css">
Add JavaScript
Use:
HTML
<script src="script.js"></script>
Join 35M+ people learning for free on Mimo
35M+
4.8 out of 5 across 1M+ reviews
Check us out on Apple AppStore, Google Play Store, and Trustpilot