HTML Cheatsheet
HTML describes the meaning and structure of a page. Use the right element first, then style with CSS.
This sheet covers everyday tags and patterns from a valid document skeleton through accessible forms. Pair it with the full HTML tutorials for step-by-step practice.
Full lessons: HTML Tutorials
Document structure
<!DOCTYPE html>
Tells the browser to use standards mode for an HTML5 document. Put it on the first line.
<html lang>
Root element. Set lang so assistive tech and browsers know the page language.
<head>
Holds metadata, the title, charset, viewport, and links to CSS or icons—not visible page content.
<meta charset>
Declares character encoding. Prefer UTF-8 near the top of head.
Viewport meta
Helps mobile browsers size the layout correctly instead of zooming a desktop page.
<body>
Contains everything users see: headings, text, media, forms, and scripts that run on the page.
Welcome
Start here.
Semantic landmarks
Use header, nav, main, section, article, and footer to outline the page.
Text & headings
Heading hierarchy
One h1 for the page topic, then h2–h6 for subsections—do not skip levels for styling.
Course notes
Week 1
Setup
<p>
Marks a paragraph of text. Prefer separate paragraphs over stacking <br> for spacing.
HTML structures content.
CSS styles it.
<br> and <hr>
br is a deliberate line break; hr is a thematic break between sections of content.
Line one
Line two
New topic
Emphasis
strong for strong importance; em for stress emphasis. Avoid using them only for bold or italic looks.
Save often. Press Enter to submit.
<code> and <pre>
marks short code in a sentence; pre keeps whitespace for longer snippets.
Use the title tag.
<title>Home</title>
Comments
HTML comments are ignored by the browser. Useful for notes; do not put secrets in them.
Links & media
Link targets
Relative paths stay on your site; absolute URLs go elsewhere. Use mailto: for email links.
<img>
Embeds an image. Always provide meaningful alt (or empty alt="" for pure decoration).
<figure> + <figcaption>
Groups media with a visible caption that belongs with the image or illustration.
Audio & video
HTML5 media with controls. Offer a fallback message and captions or a transcript when needed.
Favicon
Small site icon shown in tabs and bookmarks. Link it from head.
Lists & tables
Unordered list
ul for items with no required order. Each item is an li.
- HTML
- CSS
- JavaScript
Ordered list
ol for sequenced steps or ranked items.
- Install tools
- Create a file
- Open in a browser
Description list
dl with dt terms and dd descriptions—good for glossaries.
- Tag
- An HTML element name in angle brackets.
Basic table
Use tables for tabular data, not page layout. Include a caption and header cells.
| Day | Topic |
|---|---|
| Mon | HTML |
Header scope
Mark column or row headers with th and scope so screen readers associate cells correctly.
Forms
<form>
Groups controls that submit together. Set action and method for the server endpoint.
Labels
Every control needs a visible label. Connect with matching for and id, or wrap the control.
Common inputs
Choose a type that matches the data: text, email, password, number, checkbox, radio, file, and more.
select & textarea
select for a list of options; textarea for multi-line text.
Buttons
type="submit" sends the form; type="button" does not. Prefer <button> over styled links for actions.
Accessibility basics
Meaningful text
Write headings, link text, and button labels that describe the destination or action without relying on nearby layout.
alt text
Describe the purpose of the image. Decorative images use empty alt so screen readers skip them.
Keyboard focus
Everything interactive must be reachable with Tab. Do not remove focus outlines without an equally clear replacement.
Language & titles
Set lang on html and give every page a unique, descriptive title.
Skip link pattern
A first-in-page link that jumps to main content helps keyboard users skip repeated navigation.
Comments
One comment per signed-in account. Comments are saved with this page’s URL.