HTML has over 100 elements, but the vast majority of web pages are built with fewer than 30. This cheat sheet covers exactly those elements — the ones you will use every day — with syntax, purpose, and the gotchas beginners hit most often. Try each snippet live in our free html editor online as you read.
Document Structure
<!DOCTYPE html> <!-- Tells browser this is HTML5 -->
<html lang="en"> <!-- Root element; always set lang -->
<head> <!-- Metadata (not displayed) -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body> <!-- Visible content goes here -->
</body>
</html>Headings
<h1>Main Heading</h1> <!-- One per page -->
<h2>Section Heading</h2>
<h3>Sub-section</h3>
<h4>...through h6</h4>Use headings in hierarchy order. Never skip from <h1> to <h3> — screen readers use heading structure to navigate pages.
Text & Inline Elements
<p>Paragraph text.</p>
<strong>Bold / important</strong>
<em>Italic / emphasis</em>
<br> <!-- Line break (void element, no closing tag) -->
<hr> <!-- Horizontal rule -->
<code>inline code</code>
<pre>preserved whitespace block</pre>
<blockquote>Quote</blockquote>
<mark>Highlighted text</mark>
<del>Deleted text</del>
<sup>Superscript</sup> <sub>Subscript</sub>Links & Images
<a href="https://example.com">Link text</a>
<a href="https://example.com" target="_blank"
rel="noopener noreferrer">Opens in new tab</a>
<a href="#section-id">Jumps to section on same page</a>
<a href="mailto:hello@example.com">Email link</a>
<img src="photo.jpg" alt="Description of image" width="800" height="600">The alt attribute on <img> is required. Use alt="" for purely decorative images. Always add rel="noopener noreferrer" when using target="_blank" — without it, the new tab can access the opener window via window.opener.
Lists
<!-- Unordered (bullets) -->
<ul>
<li>Item one</li>
<li>Item two</li>
</ul>
<!-- Ordered (numbered) -->
<ol>
<li>First step</li>
<li>Second step</li>
</ol>
<!-- Definition list -->
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>Forms
<form action="/submit" method="post">
<label for="name">Name</label>
<input type="text" id="name" name="name" placeholder="Your name" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="msg">Message</label>
<textarea id="msg" name="msg" rows="4"></textarea>
<select name="colour">
<option value="red">Red</option>
<option value="blue">Blue</option>
</select>
<button type="submit">Send</button>
</form>Always pair <label> with its input using matching for and id values. This makes the label clickable and allows screen readers to announce it when the field is focused.
Semantic HTML5 Elements
<header> <!-- Site or section header, usually nav -->
<nav> <!-- Navigation links -->
<main> <!-- Primary content (one per page) -->
<article> <!-- Self-contained content (blog post, news item) -->
<section> <!-- Thematic grouping of content -->
<aside> <!-- Sidebar, complementary content -->
<footer> <!-- Site or section footer -->
<figure> <!-- Image with caption -->
<figcaption> <!-- Caption for figure -->Semantic elements have the same visual effect as <div> by default, but they communicate meaning to browsers, screen readers, and search engines. Use them wherever the content fits the element's purpose.
div and span
<div>Block-level container — takes full width, starts new line</div>
<span>Inline container — stays in the text flow</span>Use <div> and <span> as last resorts — always ask whether a semantic element fits first. Once you have written your HTML, run it through the HTML validator to catch missing alt attributes, unclosed tags, and other common issues before publishing.
Void Elements (No Closing Tag)
<br> <!-- Line break -->
<hr> <!-- Horizontal rule -->
<img> <!-- Image -->
<input><!-- Form input -->
<link> <!-- External resource (CSS) -->
<meta> <!-- Metadata -->Void elements cannot have content and do not need a closing tag. Writing <br /> is valid HTML5 but the slash is optional.