HTML Cheatsheet

Download PDF

Learn HTML with Hands-On Labs

Learn HTML web structure through hands-on labs and real-world scenarios. LabEx provides comprehensive HTML courses covering essential elements, semantic markup, forms, media integration, and modern HTML5 features. Master efficient web page structure and content organization for modern web development workflows.

HTML Document Structure

Basic HTML Document: <!DOCTYPE html>

Every HTML document starts with a document type declaration and follows a standard 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>
    <!-- Page content goes here -->
  </body>
</html>
Quiz

Sign in to answer this quiz and track your learning progress

What is the purpose of ?
It declares the document type and HTML version
It creates a new HTML element
It links to an external stylesheet
It sets the page title

Head Elements: <head>

The head section contains metadata about the document.

<!-- Character encoding -->
<meta charset="UTF-8" />
<!-- Viewport for responsive design -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Page description -->
<meta name="description" content="Page description" />
<!-- Link to CSS -->
<link rel="stylesheet" href="styles.css" />
<!-- Link to favicon -->
<link rel="icon" href="favicon.ico" />

HTML Comments: <!-- -->

Comments are not displayed but help document your code.

<!-- This is a comment -->
<!-- 
  Multi-line comment
  for longer explanations
-->

HTML Elements Anatomy

HTML elements consist of opening tags, content, and closing tags.

<!-- Element with content -->
<p>This is a paragraph</p>
<!-- Self-closing elements -->
<img src="image.jpg" alt="Description" />
<br />
<hr />
<!-- Elements with attributes -->
<a href="https://example.com" target="_blank">Link</a>
<!-- Nested elements -->
<div>
  <p>Nested paragraph</p>
</div>

Text Content Elements

Headings: h1 to h6

Define the hierarchy and importance of content sections.

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

Sign in to answer this quiz and track your learning progress

What is the correct heading hierarchy?
h1 should be used multiple times on a page
h1 should be used once as the main title, followed by h2, h3, etc.
All headings have the same importance
h6 is the most important heading

Paragraphs: p

The most common element for text content blocks.

<p>
  This is a paragraph of text. It can contain multiple sentences and will wrap
  automatically.
</p>
<p>This is another paragraph. Paragraphs are separated by margin space.</p>

Text Formatting: <strong>, <em>, <b>, <i>

Elements for emphasizing and styling text inline.

<strong>Strong importance (bold)</strong>
<em>Emphasis (italic)</em>
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<mark>Highlighted text</mark>
<small>Small text</small>
<del>Deleted text</del>
<ins>Inserted text</ins>

Line Breaks & Spacing: <br>, <hr>, <pre>

Control text flow and spacing within content.

<!-- Line break -->
Line 1<br />
Line 2
<!-- Horizontal rule -->
<hr />
<!-- Preformatted text -->
<pre>
  Text with
    preserved    spacing
      and line breaks
</pre>
<!-- Code formatting -->
<code>console.log('Hello');</code>

Lists & Navigation

Unordered Lists: <ul>

Create bullet point lists for non-sequential items.

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>
<!-- Nested lists -->
<ul>
  <li>
    Main item
    <ul>
      <li>Sub item 1</li>
      <li>Sub item 2</li>
    </ul>
  </li>
</ul>

Ordered Lists: <ol>

Create numbered lists for sequential items.

<ol>
  <li>First step</li>
  <li>Second step</li>
  <li>Third step</li>
</ol>
<!-- Custom numbering -->
<ol start="5">
  <li>Item 5</li>
  <li>Item 6</li>
</ol>
<!-- Different numbering types -->
<ol type="A">
  <li>Item A</li>
  <li>Item B</li>
</ol>

Description Lists: <dl>

Create lists of terms and their descriptions.

<dl>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>

  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>

  <dt>JavaScript</dt>
  <dd>Programming language for web</dd>
</dl>

Create hyperlinks and navigation structures.

<!-- Basic link -->
<a href="https://example.com">Visit Example</a>
<!-- Link in new tab -->
<a href="https://example.com" target="_blank">New Tab</a>
<!-- Email link -->
<a href="mailto:email@example.com">Send Email</a>
<!-- Phone link -->
<a href="tel:+1234567890">Call Us</a>
<!-- Internal page anchors -->
<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
Quiz

Sign in to answer this quiz and track your learning progress

What does target="_blank" do in an anchor tag?
Opens the link in the same window
Opens the link in a new tab or window
Closes the current window
Downloads the link

Forms & Input Elements

Basic Form Structure: <form>

The foundation of user input collection.

<form action="/submit" method="POST">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required />

  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required />

  <input type="submit" value="Submit" />
</form>

Input Types: <input>

Various input types for different data collection needs.

<!-- Text inputs -->
<input type="text" placeholder="Enter text" />
<input type="email" placeholder="email@example.com" />
<input type="password" placeholder="Password" />
<input type="url" placeholder="https://example.com" />
<input type="tel" placeholder="+1234567890" />
<!-- Number inputs -->
<input type="number" min="1" max="100" step="1" />
<input type="range" min="0" max="100" value="50" />
<!-- Date and time -->
<input type="date" />
<input type="time" />
<input type="datetime-local" />

Form Controls: <checkbox>, <radio>, <select>, <textarea>

Additional form elements for user interaction.

<!-- Checkboxes -->
<input type="checkbox" id="agree" name="agree" />
<label for="agree">I agree to terms</label>
<!-- Radio buttons -->
<input type="radio" id="option1" name="choice" value="1" />
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="choice" value="2" />
<label for="option2">Option 2</label>
<!-- Select dropdown -->
<select name="country">
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
  <option value="ca">Canada</option>
</select>
<!-- Textarea -->
<textarea
  name="message"
  rows="4"
  cols="50"
  placeholder="Enter your message"
></textarea>

Form Validation: required, min, max, pattern

Built-in HTML form validation attributes.

<input type="text" required />
<input type="email" required />
<input type="text" minlength="3" maxlength="20" />
<input type="number" min="1" max="100" />
<input type="text" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" />
Quiz

Sign in to answer this quiz and track your learning progress

What does the required attribute do in an HTML input?
Prevents form submission if the field is empty
Makes the field read-only
Hides the field
Sets a default value

Media Elements

Images: <img>, <picture>

Display images with various attributes and options.

<!-- Basic image -->
<img src="image.jpg" alt="Description" />
<!-- Responsive image -->
<img src="image.jpg" alt="Description" width="100%" height="auto" />
<!-- Image with size -->
<img src="image.jpg" alt="Description" width="300" height="200" />
<!-- Picture element for responsive images -->
<picture>
  <source media="(min-width: 800px)" srcset="large.jpg" />
  <source media="(min-width: 400px)" srcset="medium.jpg" />
  <img src="small.jpg" alt="Description" />
</picture>

Audio: <audio>

Embed audio content with playback controls.

<!-- Basic audio -->
<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  Your browser does not support audio.
</audio>
<!-- Audio with autoplay -->
<audio controls autoplay loop>
  <source src="background.mp3" type="audio/mpeg" />
</audio>

Video: <video>

Embed video content with comprehensive options.

<!-- Basic video -->
<video controls width="400" height="300">
  <source src="video.mp4" type="video/mp4" />
  <source src="video.webm" type="video/webm" />
  Your browser does not support video.
</video>
<!-- Video with poster and attributes -->
<video controls poster="thumbnail.jpg" width="100%" height="auto">
  <source src="video.mp4" type="video/mp4" />
  <track src="captions.vtt" kind="captions" srclang="en" label="English" />
</video>

Embedded Content: <iframe>

Embed external content and applications.

<!-- iFrame for external content -->
<iframe src="https://example.com" width="100%" height="400"></iframe>
<!-- YouTube video embed -->
<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/VIDEO_ID"
></iframe>
<!-- Google Maps embed -->
<iframe src="https://maps.google.com/..."></iframe>

Tables

Basic Table Structure: <table>

Create structured data displays with tables.

<table>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>25</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Jane</td>
      <td>30</td>
      <td>London</td>
    </tr>
  </tbody>
</table>

Advanced Table Features: rowspan, colspan, <caption>

Enhanced table functionality with spanning and grouping.

<table>
  <caption>
    Sales Report
  </caption>
  <colgroup>
    <col style="width: 50%" />
    <col style="width: 25%" />
    <col style="width: 25%" />
  </colgroup>
  <thead>
    <tr>
      <th rowspan="2">Product</th>
      <th colspan="2">Sales</th>
    </tr>
    <tr>
      <th>Q1</th>
      <th>Q2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Product A</td>
      <td>$1000</td>
      <td>$1200</td>
    </tr>
  </tbody>
</table>

Semantic HTML5 Elements

Page Structure Elements: <header>, <nav>, <main>, <footer>

Define the main sections of your page layout.

<!-- Page header -->
<header>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<!-- Main content -->
<main>
  <article>
    <h1>Article Title</h1>
    <p>Article content...</p>
  </article>
</main>
<!-- Sidebar -->
<aside>
  <h2>Related Links</h2>
  <ul>
    <li><a href="#">Link 1</a></li>
  </ul>
</aside>
<!-- Page footer -->
<footer>
  <p>© 2024 Company Name</p>
</footer>

Content Grouping Elements: <section>, <article>, <div>, <figure>

Organize and group related content sections.

<!-- Generic section -->
<section>
  <h2>Section Title</h2>
  <p>Section content...</p>
</section>
<!-- Standalone article -->
<article>
  <header>
    <h1>Article Title</h1>
    <time datetime="2024-01-01">January 1, 2024</time>
  </header>
  <p>Article content...</p>
</article>
<!-- Generic container -->
<div class="container">
  <p>Generic content grouping</p>
</div>
<!-- Figure with caption -->
<figure>
  <img src="chart.jpg" alt="Sales Chart" />
  <figcaption>Sales data for Q1 2024</figcaption>
</figure>

HTML Attributes

Global Attributes: id, class, title, data-*

Attributes that can be used on any HTML element.

<!-- ID for unique identification -->
<div id="unique-element">Content</div>
<!-- Class for styling and selection -->
<p class="highlight important">Text</p>
<!-- Title for tooltips -->
<span title="This is a tooltip">Hover me</span>
<!-- Data attributes -->
<div data-user-id="123" data-role="admin">User</div>
<!-- Language -->
<p lang="es">Hola mundo</p>
<!-- Content direction -->
<p dir="rtl">Right to left text</p>
<!-- Hidden elements -->
<div hidden>This won't be displayed</div>

Accessibility Attributes: alt, aria-*, tabindex, role

Attributes that improve accessibility and user experience.

<!-- Alternative text for images -->
<img src="photo.jpg" alt="A sunset over mountains" />
<!-- ARIA labels -->
<button aria-label="Close dialog">×</button>
<div aria-hidden="true">Decorative content</div>
<!-- Form accessibility -->
<label for="email">Email Address:</label>
<input type="email" id="email" aria-describedby="email-help" />
<small id="email-help">We'll never share your email</small>
<!-- Tab index -->
<div tabindex="0">Focusable div</div>
<div tabindex="-1">Programmatically focusable</div>
<!-- Role attribute -->
<div role="button" tabindex="0">Custom button</div>

HTML5 Modern Features

New Input Features: color, search, file, datalist

HTML5 introduced new input types and attributes.

<!-- New input types -->
<input type="color" value="#ff0000" />
<input type="search" placeholder="Search..." />
<input type="file" accept="image/*" multiple />
<!-- Datalist for autocomplete -->
<input list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Chrome"></option>
  <option value="Firefox"></option>
  <option value="Safari"></option>
</datalist>
<!-- Progress and meter -->
<progress value="70" max="100">70%</progress>
<meter value="0.6">60%</meter>

Canvas & SVG: <canvas>, <svg>

Graphics and drawing capabilities in HTML5.

<!-- Canvas for dynamic graphics -->
<canvas id="myCanvas" width="400" height="200">
  Your browser does not support canvas.
</canvas>
<!-- Inline SVG -->
<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="2" />
</svg>

Details & Summary: <details>, <summary>

Create collapsible content sections without JavaScript.

<details>
  <summary>Click to expand</summary>
  <p>
    This content is hidden by default and revealed when clicking the summary.
  </p>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</details>
<details open>
  <summary>This starts expanded</summary>
  <p>Content visible by default.</p>
</details>

Dialog Element: <dialog>

Native dialog and modal functionality.

<!-- Dialog element -->
<dialog id="myDialog">
  <h2>Dialog Title</h2>
  <p>Dialog content goes here.</p>
  <button onclick="closeDialog()">Close</button>
</dialog>
<button onclick="openDialog()">Open Dialog</button>
<script>
  function openDialog() {
    document.getElementById('myDialog').showModal()
  }
</script>

Best Practices & Validation

HTML Best Practices

Write clean, maintainable, and accessible HTML.

<!-- Always declare doctype -->
<!DOCTYPE html>
<!-- Use semantic elements -->
<header>...</header>
<main>...</main>
<footer>...</footer>
<!-- Proper nesting -->
<div>
  <p>Properly nested content</p>
</div>
<!-- Use lowercase for elements and attributes -->
<img src="image.jpg" alt="description" />
<!-- Close all tags -->
<p>Always close your tags</p>
<!-- Use meaningful alt text -->
<img src="chart.png" alt="Sales increased 25% in Q4" />

HTML Validation & Debugging

Ensure your HTML is valid and accessible.

<!-- Use W3C HTML Validator -->
<!-- https://validator.w3.org/ -->
<!-- Common validation errors -->
<!-- Missing alt attributes -->
<img src="image.jpg" alt="" />
<!-- Provide alt text -->
<!-- Unclosed tags -->
<p>Text content</p>
<!-- Always close tags -->
<!-- Invalid nesting -->
<p>
  Valid paragraph content
  <!-- Don't put block elements inside paragraphs -->
</p>
<!-- Use developer tools -->
<!-- Right-click → Inspect Element -->
<!-- Check console for errors -->
<!-- Validate accessibility with WAVE or axe -->

HTML Templates & Frameworks

Template Engines: Handlebars, Mustache

Dynamic HTML generation with template languages.

<!-- Handlebars template -->
<div>
  <h1>{{title}}</h1>
  {{#each items}}
  <p>{{this}}</p>
  {{/each}}
</div>
<!-- Mustache template -->
<div>
  <h1>{{title}}</h1>
  {{#items}}
  <p>{{.}}</p>
  {{/items}}
</div>

Web Components: <template>, Custom Elements

Reusable custom HTML elements.

<!-- Custom element definition -->
<template id="my-component">
  <style>
    p {
      color: blue;
    }
  </style>
  <p><slot></slot></p>
</template>
<!-- Usage -->
<my-component>Hello World</my-component>
<script>
  class MyComponent extends HTMLElement {
    // Component logic
  }
  customElements.define('my-component', MyComponent)
</script>

Framework Integration: React JSX, Vue Templates

HTML within modern JavaScript frameworks.

<!-- React JSX -->
function Component() { return (
<div className="container">
  <h1>{title}</h1>
  <p>Content here</p>
</div>
); }
<!-- Vue template -->
<template>
  <div class="container">
    <h1>{{ title }}</h1>
    <p v-if="showContent">Content here</p>
  </div>
</template>
Previous pageWeb DevelopmentNext pageCSS