HTML & CSS reference
HTML & CSS reference
HTML & CSS functions, classes and methods: syntax, parameters, return values and examples.
HTML: document and metadata
- defer, asyncAttributes of an external `<script>` that load it without stopping the page from being parsed; they differ in when the script runs.
- <base>Sets the base address and the default target for all links on the page.
- <body>The visible part of the page: everything the user sees.
- <!DOCTYPE>The document type declaration: tells the browser the page is written in modern HTML.
- <head>The service part of the page: encoding, tab title, linked styles and scripts.
- <html>The root element of the page: `<head>` and `<body>` live inside it.
- <link>Links an external resource to the page: a stylesheet, the site icon, a font.
- <meta>Page metadata: encoding, phone settings, a description for search engines.
- <script>Adds or embeds JavaScript; `<noscript>` shows fallback content when scripts are off.
- <style>Embeds CSS right into the HTML page.
- <title>The page title: the text on the browser tab and in search results.
HTML: text and structure
- <a>A link to another page, a file or a place on the page.
- <abbr>An abbreviation or acronym with its full form.
- <address>Contact details of the author or owner of the page.
- downloadMakes a link save the file instead of opening it, optionally under a different name.
- hrefThe address an `<a>` link leads to or a `<link>` points at.
- target`target` chooses where a link opens; `rel` describes the relation to the linked page.
- <b>, <i>, <u>Highlighting without extra importance: `<b>` in bold, `<i>` in italics, `<u>` underlined.
- <bdi>Isolates text of unknown writing direction so it does not scramble the neighbouring characters.
- <blockquote>A long quotation as a separate block.
- <br>A line break inside text; `<wbr>` marks where a line may break if space runs out.
- <cite>The title of a work: a book, film, article or song.
- <code>A piece of code inside text; shown in a monospace font.
- <data>Links visible text to a machine-readable value — a product code, an exact number — for scripts and search engines.
- <del>, <s>Struck-through text: `<del>` for content removed from the document, `<s>` for outdated content; `<ins>` for added content.
- <dfn>Marks the term that is being defined in this sentence or paragraph.
- <div>A block container without meaning: groups elements for styling and layout.
- <em>Stress emphasis in a sentence; shown in italics by default.
- <h1>–<h6>Headings of six levels: `<h1>` is the main one, `<h6>` the smallest.
- <hr>A thematic break between parts of the text; shown as a horizontal line by default.
- <kbd>, <samp>, <var>Keyboard input (`<kbd>`), program output (`<samp>`) and a variable in a formula (`<var>`).
- <mark>Text highlighted as if with a marker — for example, matches in search results.
- <p>A paragraph of text.
- <pre>Text that keeps all spaces and line breaks.
- <q>A short inline quote; the browser adds the quotation marks itself.
- <ruby>Small annotations shown above (or beside) the base text — pronunciation hints in Chinese and Japanese, transcriptions, glosses.
- <small>Fine print for side comments: terms, copyright, footnotes.
- <span>An inline container without meaning: used to style part of a text.
- <strong>Important text; shown in bold by default.
- <sub>, <sup>Subscript (`<sub>`) and superscript (`<sup>`).
- <time>A date or time readable by both people and programs.
HTML: page sections
- <article>A self-contained piece that makes sense on its own: an article, a post, a review, a product card.
- <aside>A side block related only indirectly to the main content: a sidebar, a call-out, ads.
- <figure>A self-contained illustration — an image, a diagram, code or a quote — with a `<figcaption>` caption.
- <footer>The footer of a page or a section: contacts, copyright, links.
- <header>The header of a page or a section: logo, heading, navigation.
- <hgroup>A heading together with its subtitle or tagline.
- <main>The main content of the page — what the user came for.
- <nav>A block of main navigation: the site menu, a table of contents, breadcrumbs.
- <search>An area for searching or filtering on the page.
- <section>A thematic section of the page with its own heading.
HTML: lists and tables
- <caption>The title of a table.
- <colgroup>, <col>Describes table columns so you can give them a width or background.
- <dl>A description list: terms `<dt>` and their descriptions `<dd>`.
- <li>An item of a `<ul>`, `<ol>` or `<menu>` list.
- <menu>A list of commands — for example, a toolbar; behaves like `<ul>`.
- <ol>A numbered list: items whose order matters.
- <table>A table made of rows (`<tr>`) and cells.
- <td>, <th>Table cells: `<td>` holds data, `<th>` is a header cell.
- <thead>, <tbody>, <tfoot>Groups of table rows: the head, the body and the footer.
- <ul>A bulleted list: items whose order does not matter.
HTML: images and media
- altThe text alternative for an image: read by screen readers and shown if the image fails to load.
- fetchpriorityA hint about how urgent a resource is compared with others of the same kind — for example, to load the main banner before other images.
- loadingLazy loading for images and frames that are not yet visible.
- srcThe address of the embedded file for `<img>`, `<video>`, `<audio>`, `<script>`, `<iframe>`.
- srcsetSeveral files of one image in different sizes: the browser picks the one that fits the screen.
- <audio>Embeds an audio player.
- <canvas>A canvas you draw on from JavaScript: charts, games, effects.
- <iframe>Embeds another page inside the current one: a map, a video, a widget.
- <img>An image.
- <map>, <area>An image map: different areas of a picture lead to different addresses.
- <object>, <embed>Embed an external file — for example, a PDF — using the browser's own viewer.
- <picture>A container for several versions of an image: the browser picks a matching `<source>` or falls back to `<img>`.
- <source>One of the file versions for `<video>`, `<audio>` or `<picture>`.
- <svg>Vector graphics right in HTML: shapes, icons, diagrams.
- <track>Adds subtitles or chapters to a video.
- <video>Embeds a video in the page.
HTML: forms
- autocompleteTells the browser which saved data to fill into a field.
- disabledDisables a form control: it cannot be used, and its value is not submitted.
- inputmodeTells phones and tablets which on-screen keyboard to show for a field, without changing what the field accepts.
- patternA pattern (regular expression) the field value must match.
- placeholderA hint or example inside an empty field.
- requiredMakes a field required: the form will not submit while it is empty.
- typeThe kind of an `<input>` field: from text and numbers to a date, colour and file.
- <button>A button: submits a form or triggers an action.
- <datalist>A list of suggestions for a text field: pick an option or type your own.
- <fieldset>, <legend>A group of related form fields with a `<legend>` title.
- <form>A form: collects data from its fields and sends it to the server.
- <input>An input field; its kind is set by the `type` attribute.
- <input type="checkbox">A checkbox is an independent yes/no choice; a radio button picks one option from a group.
- <label>A label for a form field.
- <meter>A gauge for a value within a known range: battery, usage, a rating.
- <option>, <optgroup>An item of a `<select>` or `<datalist>`; `<optgroup>` puts items into groups.
- <output>The result of a calculation or a user action.
- <progress>A progress bar for a task: an upload, the steps of a form.
- <select>A drop-down list of options.
- <textarea>A multi-line text field.
HTML: interactive elements
- <details>, <summary>A disclosure block without JavaScript: `<summary>` is the visible title, the rest is hidden until clicked.
- <dialog>A dialog box; a modal one is opened with `showModal()` and blocks the rest of the page.
- <template>, <slot>A markup blueprint that stays hidden until JavaScript copies it; `<slot>` is an insertion point in web components.
HTML: global attributes
- accesskeyA keyboard shortcut for an element.
- aria-*Accessibility attributes: the role, name and state of an element for screen readers.
- autofocusFocuses the element right after the page loads or a dialog opens.
- classOne or more classes of an element — the main way to reach it from CSS.
- contenteditableMakes an element's content editable right on the page.
- data-*Custom attributes for storing data in markup; the name starts with `data-`.
- dirThe writing direction: left to right or right to left.
- draggableAllows or forbids dragging an element with the mouse.
- hiddenHides an element: it is not shown and not available to screen readers.
- idA unique identifier of an element on the page.
- inertMakes part of the page inactive: it cannot be clicked, reached with Tab or selected.
- langThe language of an element's content.
- popoverTurns an element into a layer that pops up over the page — without JavaScript.
- spellcheckTurns spell checking in a field on or off.
- styleCSS properties right on the element (inline styles).
- tabindexControls whether an element can be reached with the Tab key.
- titleExtra information about an element; shown as a tooltip on mouse hover.
- translate="no"Tells automatic translators that the text should not be translated.
CSS: selectors and pseudo-classes
- :activeMatches an element while it is being pressed — between pressing and releasing the mouse button.
- :checkedMatches a checked checkbox or radio button, and a selected `<option>`.
- :disabledMatches form elements with the `disabled` attribute; `:enabled` matches the active ones.
- ::afterCreates a virtual last child of the element — for icons, marks and decorations after the content.
- ::backdropThe layer right behind a modal `<dialog>` or an element in full-screen mode.
- ::beforeCreates a virtual first child of the element — for decorative text or shapes.
- ::file-selector-buttonThe "Choose file" button inside `<input type="file">`; lets you style it like the other buttons on the page.
- ::first-letterStyles the first letter of a block's first line — for drop caps.
- ::first-lineStyles the first rendered line of a block — however many words fit on it.
- ::markerThe bullet or number of a list item.
- ::placeholderThe placeholder text of a field — the hint from the `placeholder` attribute.
- ::selectionThe part of the text the user has selected.
- :emptyMatches an element with no children and no text.
- :first-childMatches an element that is the first child of its parent.
- :focusMatches the element that currently has focus: a field being typed into, a button selected with Tab.
- :focus-visibleMatches a focused element when the browser decides the focus should be visible — usually after keyboard navigation.
- :has()Matches an element that contains something matching the selector in brackets — the "parent selector".
- :hoverMatches an element while the mouse pointer is over it.
- :is()Matches an element that matches any selector in the list — a way to shorten long selector lists.
- :last-childMatches an element that is the last child of its parent.
- :not()Matches elements that do not match any of the selectors in the brackets.
- :nth-child()Matches children by their position: the third, every even one, every third one.
- :nth-of-type()Like `:nth-child()`, but counts only siblings with the same tag.
- :placeholder-shownMatches an `<input>` or `<textarea>` while its placeholder is visible, that is, while the field is empty.
- :requiredMatches fields with the `required` attribute; `:optional` matches those without it.
- :rootMatches the root element of the document — `<html>` on a web page.
- :targetMatches the element whose `id` equals the fragment in the address after `#`.
- :user-invalidMatches an invalid field only after the user has interacted with it; `:user-valid` is the opposite.
- :valid`:valid` matches a field whose value passes the built-in checks; `:invalid` matches one that does not.
- :visitedMatches links the user has already opened; `:link` matches those not yet visited.
- :where()Works like `:is()`, but always has zero specificity.
- [attr]Selects elements by an attribute or by its value.
- A > BThe child combinator: selects elements B that are direct children of A.
- .classSelects elements that have the given class in the `class` attribute.
- A BThe descendant combinator: selects elements B that are anywhere inside an element A.
- #idSelects the single element with the given `id` attribute.
- A, BA selector list: one rule for several selectors separated by commas.
- &The nesting selector: inside a nested rule, `&` stands for the parent selector.
- A + BSibling combinators: `+` selects the element right after A, `~` selects all following siblings of A.
- tagThe type selector picks every element with the given tag; the universal selector `*` picks every element.
CSS: text and fonts
- counter-reset`counter-reset` creates a CSS counter (or resets it), `counter-increment` increases it on each matching element; the value is printed with `counter()`.
- fontA shorthand that sets the style, weight, size, line height and family of the font in one line.
- font-displayA descriptor of `@font-face` (not an ordinary property): decides what the text looks like while the web font is still loading.
- font-familyThe font family, with a list of fallbacks.
- font-sizeThe size of the font.
- font-styleItalic or normal text.
- font-variation-settingsSets the axes of a variable font directly — weight, width, slant or the font's own custom axes — to any number, not just fixed steps.
- font-weightThe weight (boldness) of the font.
- hyphensAutomatic hyphenation of words at line ends.
- letter-spacingExtra space between letters.
- line-heightThe height of a line of text — the distance between lines.
- list-styleThe look of list markers: their type, position and image.
- overflow-wrapAllows a long word to break so that it does not stick out of its block.
- text-alignHorizontal alignment of text and inline content inside a block.
- text-decorationLines on text: underline, strikethrough, overline.
- text-indentThe indent of the first line of a block.
- text-overflowHow text that does not fit is cut: abruptly or with an ellipsis.
- text-shadowA shadow behind the letters of the text.
- text-transformChanges the case of letters on display.
- text-wrapHow lines are broken: as usual, balanced in length, or avoiding a lonely last word.
- vertical-alignVertical alignment of an inline element within a line, or of content in a table cell.
- white-spaceHow spaces and line breaks in the source are handled and whether lines may wrap.
- word-breakWhether words may be broken between any two letters.
- word-spacingExtra space between words.
- writing-modeSets the direction in which lines run: horizontally (the usual) or vertically, as in Japanese or on the spine of a book.
CSS: color, background and borders
- accent-colorThe accent color of built-in form controls: checkboxes, radio buttons, sliders and progress bars.
- backgroundA shorthand for all background properties: color, image, position, size and repeat.
- background-colorThe background color of an element.
- background-imageOne or more background images: files or gradients.
- background-positionWhere the background image is placed inside the block.
- background-repeatWhether the background image repeats to fill the block.
- background-sizeThe size of a background image.
- borderA border around the element: width, style and color in one property.
- border-collapseWhether the borders of table cells are separate or merged into single lines.
- border-radiusRounds the corners of an element.
- box-shadowA shadow around the element's box.
- colorThe color of the text (and the default color of borders and SVG icons).
- color-schemeTells the browser which color schemes the page supports, so built-in controls and scrollbars match.
- opacityThe transparency of the whole element together with its content.
- outlineAn outline around the element that takes no space and does not shift neighbors.
CSS: sizes and spacing
- aspect-ratioThe ratio of width to height: the browser computes the missing dimension.
- box-sizingWhether `width` and `height` include the padding and the border.
- heightThe height of an element.
- marginThe outer spacing of an element — the distance to its neighbors.
- margin-inlineLogical properties: sizes and spacing by the direction of the text instead of left, right, top and bottom.
- max-heightThe maximum height: the element grows with its content only up to this limit.
- max-widthThe maximum width: the element can be narrower, but never wider.
- min-heightThe minimum height: the element is at least this tall, but can grow.
- min-widthThe minimum width: the element cannot become narrower.
- object-fitHow the picture of an `<img>` or `<video>` fits into the element's box.
- object-positionWhich part of a cropped `<img>` or `<video>` stays visible.
- overflowWhat to do with content that does not fit into the element.
- paddingThe inner spacing between the content and the border of an element.
- widthThe width of an element.
CSS: display and positioning
- anchor-nameNames an element as an anchor, so that an absolutely positioned element anywhere on the page can be placed next to it.
- appearanceTurns off the built-in look of form controls so they can be styled from scratch.
- clearMakes an element start below the floated elements before it.
- containPromises the browser that an element is independent of the rest of the page, so changes inside it do not force the whole page to be recalculated.
- contentThe content of the `::before` and `::after` pseudo-elements.
- content-visibilityLets the browser skip laying out and painting an element's content while it is off screen — a cheap speed-up for long pages.
- cursorThe look of the mouse pointer over the element.
- displayDecides how an element behaves in the flow and how it lays out its content.
- floatPushes an element to the left or right edge so that text flows around it.
- anchor()Returns the position of a side of the anchor element; used in `top`, `left`, `right`, `bottom` to attach an element to it.
- pointer-eventsWhether the element reacts to mouse clicks and taps, or lets them pass to what is below.
- positionHow an element is positioned: in the normal flow or by offsets.
- position-anchorChooses the default anchor for an absolutely or fixed positioned element; `position-area` and `anchor()` then measure from it.
- position-areaPlaces an anchored element in one of nine cells of an imaginary 3 × 3 grid around its anchor.
- position-try-fallbacksLists backup positions for an anchored element; the browser uses the first one where the element fits on the screen. Custom positions are described with `@position-try`.
- resizeWhether the user can resize an element by dragging its corner.
- scroll-behaviorWhether jumps to anchors and scrolling from code happen instantly or smoothly.
- scroll-marginExtra space kept around an element when the page scrolls to it — so it does not end up under a fixed header.
- scroll-snap-typeMakes a scrolling container stop exactly at its children — for sliders and galleries.
- shape-outsideSets the shape that text wraps around next to a floated element — a circle, a polygon or the outline of an image.
- top, right, bottom, leftThe offsets of a positioned element from the edges of its reference box: top, right, bottom and left.
- user-selectWhether the user can select the text of an element.
- visibilityHides an element but keeps the space it occupies.
- z-indexWhich positioned element is drawn on top when they overlap.
CSS: flexbox and grid
- align-contentDistributes the lines of a multi-line flex container, or the rows of a grid, along the cross axis.
- align-itemsAligns items across the main axis — vertically in a row.
- align-selfAligns one item across the main axis, overriding the container's `align-items`.
- flexA shorthand for how a flex item grows, shrinks and what size it starts from.
- flex-basisThe starting size of a flex item along the main axis, before free space is shared.
- flex-directionThe direction of the main axis of a flex container: items in a row or in a column.
- flex-growHow much of the free space a flex item takes.
- flex-shrinkHow much a flex item shrinks when there is not enough space.
- flex-wrapWhether flex items may wrap onto new lines.
- gapThe gaps between items in flexbox and grid.
- grid-areaPlaces a grid item into a named area or between given lines.
- grid-auto-flowHow the grid places items that have no explicit position.
- grid-columnWhich columns a grid item occupies.
- grid-rowWhich rows a grid item occupies.
- grid-template-areasDraws the grid layout as a map of named areas.
- grid-template-columnsThe number and widths of the columns of a grid.
- grid-template-rowsThe number and heights of the rows of a grid.
- justify-contentDistributes items along the main axis of a flex or grid container.
- justify-itemsAligns grid items horizontally inside their cells.
- orderChanges the visual order of a flex or grid item.
- place-itemsSets `align-items` and `justify-items` at once.
- subgridA value of `grid-template-columns` and `grid-template-rows` that makes a nested grid reuse the tracks of its parent grid.
CSS: effects and animation
- animationRuns a `@keyframes` animation on an element.
- animation-rangeSets which part of a scroll timeline the animation occupies — for example, only while the element is entering the screen.
- animation-timelineTies a CSS animation to scrolling instead of time: the animation progresses as the page or an element is scrolled.
- backdrop-filterApplies filters to everything behind the element — the frosted glass effect.
- clip-pathClips an element to a shape: only the part inside the shape stays visible.
- filterGraphic effects on an element: blur, black and white, brightness, shadow by shape.
- scroll()Create anonymous scroll timelines for `animation-timeline`: `scroll()` tracks a scroll container, `view()` tracks the element's own trip through the visible area.
- interpolate-sizeAllows transitions to and from size keywords such as `auto`, `min-content` and `fit-content` — finally, `height: 0` → `height: auto`.
- mask-imageUses an image or a gradient as a mask: where the mask is opaque the element is visible, where it is transparent the element disappears.
- mix-blend-modeHow the colors of an element mix with what lies beneath it, as layer modes in a graphics editor.
- transformMoves, rotates, scales or skews an element without affecting the layout around it.
- transitionAnimates the change of a property from the old value to the new one.
- transition-behaviorAllows transitions of discrete properties such as `display` and `overlay`, so an element can fade out before it disappears.
- translate, rotate, scaleSeparate properties for a shift, a rotation and scaling — instead of functions in `transform`.
- view-transition-nameGives an element a name so that a view transition animates it separately from the rest of the page.
- will-changeWarns the browser that a property is about to change, so it can prepare in advance.
CSS: functions and values
- calc()Calculates a value from an expression — even with mixed units.
- clamp()Keeps a value within limits: the preferred value, but not less than the minimum and not more than the maximum.
- color-mix()Mixes two colors in the given proportion.
- counter()Prints the value of a CSS counter in `content`; `counters()` prints all nested levels at once, like 2.1.3.
- env()Reads values set by the device, such as the safe areas around a phone's notch and rounded corners.
- fit-content()A grid track as wide as its content, but not wider than the limit.
- hsl()A color by hue, saturation and lightness.
- light-dark()Picks one of two colors depending on the current color scheme.
- linear-gradient()A smooth transition between colors along a straight line — used as a background image.
- max()Takes the largest of the values — a way to set a lower limit.
- min()Takes the smallest of the values — a way to set an upper limit.
- minmax()A grid track size between a minimum and a maximum.
- oklch()A color in the OKLCH space: perceived lightness, chroma and hue.
- radial-gradient()A transition between colors from a center outwards.
- repeat()Repeats grid tracks instead of writing them out one by one.
- rgb()A color from red, green and blue components, with optional transparency.
- url()A reference to a file: an image, a font, a style sheet.
- var()Inserts the value of a custom property (a CSS variable).
- inherit, initial, unset, revertKeywords that work in any property and reset it in different ways.
- !importantMakes a declaration win over all ordinary declarations, regardless of specificity.
- px, em, rem, %, vw, vhUnits for lengths in CSS: absolute pixels and relative units.
CSS: at-rules
- @containerApplies rules depending on the size of a container rather than the window.
- @counter-styleDefines your own list numbering style, which can then be used in `list-style-type` and `counter()`.
- @font-faceLoads a font and gives it a name to use in `font-family`.
- @importIncludes another CSS file into the current one.
- @keyframesDescribes the steps of an animation that is then started with the `animation` property.
- @layerGroups styles into cascade layers: a later layer wins regardless of specificity.
- @propertyRegisters a custom property with a type, so the browser can animate it and check its value.
- @scopeApplies rules only inside a given element (the scope root), optionally stopping at an inner boundary.
- @starting-styleSets the styles an element starts from when it first appears, so a `transition` can animate its entrance.
- @supportsApplies rules only if the browser supports a given property, value or selector.
- @view-transitionTurns on animated transitions between pages of the same site.
- @mediaApplies rules only under given conditions — the window width, the system theme and others.