Beginner-friendly guide
HTML Cheat Sheet
A clean, simple reference for the most important HTML tags, attributes, and structure concepts.
Easy to scan
Simple examples
Perfect for beginners
HTML Document Structure
This is the basic skeleton of every web page. It tells the browser where the page starts and where the content goes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document Title</title>
</head>
<body>
<!-- Your content here -->
</body>
</html>
HTML Attributes
Attributes add extra details to tags. They help describe how an element should work or look.
Example: href tells a link where to go.
id
class
href
src
alt
title
target
type
value
placeholder
<a href="https://example.com" target="_blank" title="Visit Example">Link</a>
<img src="photo.jpg" alt="Mountain view" width="300" height="200">
<input type="text" name="username" placeholder="Enter your name" required>
Common Attribute Examples
| Attribute | Description | Example |
|---|---|---|
| id | Unique identifier for an element | <div id="main"></div> |
| class | Applies one or more CSS classes | <p class="intro"></p> |
| href | Specifies the URL for a link | <a href="about.html">About</a> |
| src | Points to the source file of an image or media | <img src="logo.png" alt="Logo"> |
| alt | Provides alternative text for images | <img src="cat.jpg" alt="A cat"> |
| placeholder | Shows hint text in form inputs | <input type="text" placeholder="Name"> |
| required | Makes a form field mandatory | <input type="email" required> |
Text Elements
Use these tags to add headings, paragraphs, and emphasis to your text.
Headings
<h1>
<h2>
<h3>
<h4>
<h5>
<h6>
<h1>Level 1 Heading</h1> <h2>Level 2 Heading</h2> <h3>Level 3 Heading</h3>
Paragraphs and Text Formatting
<p>
<br>
<hr>
<strong>
<em>
<b>
<i>
<u>
<mark>
<small>
<del>
<ins>
<sub>
<sup>
<code>
<pre>
<p>This is a paragraph.</p> <p>This is a <strong>bold</strong> text and <em>italic</em> text.</p> <p>This sentence will break <br> onto a new line.</p> <hr> <p><mark>Highlighted</mark> text and <code>code</code> example.</p> <p>H<sub>2</sub>O and x<sup>2</sup></p>
Lists
Use lists when you want to show items in a clear order or group them together.
Unordered List
<ul>
<li>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
Ordered List
<ol>
<li>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
Definition List
<dl>
<dt>
<dd>
<dl>
<dt>Term 1</dt>
<dd>Definition 1</dd>
<dt>Term 2</dt>
<dd>Definition 2</dd>
</dl>
Links
Use links to send visitors to another page, file, or section on the same page.
<a>
<!-- External link --> <a href="https://www.example.com">Visit Example</a> <!-- Open in new tab --> <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">Open in New Tab</a> <!-- Email link --> <a href="mailto:contact@example.com">Send Email</a> <!-- Phone link --> <a href="tel:+1234567890">Call Us</a> <!-- Internal page link --> <a href="about.html">About Page</a> <!-- Link to section on same page --> <a href="#section-id">Jump to Section</a>
Images and Media
Use images, audio, and video to make your page more interesting and useful.
<img>
<figure>
<figcaption>
<video>
<audio>
<source>
<iframe>
<!-- Basic image -->
<img src="image.jpg" alt="Description of image">
<!-- Image with width and height -->
<img src="image.jpg" alt="Description of image" width="300" height="200">
<!-- Figure with caption -->
<figure>
<img src="image.jpg" alt="Description of image">
<figcaption>Fig.1 - Image caption text</figcaption>
</figure>
<!-- Video -->
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
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 element.
</audio>
<!-- Iframe for embedding content -->
<iframe src="https://www.example.com" width="600" height="400"></iframe>
Tables
Use tables to show information in rows and columns, such as prices or schedules.
<table>
<caption>
<thead>
<tbody>
<tfoot>
<tr>
<th>
<td>
<table>
<caption>Monthly Savings</caption>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$150</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total</td>
<td>$250</td>
</tr>
</tfoot>
</table>
Forms
Use forms when you want visitors to enter information, such as their name or email.
<form>
<label>
<input>
<textarea>
<select>
<option>
<button>
<fieldset>
<legend>
<form action="/submit" method="post">
<fieldset>
<legend>Personal Information</legend>
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
</div>
<div>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</div>
<div>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>
<div>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
</div>
<div>
<label for="country">Country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>
</div>
<div>
<p>Gender:</p>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="radio" id="other" name="gender" value="other">
<label for="other">Other</label>
</div>
<div>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
</div>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
</fieldset>
</form>
Common Input Types
| Type | Description | Example |
|---|---|---|
| text | Single-line text input | <input type="text" name="username"> |
| password | Password field (characters are masked) | <input type="password" name="pwd"> |
| Email input with validation | <input type="email" name="email"> | |
| number | Numeric input | <input type="number" name="quantity" min="1" max="5"> |
| checkbox | Checkbox for multiple selections | <input type="checkbox" name="vehicle" value="Bike"> |
| radio | Radio button for single selection | <input type="radio" name="gender" value="female"> |
| date | Date picker | <input type="date" name="birthday"> |
| file | File upload field | <input type="file" name="myFile"> |
| submit | Submit button | <input type="submit" value="Submit"> |
| reset | Reset button | <input type="reset" value="Reset"> |
Semantic HTML5 Elements
These tags help give your page a clear structure. They make your code easier to read and help screen readers understand the page.
<header>
<nav>
<main>
<section>
<article>
<aside>
<footer>
<figure>
<figcaption>
<header>
<h1>Website Title</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Section Title</h2>
<p>Section content...</p>
<article>
<h3>Article Title</h3>
<p>Article content...</p>
</article>
</section>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</aside>
</main>
<footer>
<p>© 2025 My Website</p>
</footer>
Special Characters and Entities
Use these when you need symbols like < or & that are special in HTML.
| Character | Entity | Description |
|---|---|---|
| < | < | Less than |
| > | > | Greater than |
| & | & | Ampersand |
| " | " | Double quotation mark |
| ' | ' | Single quotation mark (apostrophe) |
| © | © | Copyright symbol |
| ® | ® | Registered trademark |
| ™ | ™ | Trademark |
| | Non-breaking space | |
| € | € | Euro |
| £ | £ | Pound |
| ¥ | ¥ | Yen |