This page is a flat reference — every example is copy-and-paste ready. None of the tags here are deprecated; all work in every modern browser. The code blocks are intentionally minimal so you can paste each one into the editor and immediately see what it does without wading through hundreds of lines of context.

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

Use one <h1> per page — both screen readers and SEO crawlers expect it. Skipping levels (h1 → h3 with no h2) is technically valid HTML but confuses assistive tech, so prefer to nest correctly and adjust the visual size with CSS instead. <br> is for hard line breaks inside content (addresses, poetry); use margins on the surrounding block element for spacing.

Links and 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">

Always set alt on images. If the image is decorative (a divider, an icon next to text that already explains it), use alt="" so screen readers skip it. Always set width and height on images that load from the network — without them, the browser doesn't know how much space to reserve, which causes Cumulative Layout Shift as images come in.

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>

Nest lists by putting a <ul> inside a <li>, not directly inside another <ul>. Browsers render either, but only the first form validates and only the first announces correctly to screen readers.

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>

Use tables for actual tabular data — rows and columns with a relationship between them. Don't use tables for layout (use CSS grid or flexbox); the only exception is HTML email, where layout-by-table is still required for Outlook compatibility.

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>

Every form input should have a matching <label>. The for="name" attribute on the label must match the id="name" on the input — clicking the label then focuses the input, which is huge for accessibility on mobile. Use type="email", type="tel", etc. instead of type="text" whenever the data has a known shape; mobile keyboards adapt automatically.

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>

One <main> per page. <article> for content that could stand alone (a blog post, a comment, a product card). <section> for thematic groupings within an article. <nav> for major navigation only — not every group of links needs to be a nav.

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

Anti-patterns to avoid

<div> when a semantic element exists — buttons should be <button>, not <div onClick>.
Inline style for everything. Fine for a one-off, terrible at scale — use CSS classes.
Skipping alt on images, even decorative ones. Use alt="" instead so screen readers can skip cleanly.
Using <br><br> for paragraph spacing. Start a new <p> instead.
Click handlers on <span> or <div> instead of <button> or <a> — they break keyboard navigation and screen readers don't announce them as interactive.

Paste any snippet into the editor to see it render. If you need to export a print-perfect version of the result, the HTML-to-PDF converter handles @page rules and page breaks correctly.