Document Structure

The skeleton of every HTML page. The <!DOCTYPE html> ensures browsers render in standard mode.

<!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>
    <h1>Hello World</h1>
  </body>
</html>

Text Formatting

Tags to structure and emphasize text content.

<h1> to <h6> — Headings.
<p> — Paragraph.
<strong> — Important text (bold).
<em> — Emphasized text (italic).
<blockquote> — Long quotation.
<code> — Inline code snippet.

<p>This is <strong>important</strong> text.</p>
<blockquote>
  The only way to do great work is to love what you do.
</blockquote>

Forms & Input

Collect user input with various control types.

<input type="..."> — text, password, email, number, checkbox, radio, date, file.
<textarea> — Multi-line text input.
<select> & <option> — Dropdown list.
<button> — Clickable button.
<label> — Caption for an item (improves accessibility).

<form action="/submit" method="POST">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <label for="bio">Bio:</label>
  <textarea id="bio" name="bio"></textarea>

  <button type="submit">Send</button>
</form>

Semantic HTML

Use tags that convey meaning to browsers and screen readers, rather than just <div>.

<header> — Introductory content or navigation.
<nav> — Navigation links.
<main> — Dominant content of the body.
<article> — Self-contained composition (blog post, news).
<section> — Thematic grouping of content.
<aside> — Content indirectly related (sidebar).
<footer> — Footer for a section or page.

<article>
  <header>
    <h2>Article Title</h2>
    <p>Published on May 1st</p>
  </header>
  <p>Article content goes here...</p>
</article>

Tables

Structure data in rows and columns.

<table>
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Laptop</td>
      <td>$999</td>
    </tr>
  </tbody>
</table>

Media & Links

Embed images, audio, video, and create hyperlinks.

<a href="..."> — Hyperlink.
<img src="..." alt="..."> — Image.
<video controls> — Video player.
<audio controls> — Audio player.
<iframe> — Embed another HTML page.

<img src="logo.png" alt="Company Logo" width="200">

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

Global Attributes

Attributes that can be used on almost any HTML element.

class — Specify one or more class names for CSS/JS.
id — Unique identifier for an element.
style — Inline CSS styles.
title — Extra information (tooltip).
data-* — Store custom data.
hidden — Hides the element.

<div id="main-content" class="container dark-mode" data-user-id="123">
  Content
</div>

HTML Cheatsheet

Document Structure

Text Formatting

Forms & Input

Semantic HTML

Tables

Media & Links

Global Attributes

🚀 Explore More Free Developer Tools

📚 JSON Cheatsheet

📚 CSS Cheatsheet

📚 SCSS Cheatsheet