This sheet lists the HTML tags and CSS properties used on almost every website, grouped by job: document setup, semantic layout, text, lists, media, forms, selectors, units, layout and visual styling. Type in the filter to find one, open a mini demo to see it work, or press Print for a clean paper copy.
| Part | Entries |
|---|---|
| HTML | 43 |
| CSS | 32 |
| With a live demo | 10 |
Updated
Filter by keyword or switch between HTML and CSS, and the list narrows as you type. Entries with a demo open a small sandboxed preview. The print layout hides the controls and keeps each group's table together on the page.
| Tag or property | Syntax | What it does |
|---|---|---|
| <!doctype html> | <!doctype html> | First line of every page; turns on standards mode |
| <html> | <html lang="en"> | Root element; lang sets the page language |
| <head> | <head>...</head> | Metadata, title, links to CSS and scripts |
| <meta> | <meta name="viewport" content="width=device-width, initial-scale=1"> | Charset, viewport, description and social tags |
| <link> | <link rel="stylesheet" href="styles.css"> | Connects stylesheets, icons and preloads |
| <script> | <script src="app.js" defer></script> | Loads JavaScript; defer runs it after parsing |
| Tag or property | Syntax | What it does |
|---|---|---|
| <header> | <header>...</header> | Intro or top bar of a page or section |
| <nav> | <nav aria-label="Main">...</nav> | A block of major navigation links |
| <main> | <main>...</main> | The unique main content; one per page |
| <section> | <section><h2>...</h2></section> | A themed group of content, usually with a heading |
| <article> | <article>...</article> | Self-contained content such as a post or product card |
| <aside> | <aside>...</aside> | Related but secondary content, like a sidebar |
| <footer> | <footer>...</footer> | Closing info: contact, legal, links |
| <details> | <details><summary>Q</summary>A</details> | Native disclosure widget, no script needed |
| <dialog> | <dialog open>...</dialog> | A modal or non-modal dialog box |
| Tag or property | Syntax | What it does |
|---|---|---|
| <h1> to <h6> | <h1>Title</h1> | Headings in order; one h1 per page is the norm |
| <p> | <p>Text</p> | A paragraph |
| <strong> / <em> | <strong>Important</strong> <em>stress</em> | Strong importance and emphasis, bold and italic by default |
| <mark> | <mark>highlight</mark> | Highlighted text |
| <code> / <pre> | <pre><code>...</code></pre> | Inline code and preformatted blocks |
| <blockquote> | <blockquote cite="url">...</blockquote> | An extended quotation |
| <abbr> | <abbr title="HyperText Markup Language">HTML</abbr> | Abbreviation with its expansion |
| <time> | <time datetime="2026-10-14">Oct 14</time> | A machine-readable date or time |
| <br> / <hr> | <br> <hr> | Line break inside text; thematic break between blocks |
| Tag or property | Syntax | What it does |
|---|---|---|
| <ul> / <ol> / <li> | <ul><li>Item</li></ul> | Unordered and ordered lists |
| <dl> / <dt> / <dd> | <dl><dt>Term</dt><dd>Definition</dd></dl> | Description list of name and value pairs |
| <table> | <table><caption>..</caption><thead>..</thead><tbody>..</tbody></table> | Tabular data with caption, head and body |
| <th scope> | <th scope="col">Price</th> | Header cell; scope links it to its column or row |
| Tag or property | Syntax | What it does |
|---|---|---|
| <a> | <a href="/about">About</a> | A link; add target and rel for new tabs |
| <img> | <img src="a.jpg" alt="..." width="800" height="600" loading="lazy"> | An image; alt, width and height are expected |
| <picture> | <picture><source srcset="a.avif" type="image/avif"><img ...></picture> | Art direction and format fallbacks |
| <figure> | <figure><img ...><figcaption>..</figcaption></figure> | Self-contained media with a caption |
| <video> | <video src="v.mp4" controls playsinline></video> | Embedded video |
| <iframe> | <iframe src="..." title="..." loading="lazy"></iframe> | Embeds another page |
| <svg> | <svg viewBox="0 0 24 24">...</svg> | Inline vector graphics |
| Tag or property | Syntax | What it does |
|---|---|---|
| <form> | <form action="/subscribe" method="post"> | Wraps inputs and submits them |
| <label> | <label for="email">Email</label> | Names a control; clicking it focuses the control |
| <input> | <input id="email" type="email" required> | Text, email, number, date, checkbox, radio and more |
| <select> | <select><option>One</option></select> | Dropdown list |
| <textarea> | <textarea rows="4"></textarea> | Multi-line text input |
| <button> | <button type="submit">Send</button> | A button; set type to avoid accidental submits |
| <fieldset> / <legend> | <fieldset><legend>Delivery</legend>...</fieldset> | Groups related controls under a caption |
| Validation attributes | required minlength="2" pattern="[0-9]{5}" | Built-in checks before submit |
| Tag or property | Syntax | What it does |
|---|---|---|
| Type, class, ID | p {} .card {} #top {} | Element name, class and ID selectors |
| Descendant / child | .nav a {} .nav > a {} | Any depth versus direct children only |
| Sibling | h2 + p {} h2 ~ p {} | Next sibling, or any later sibling |
| Attribute | a[href^="https"] {} | Matches by attribute presence or value |
| :hover / :focus-visible | a:hover {} button:focus-visible {} | Pointer over and keyboard focus states |
| :nth-child() | li:nth-child(odd) {} | Picks items by position |
| :has() / :is() / :where() | .card:has(img) {} | Parent matching and selector grouping |
| ::before / ::after | .req::after { content: " *" } | Generated content before or after an element |
| Tag or property | Syntax | What it does |
|---|---|---|
| px | border: 1px solid | Absolute CSS pixel |
| rem / em | font-size: 1.125rem | Relative to the root font size / to the element's font size |
| % | width: 50% | Relative to the parent (which dimension depends on the property) |
| vw / vh / dvh | min-height: 100dvh | Viewport units; dvh tracks mobile toolbars |
| ch | max-width: 65ch | Width of the 0 glyph, handy for line length |
| fr | grid-template-columns: 1fr 2fr | Share of free space in a grid |
| clamp() | font-size: clamp(1rem, 2.5vw, 2rem) | Fluid value between a minimum and maximum |
| Tag or property | Syntax | What it does |
|---|---|---|
| box-sizing | *, *::before, *::after { box-sizing: border-box } | Width includes padding and border |
| margin / padding | margin: 0 auto; padding: 1rem 2rem | Space outside and inside the border |
| display | display: block | inline | flex | grid | none | How the box takes part in layout |
| Flexbox | display: flex; gap: 1rem; align-items: center | One-dimensional rows or columns |
| Grid | display: grid; grid-template-columns: repeat(3, 1fr) | Two-dimensional rows and columns |
| position | position: relative | absolute | fixed | sticky | Takes a box out of, or pins it within, normal flow |
| z-index | z-index: 10 | Stacking order of positioned elements |
| overflow | overflow: auto | What happens to content that does not fit |
| @media | @media (min-width: 768px) { ... } | Styles for a screen size or preference |
| Tag or property | Syntax | What it does |
|---|---|---|
| color / background | color: #111; background: #fff | Text colour and background |
| font | font: 600 1rem/1.5 system-ui, sans-serif | Weight, size, line height and family in one line |
| border / border-radius | border: 1px solid #ddd; border-radius: 12px | Outline and rounded corners |
| box-shadow | box-shadow: 0 4px 12px rgb(0 0 0 / .15) | Drop shadow around the box |
| opacity | opacity: .5 | Transparency of the whole element |
| transform | transform: rotate(5deg) scale(1.05) | Move, rotate, scale or skew without affecting layout |
| transition | transition: transform 200ms ease | Animates changes between states |
| var() | --brand: #4F98FB; color: var(--brand) | Custom properties (CSS variables) |
A header, main content with a form and a footer, styled with a handful of the properties from the sheet.
<style>
*, *::before, *::after { box-sizing: border-box }
body { font: 15px/1.5 system-ui, sans-serif; margin: 0 }
header, footer { padding: 10px 14px; background: #0f172a; color: #fff }
main { padding: 14px; max-width: 60ch }
label { display: block; margin-bottom: 6px }
input { padding: 8px; border: 1px solid #cbd5e1; border-radius: 8px; width: 100% }
button { margin-top: 8px; padding: 8px 14px; border: 0; border-radius: 999px; background: #4F98FB; color: #fff }
</style>
<header><strong>Harbour Bakery</strong></header>
<main>
<h1 style="margin: 0 0 8px; font-size: 20px">Join the bread list</h1>
<form><label for="e">Email</label><input id="e" type="email" required><button type="submit">Subscribe</button></form>
</main>
<footer><small>Open daily from 7am</small></footer>HTML says what each piece of content is: a heading, a list, a form field, a navigation block. CSS says how it looks and where it goes. Keeping them separate means one stylesheet can restyle hundreds of pages and the markup stays readable to search engines and assistive tech.
When you are unsure which element to use, ask what the content would be called in a printed document. A list of steps is an ol, a set of facts is a dl or a table, a sidebar note is an aside.
A rule is a selector, then braces holding property and value pairs separated by semicolons. When two rules target the same element, the more specific selector wins; if they tie, the one later in the stylesheet wins.
The HTML Living Standard defines well over a hundred elements, but day-to-day pages use a few dozen. This sheet covers the ones you will meet on nearly every site; MDN keeps the complete element reference.
A tag is the markup you type, such as <p> or </p>. An element is the whole thing the browser builds from it: the start tag, its content and the end tag. Void elements like <img> and <br> have no end tag at all.
Yes. The Print button opens your browser's print dialog with a layout that drops the filter, buttons and demos and keeps the syntax tables. Choose Save as PDF to keep a digital copy.
Learn the CSS properties first. Utility frameworks are shorthand for them, so knowing that p-4 means padding: 1rem makes the framework easier, and debugging in developer tools always shows the underlying CSS.
Related: CSS selectors cheat sheet, Flexbox and grid cheat sheet, HTML boilerplate, CSS text styling, HTML accessibility checker, Modern CSS features.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.