Recommended Free Tools
HTML (HyperText Markup Language) structures web documents and describes what their content means. This modern HTML cheat sheet covers the syntax and elements you need for a valid page, links, media, tables, forms, metadata, accessibility and debugging. It follows the WHATWG HTML Living Standard; “HTML5” remains a useful search term, but current HTML is maintained as a living standard rather than a frozen version.
Use HTML for structure, CSS for presentation, and JavaScript for behavior. The browser turns HTML into a Document Object Model (DOM), which scripts and developer tools can inspect.
Starter HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title</title>
<meta name="description" content="A short description of the page.">
</head>
<body>
<h1>Main heading</h1>
<p>Hello, world!</p>
</body>
</html>| Syntax | Purpose |
|---|---|
<!doctype html> |
Activates standards mode. |
<html lang="en"> |
Root element; lang identifies the document language for screen readers, translation and pronunciation. |
<head> |
Metadata and linked resources. |
<meta charset="utf-8"> |
Declares UTF-8 encoding. |
<meta name="viewport"> |
Widely implemented convention that helps responsive pages match the device viewport. |
<title> |
Browser-tab, bookmark and search-interface title. |
<body> |
Visible document content. |
See the MDN html reference and WHATWG metadata section.
HTML syntax basics
Elements, tags, attributes and values
<a href="https://example.com" class="external-link">Visit the site</a>- The element is the complete
astructure. - The start tag is
<a ...>; the end tag is</a>. hrefandclassare attributes; their quoted contents are attribute values.Visit the siteis the element’s content.
Nesting and comments
<p>This is <strong>important</strong> text.</p>
<strong><em>Important text</em></strong>
<!-- This comment is sent to the browser and is not displayed. -->Close elements in the reverse order in which they open. <strong><em>...</strong></em> is misnested. Never put passwords, API keys or other secrets in comments.
Boolean and void elements
A Boolean attribute is true when present, regardless of its string value:
<input type="checkbox" checked>
<button disabled>Unavailable</button>
<details open>...</details>disabled="false" is still disabled because the attribute exists. Void elements have no closing tag: img, br, hr, input, meta and link. The slash in <br /> is unnecessary in ordinary text/html. Full syntax guidance is in the WHATWG syntax specification.
Document structure and semantics
| Element | Use | Example |
|---|---|---|
header |
Introductory or navigational content for a page or section. | <header>...</header> |
nav |
Major navigation links. | <nav><a href="/">Home</a></nav> |
main |
Primary content. | <main>...</main> |
section |
Thematic grouping, normally with a heading. | <section><h2>News</h2></section> |
article |
Self-contained composition such as a post or comment. | <article>...</article> |
aside |
Complementary content. | <aside>Related links</aside> |
footer |
Footer for a page or section. | <footer>...</footer> |
address |
Contact information for the relevant page or article. | <address>...</address> |
div, span |
Generic block or inline containers when no semantic element fits. | <div class="card">...</div> |
Semantic elements express meaning; they do not automatically dictate visual design. Use CSS for layout and appearance. The web.dev semantic HTML guide and MDN element reference provide details.
Headings and text
| Element | Meaning |
|---|---|
h1–h6 |
Heading ranks. |
p |
Paragraph. |
br, hr |
Content line break; thematic break. |
strong, em |
Strong importance; stress emphasis. |
b, i, u |
Attention, alternate voice/term, or non-textual annotation—not generic styling commands. |
mark, small, s, del, ins |
Marked, side-comment, no-longer-relevant, deleted or inserted content. |
code, pre, kbd, samp, var |
Code, preformatted text, user input, program output and variables. |
blockquote, q, cite |
Extended quote, inline quote and creative-work title. |
abbr, dfn, time, data |
Abbreviation, defining term, machine-readable time and machine-readable value. |
<h1>HTML Cheat Sheet</h1>
<h2>Forms</h2>
<p>Run <code>npm install</code> in your terminal.</p>
<pre><code>const message = "Hello";</code></pre>
<p>Starts at <time datetime="2026-08-18T09:00">9:00 AM</time>.</p>Use headings for hierarchy, not font size; use CSS for size. A page often has one primary h1, but HTML does not impose a simplistic universal one-heading rule.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Links and navigation
<a href="https://example.com">External link</a>
<a href="/about/">About us</a>
<a href="#contact">Jump to contact</a>
<a href="mailto:[email protected]">Email</a>
<a href="tel:+15551234567">Call</a>
<a href="document.pdf" download>Download PDF</a>| Attribute | Use |
|---|---|
href |
Destination URL or fragment. |
target="_blank" |
Opens a new browsing context; not required for ordinary external links. |
rel="noopener" |
Recommended relationship for a new context. |
rel="noreferrer" |
Suppresses referrer information and affects opener behavior in modern browsers. |
hreflang, type, referrerpolicy |
Hints linked-resource language, media type and referrer handling. |
Name destinations instead of using vague “click here” text. Use a real <a href> for navigation and a <button> for an action. An anchor without href is not a normal hyperlink. See MDN’s anchor reference.
Lists
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
<ol start="3" reversed>
<li>Third item</li>
<li>Second item</li>
</ol>
<dl>
<dt>HTML</dt>
<dd>Markup for structuring web documents.</dd>
</dl>ol also accepts type; use dl for term-description or name-value groups, not generic layout.
Images and responsive images
<img src="photo.jpg" alt="A sunset over the ocean" width="1200" height="800" loading="lazy">
<img src="divider.svg" alt="">
<figure>
<img src="chart.png" alt="Sales increased from January through June.">
<figcaption>Six-month sales trend.</figcaption>
</figure><picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 400px)" srcset="medium.jpg">
<img src="small.jpg" alt="A mountain lake">
</picture>
<img src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
sizes="(max-width: 600px) 100vw, 800px"
alt="A mountain lake">- Write useful alternative text for informative images and
alt=""for purely decorative images. - Do not duplicate a caption when it adds no information; do not use filenames as alt text.
- Width and height help reserve space and reduce layout shift.
- Lazy loading is not mandatory for every image; critical, above-the-fold images may need eager loading.
Reference: MDN img and MDN responsive images.
Audio, video and embedded content
<audio controls>
<source src="podcast.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video controls width="640" height="360" poster="poster.jpg">
<source src="video.mp4" type="video/mp4">
<track kind="subtitles" src="captions-en.vtt" srclang="en" label="English" default>
Your browser does not support the video element.
</video>| Element | Use |
|---|---|
iframe |
Another browsing context. |
embed, object |
External content with differing fallback behavior. |
canvas |
Scriptable bitmap surface; drawing is not automatically accessible. |
svg |
Inline vector graphics. |
track |
Captions, subtitles and other timed text. |
<iframe src="https://example.com" title="Example embedded page" loading="eager" width="800" height="450"></iframe>Provide captions where appropriate, a meaningful iframe title, fallback text and avoid autoplay with sound. See WHATWG media elements.
Tables
<table>
<caption>Monthly expenses</caption>
<thead>
<tr><th scope="col">Month</th><th scope="col">Amount</th></tr>
</thead>
<tbody>
<tr><th scope="row">January</th><td>$120</td></tr>
<tr><th scope="row">February</th><td>$145</td></tr>
</tbody>
</table>| Element | Purpose |
|---|---|
table, caption |
Tabular data and its title or description. |
thead, tbody, tfoot |
Header, data and summary row groups. |
tr, th, td |
Rows, header cells and data cells. |
colgroup, col |
Column grouping and metadata. |
Do not use tables for layout. Meaningful data tables need captions and headers; scope helps but complex tables can require explicit header associations. See MDN table accessibility.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Forms
<form action="/subscribe" method="post">
<fieldset>
<legend>Subscribe to updates</legend>
<label for="email">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required>
<label for="frequency">Frequency</label>
<select id="frequency" name="frequency">
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
</select>
<label for="message">Message</label>
<textarea id="message" name="message" rows="5" cols="40"></textarea>
<button type="submit">Subscribe</button>
</fieldset>
</form>Controls and input types
Common elements are form, label, input, textarea, select, option, optgroup, datalist, button, fieldset, legend, output, progress and meter. Input types include text, email, password, number, tel, url, search, date, time, datetime-local, month, week, color, file, checkbox, radio, range, hidden, submit, reset and button.
| Attribute | Purpose |
|---|---|
id |
Unique identifier and label connection. |
name |
Submission key; controls without it are generally not submitted. |
value |
Submitted or initial value. |
required |
Requires a value. |
disabled |
Prevents interaction and submission. |
readonly |
Prevents editing while generally remaining submittable. |
placeholder |
Hint, never a replacement for a label. |
min, max, step |
Numeric/date constraints. |
minlength, maxlength, pattern |
Text constraints. |
autocomplete, multiple, accept |
Filling, multiple values and file-type hints. |
method="get" places successful values in the URL; post sends them in the request body. A button inside a form submits by default unless it has type="button". Browser constraint validation improves usability but never replaces server-side validation. See MDN forms and WHATWG forms.
Global attributes
<p id="intro" class="lead" title="Introduction">Welcome.</p>
<div data-product-id="123" hidden>Internal data</div>
<p lang="fr" dir="ltr">Bonjour</p>
<div contenteditable="true" spellcheck="true">Editable content</div>Useful global attributes include id, class, title, lang, dir, hidden, data-*, style, tabindex, contenteditable, spellcheck, draggable, translate, role and aria-*. “Global” means syntactically available across HTML elements; an attribute can still have no effect on a particular element. Keep id unique, reuse class values, and use data-* for application data rather than replacing meaningful semantics. Reference: MDN global attributes.
Metadata and scripts
<link rel="stylesheet" href="/css/styles.css">
<link rel="icon" href="/favicon.ico">
<link rel="canonical" href="https://example.com/page">
<script src="/js/app.js" defer></script>- Ordinary external scripts can block parsing.
deferdownloads during parsing, then executes after parsing in document order.asyncexecutes as soon as available, without preserving order; use it for independent scripts.
Other head elements include title, meta, style, script and the cautiously used base. See MDN script and MDN link.
Free tools Windows power users keep installed
One-click scans. No signup required.
Native interactive elements
<details>
<summary>Show answer</summary>
<p>Additional information.</p>
</details>
<dialog id="help-dialog">
<p>Help content</p>
<form method="dialog"><button>Close</button></form>
</dialog>
<button type="button" aria-label="Close">×</button>details, form controls, links, buttons and dialog provide native behavior. Opening or closing a dialog programmatically still requires JavaScript or a browser interaction. Prefer visible button text where possible.
Accessibility checklist
- Choose semantic elements before ARIA.
- Give informative images useful
alttext; usealt=""for decoration. - Associate every form control with a
label. - Use real buttons for actions and links with
hreffor navigation. - Maintain a meaningful heading hierarchy and set the document
lang. - Use captions and header cells for data tables.
- Provide captions or transcripts for relevant media and meaningful iframe titles.
- Ensure keyboard users can reach and operate controls; never use positive
tabindexas a layout mechanism. - Do not convey meaning by color alone.
ARIA supplements HTML; it does not automatically add keyboard behavior, focus management or interaction logic. A <div role="button" tabindex="0"> is generally inferior to <button type="button">. See MDN ARIA and WHATWG accessibility requirements.
Choosing the right element
| Question | Choose |
|---|---|
| Does the user go somewhere? | a href. |
| Does the user trigger an action? | button. |
| Is this a thematic group with a heading? | section. |
| Could this content stand alone? | article. |
| Is it only a styling or scripting wrapper? | div or span. |
| Is bold or italic purely visual? | CSS; use strong or em only when meaning requires it. |
| Is an image content? | img with appropriate alt text; use a CSS background for decoration. |
Obsolete markup: avoid for new work
| Obsolete or discouraged | Modern alternative |
|---|---|
center, font, big, align |
CSS layout and typography. |
strike |
s or del, according to meaning. |
tt |
code, kbd, samp or CSS. |
acronym |
abbr. |
frameset, frame |
Normal document structure, or iframe when embedding is actually intended. |
marquee, blink |
Do not reproduce these effects; use carefully designed CSS or JavaScript where necessary. |
b, i, u and s are not universally invalid; use their defined semantic or editorial meanings. See WHATWG obsolete features.
Common snippets
<link rel="stylesheet" href="styles.css">
<script src="app.js" defer></script>
<a href="#contact">Contact</a>
<section id="contact"><h2>Contact</h2></section>
<a href="https://developer.mozilla.org/">MDN Web Docs</a>
<a href="https://example.com" target="_blank" rel="noopener">Open example.com</a>
<button type="button">Run action</button>
<button type="submit">Submit form</button>
<button type="reset">Reset form</button>Debugging and validation
When a page is plain text or oddly formatted
- Confirm the file ends in
.htmland the server sends an HTML content type. - Check for
<!doctype html>, misnested tags and a tool that may be escaping markup.
When an image does not load
Check the relative path, filename case, extension, actual format, network response and content-security policy.
Best Value
When a form value is missing
Confirm the control has a name, is inside the intended form, is not disabled, and that the server reads the correct method and parameter.
When a label does not focus its input
<label for="username">Username</label>
<input id="username" name="username">Alternatively, nest the input inside the label.
When a script runs too early
Use <script src="app.js" defer></script>, place the script after the markup, or use async only when execution order and DOM availability do not matter.
When layout is wrong
HTML supplies structure; CSS controls layout. Inspect unclosed elements, browser default margins, specificity, the box model, cascade and the developer-tools DOM tree.
Browsers recover from invalid markup and may build a DOM unlike the source. Use the W3C Markup Validation Service, then test keyboard access, responsive widths, links, images, forms, screen-reader behavior and server-side handling. Validation is not proof of accessibility, security, usability or production readiness.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Where to practice HTML
- CodePen: a simple browser sandbox for HTML, CSS and JavaScript. Its pricing page lists a free plan and paid plans; it does not offer self-hosting. CodePen pricing
- StackBlitz: a fuller browser development environment for projects and repositories, with free, Pro, Teams and enterprise options. StackBlitz pricing
- Visual Studio Code plus optional GitHub Copilot: useful once you need completion, explanations or refactoring. Generated markup should still be checked against MDN and WHATWG. Copilot plans
None is required: HTML is an open web standard and a plain-text editor plus a browser is enough.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
