HTML Cheat Sheet

A quick reference for the most common HTML tags. Copy any example and paste it into the editor to see it rendered live.

Text & headings

<h1>Main heading</h1>
<h2>Sub heading</h2>
<h3>Section heading</h3>
<p>A paragraph of text.</p>
<strong>Bold text</strong>
<em>Italic text</em>
<br> <!-- line break -->
<hr> <!-- horizontal rule -->

Links & images

<a href="https://example.com">Click here</a>
<a href="/about">Internal link</a>
<a href="mailto:hi@example.com">Email link</a>

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

Lists

<!-- Unordered list -->
<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<!-- Ordered list -->
<ol>
  <li>Step one</li>
  <li>Step two</li>
  <li>Step three</li>
</ol>

Tables

<table border="1" cellpadding="8">
  <thead>
    <tr>
      <th>Name</th>
      <th>Role</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>Engineer</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>Designer</td>
    </tr>
  </tbody>
</table>

Forms

<form>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"
    placeholder="Your name">

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

  <textarea name="message" rows="4"
    placeholder="Your message"></textarea>

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

Semantic layout

<header>Site header</header>
<nav>Navigation links</nav>
<main>
  <article>
    <h1>Article title</h1>
    <p>Article content</p>
  </article>
  <aside>Sidebar</aside>
</main>
<footer>Site footer</footer>

Common attributes

• id — unique identifier for an element
• class — CSS class name(s) for styling
• style — inline CSS styles
• title — tooltip text on hover
• href — URL for links
• src — source URL for images, scripts, etc.
• alt — alternative text for images
• placeholder — hint text in form inputs