HTML5 Cheatsheet

HTML5

Web

Frontend

Markup

Complete reference for HTML5 elements, attributes, and modern web development features for creating semantic and accessible web pages.

Quick Reference

📄 Document Structure

Basic HTML5 document layout and meta elements

📝 Text & Formatting

Text formatting and semantic markup elements

📋 Forms & Tables

Interactive forms and data table structures

🎯 HTML5 Features

Modern semantic elements and multimedia support

Document Structure

HTML5 provides a clean document structure with semantic elements that improve accessibility and SEO.

Basic Document Template

HTML5 Document Declaration

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

Document Information Elements

Base URL for relative links

<base href="https://example.com/">

Internal styles

<style>
  body { margin: 0; }
</style>

Meta information

<meta name="description" content="Page description">
<meta name="author" content="Author Name">
<meta name="keywords" content="keyword1, keyword2">

External scripts

<script src="script.js"></script>

Internal scripts

<script>
  console.log('Hello World');
</script>

External stylesheets

<link rel="stylesheet" href="styles.css">

Favicon link

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Basic Structure Elements

Headings (h1-h6)

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

Paragraph

<p>This is a paragraph of text.</p>

Generic container

<div class="container">
  <p>Content inside a div</p>
</div>

Inline container

<span class="highlight">Highlighted text</span>

Line break

<br>

Horizontal rule

<hr>

Text Formatting

HTML5 provides both visual and semantic text formatting elements for better content structure and meaning.

Emphasis and Importance

Strong importance (bold)

<strong>Very important text</strong>
<b>Bold text (visual only)</b>

Emphasis (italic)

<em>Emphasized text</em>
<i>Italic text (visual only)</i>

Deleted text (strikethrough)

<del>This text has been deleted</del>

Inserted text

<ins>This text has been inserted</ins>

Specialized Text Elements

Preformatted text

<pre>
  This text preserves
  whitespace and line breaks
</pre>

Block quotation

<blockquote cite="https://example.com">
  <p>This is a long quotation from another source.</p>
</blockquote>

Abbreviation

<abbr title="HyperText Markup Language">HTML</abbr>

Contact information

<address>
  Written by <a href="mailto:webmaster@example.com">Jon Doe</a><br>
  Visit us at: Example.com
</address>

Inline code

<code>console.log('Hello World');</code>

Short quotation

<q>This is a short inline quotation</q>

Subscript and superscript

<p>H<sub>2</sub>O (water)</p>
<p>E = mc<sup>2</sup></p>

Keyboard input

<kbd>Ctrl+C</kbd>

Small text

<small>Copyright notice or legal disclaimer</small>

Links are fundamental to web navigation, connecting pages and enabling user interaction.

Link Types

External link

<a href="https://example.com">Visit Example</a>

Internal page link

<a href="/about">About Page</a>

Email link

<a href="mailto:contact@example.com">Send Email</a>

Phone link

<a href="tel:+1234567890">Call Us</a>

Anchor link (same page)

<a href="#section1">Go to Section 1</a>

Download link

<a href="document.pdf" download>Download PDF</a>

Link with target

<a href="https://example.com" target="_blank">Open in New Tab</a>

Images and Media

Image Element

Basic image

<img src="image.jpg" alt="Description of image">

Responsive image

<img src="image.jpg" alt="Description" width="300" height="200">

Image with figure caption

<figure>
  <img src="image.jpg" alt="Description">
  <figcaption>Caption for the image</figcaption>
</figure>

Lists

Lists help organize information in a structured, readable format.

List Types

Ordered list (numbered)

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

Unordered list (bulleted)

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

Description list

<dl>
  <dt>Term 1</dt>
  <dd>Description of term 1</dd>
  <dt>Term 2</dt>
  <dd>Description of term 2</dd>
</dl>

Forms

Forms are essential for user interaction and data collection. Always include proper validation and accessibility features.

Form Structure

Basic form

<form action="/submit" method="POST">
  <fieldset>
    <legend>User Information</legend>
    
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
    
    <button type="submit">Submit</button>
  </fieldset>
</form>

Form Attributes

Form with various attributes

<form 
  action="/submit" 
  method="POST" 
  enctype="multipart/form-data"
  autocomplete="on"
  novalidate
  accept-charset="UTF-8"
  target="_self"
>
  <!-- Form content -->
</form>

Input Types

Text inputs

<input type="text" name="username" placeholder="Enter username">
<input type="email" name="email" placeholder="Enter email">
<input type="password" name="password" placeholder="Enter password">
<input type="number" name="age" min="1" max="100">
<input type="url" name="website" placeholder="https://example.com">
<input type="tel" name="phone" placeholder="123-456-7890">

Date and time inputs

<input type="date" name="birthdate">
<input type="time" name="appointment">
<input type="datetime-local" name="meeting">
<input type="month" name="month">
<input type="week" name="week">

Other input types

<input type="color" name="favorite-color">
<input type="range" name="volume" min="0" max="100">
<input type="file" name="upload" accept=".jpg,.png,.pdf">
<input type="search" name="search" placeholder="Search...">

Checkboxes and radio buttons

<input type="checkbox" id="subscribe" name="subscribe" value="yes">
<label for="subscribe">Subscribe to newsletter</label>
 
<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>

Form Controls

Textarea

<textarea name="message" rows="4" cols="50" placeholder="Enter your message">
</textarea>

<select name="country">
  <optgroup label="North America">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
  </optgroup>
  <optgroup label="Europe">
    <option value="uk">United Kingdom</option>
    <option value="de">Germany</option>
  </optgroup>
</select>

Buttons

<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
<button type="button" onclick="doSomething()">Custom Action</button>

Tables

Tables should be used for tabular data only. Use CSS Grid or Flexbox for layout purposes.

Table Structure

Complete table example

<table>
  <caption>Monthly Sales Report</caption>
  <thead>
    <tr>
      <th scope="col">Month</th>
      <th scope="col">Sales</th>
      <th scope="col">Profit</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$10,000</td>
      <td>$2,000</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$12,000</td>
      <td>$2,400</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Total</td>
      <td>$22,000</td>
      <td>$4,400</td>
    </tr>
  </tfoot>
</table>

Column grouping

<table>
  <colgroup>
    <col style="background-color: #f0f0f0;">
    <col span="2" style="background-color: #e0e0e0;">
  </colgroup>
  <tr>
    <th>Name</th>
    <th>Age</th>
    <th>City</th>
  </tr>
</table>

Objects and Embedded Content

Multimedia Elements

Object element

<object data="document.pdf" type="application/pdf" width="600" height="400">
  <p>Your browser doesn't support PDF viewing.</p>
</object>

Iframe

<iframe 
  src="https://example.com" 
  width="600" 
  height="400"
  frameborder="0"
  title="Embedded content">
</iframe>

Embed element

<embed src="flash-animation.swf" type="application/x-shockwave-flash" width="400" height="300">

HTML5 Semantic Elements

HTML5 semantic elements provide meaning to your content structure, improving accessibility and SEO.

Layout Elements

Header section

<header>
  <nav>
    <ul>
      <li><a href="/">Home</a></li>
      <li><a href="/about">About</a></li>
    </ul>
  </nav>
</header>

<footer>
  <p>&copy; 2025 Company Name. All rights reserved.</p>
</footer>

Main content area

<main>
  <h1>Page Title</h1>
  <p>Main content goes here</p>
</main>

Article content

<article>
  <header>
    <h2>Article Title</h2>
    <time datetime="2025-01-15">January 15, 2025</time>
  </header>
  <p>Article content...</p>
</article>

Sidebar content

<aside>
  <h3>Related Links</h3>
  <ul>
    <li><a href="/related1">Related Article 1</a></li>
    <li><a href="/related2">Related Article 2</a></li>
  </ul>
</aside>

Section element

<section>
  <h2>Section Title</h2>
  <p>Section content...</p>
</section>

<nav aria-label="Main navigation">
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

Interactive Elements

Details and summary

<details>
  <summary>Click to expand</summary>
  <p>This content is hidden by default and can be expanded.</p>
</details>

Dialog element

<dialog id="myDialog">
  <p>This is a dialog box</p>
  <button onclick="document.getElementById('myDialog').close()">Close</button>
</dialog>

Content Elements

Figure with caption

<figure>
  <img src="chart.png" alt="Sales chart">
  <figcaption>Sales performance for Q1 2025</figcaption>
</figure>

Highlighted text

<p>The most <mark>important part</mark> of this sentence.</p>

Progress indicator

<progress value="70" max="100">70%</progress>

Meter element

<meter value="6" min="0" max="10">6 out of 10</meter>

Time element

<time datetime="2025-01-15T10:00">January 15, 2025 at 10:00 AM</time>

Text Direction Elements

Bidirectional isolation

<p>User <bdi>إيان</bdi> scored 110 points.</p>

Word break opportunity

<p>This is a very<wbr>long<wbr>word<wbr>that<wbr>might<wbr>need<wbr>breaking.</p>

Ruby Annotations

Ruby text for East Asian typography

<ruby>
  漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
  字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>

Canvas and Graphics

Canvas Element

HTML5 Canvas

<canvas id="myCanvas" width="400" height="200">
  Your browser does not support the canvas element.
</canvas>

Image map

<img src="image.jpg" alt="Image" usemap="#imagemap">
<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="link1.html" alt="Area 1">
  <area shape="circle" coords="150,50,25" href="link2.html" alt="Area 2">
</map>

Character Entities

HTML entities allow you to display special characters that have meaning in HTML or are not available on standard keyboards.

Common HTML Entities

Special characters

&quot;   <!-- " (quotation mark) -->
&amp;    <!-- & (ampersand) -->
&lt;     <!-- < (less than) -->
&gt;     <!-- > (greater than) -->
&nbsp;   <!-- (non-breaking space) -->
&copy;   <!-- © (copyright) -->
&reg;    <!-- ® (registered trademark) -->
&trade;  <!-- ™ (trademark) -->

Numeric entities

&#34;    <!-- " (quotation mark) -->
&#38;    <!-- & (ampersand) -->
&#60;    <!-- < (less than) -->
&#62;    <!-- > (greater than) -->
&#160;   <!-- (non-breaking space) -->
&#169;   <!-- © (copyright) -->
&#64;    <!-- @ (at symbol) -->
&#149;   <!-- • (bullet) -->

Best Practices

Follow these HTML5 best practices for creating semantic, accessible, and maintainable web content.

Use semantic elements like <header>, <nav>, <main>, <article>, <section>, and <footer> for better structure
Always include alt attributes on images for accessibility
Use proper heading hierarchy (h1-h6) to create logical document outlines
Include lang attribute on the html element for language identification
Use form labels properly associated with input elements
Validate your HTML using W3C Markup Validator
Write semantic, not presentational HTML - use CSS for styling
Include meta viewport tag for responsive design
Use HTTPS for all external resources when possible

Learn More

Explore comprehensive HTML5 documentation and modern web development techniques

Resources

📄 Document Structure

📝 Text & Formatting

📋 Forms & Tables

🎯 HTML5 Features

Quick Links

Recent Cheatsheets