HTML Cheat Sheet

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>Level 1 Heading</h1>
<h2>Level 2 Heading</h2>
<h3>Level 3 Heading</h3>

Paragraphs and Text Formatting

<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>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>

Definition List

<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.

<!-- 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>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 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	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>
    <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