HTML Cheatsheet: Essential Tags and Elements

Updated:
Shun Kushigami
#HTML#Web Development#Cheatsheet#Frontend

HTML Cheatsheet: Essential Tags and Elements

HTML (HyperText Markup Language) is the foundation of web development. This cheatsheet provides a quick reference for the most commonly used HTML tags and elements with live previews.

Document Structure

<!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>
    <!-- Content goes here -->
</body>
</html>

Text Elements

Headings

<h1>Main Heading</h1>
<h2>Section Heading</h2>
<h3>Subsection Heading</h3>
<h4>Sub-subsection Heading</h4>
<h5>Minor Heading</h5>
<h6>Smallest Heading</h6>

Preview:

Main Heading

Section Heading

Subsection Heading

Sub-subsection Heading

Minor Heading
Smallest Heading

Paragraphs and Text Formatting

<p>This is a paragraph.</p>
<strong>Bold text</strong>
<em>Emphasized text</em>
<b>Bold text (visual only)</b>
<i>Italic text (visual only)</i>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>
<sub>Subscript</sub>
<sup>Superscript</sup>

Preview:

This is a paragraph.

Bold text | Emphasized text | Bold text (visual only) | Italic text (visual only)

Underlined text | Highlighted text | Small text

Deleted text | Inserted text | H2O | E=mc2

Lists

Unordered List

<ul>
    <li>First item</li>
    <li>Second item</li>
    <li>Third item</li>
</ul>

Preview:

  • First item
  • Second item
  • Third item

Ordered List

<ol>
    <li>First step</li>
    <li>Second step</li>
    <li>Third step</li>
</ol>

Preview:

  1. First step
  2. Second step
  3. Third step

Definition List

<dl>
    <dt>Term</dt>
    <dd>Definition</dd>
    <dt>Another term</dt>
    <dd>Another definition</dd>
</dl>

Preview:

HTML
HyperText Markup Language
CSS
Cascading Style Sheets

Links and Navigation

<!-- External link -->
<a href="https://example.com">Visit Example</a>

<!-- Internal link -->
<a href="about.html">About Page</a>

<!-- Email link -->
<a href="mailto:user@example.com">Send Email</a>

<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>

Preview:

Tables

<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
        </tr>
        <tr>
            <td>Cell 4</td>
            <td>Cell 5</td>
            <td>Cell 6</td>
        </tr>
    </tbody>
</table>

Preview:

Header 1 Header 2 Header 3
Cell 1 Cell 2 Cell 3
Cell 4 Cell 5 Cell 6

Forms

<form>
    <input type="text" placeholder="Username">
    <input type="password" placeholder="Password">
    <input type="email" placeholder="Email">
    <textarea placeholder="Your message"></textarea>
    <select>
        <option>Choose country</option>
        <option>United States</option>
        <option>Canada</option>
    </select>
    <button type="submit">Submit</button>
</form>

Preview:

Form Controls

Radio Buttons and Checkboxes

<!-- Radio buttons -->
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

<!-- Checkboxes -->
<input type="checkbox" id="newsletter" name="newsletter">
<label for="newsletter">Subscribe to newsletter</label>

Preview:

Semantic HTML5 Elements

<header>Header content</header>
<nav>Navigation menu</nav>
<main>Main content area</main>
<article>Article content</article>
<section>Section content</section>
<aside>Sidebar content</aside>
<footer>Footer content</footer>

Preview:

Header: Header content
Nav: Navigation menu
Main: Main content area
Article: Article content
Section: Section content
Aside: Sidebar content
Footer: Footer content

Figure and Figcaption

<figure>
    <img src="chart.jpg" alt="Sales Chart">
    <figcaption>2012 Sales Performance</figcaption>
</figure>

Preview:

[Image Placeholder]
2012 Sales Performance

Common Attributes

  • id="unique-identifier" - Unique identifier for element
  • class="class-name" - CSS class for styling
  • style="css-properties" - Inline CSS styling
  • title="tooltip-text" - Tooltip text on hover
  • data-*="value" - Custom data attributes

Block vs Inline Elements

Block Elements

<div>Block element (takes full width)</div>
<p>Paragraph (block element)</p>
<h1>Heading (block element)</h1>

Inline Elements

<span>Inline element</span>
<a href="#">Link (inline)</a>
<strong>Bold text (inline)</strong>

Preview:

Block element (takes full width)

Paragraph (block element)

Inline element Link (inline) Bold text (inline)

Tips for Better HTML

  1. Use semantic elements - Choose tags based on meaning, not appearance
  2. Always include alt text for images for accessibility
  3. Validate your HTML using online validators
  4. Use proper nesting - ensure tags are properly closed
  5. Keep it simple - don't over-complicate your markup

This cheatsheet covers the most essential HTML elements with live previews. The visual examples help you understand how each element renders in the browser. Keep it handy for quick reference while coding!

Back to Blog