Scribd
Upload
9 views

HTML Elements Reference

Uploaded by

Ukasha Kasim
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
9 views

HTML Elements Reference

Uploaded by

Ukasha Kasim
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 33

HTML elements reference

This page lists all the HTML elements, which are created using tags.

They are grouped by function to help you find what you have in mind easily. An alphabetical list
of all elements is provided in the sidebar on every element's page as well as this one.

Note: For more information about the basics of HTML elements and attributes, see the section
on elements in the Introduction to HTML article.

Main root
Elemen
Description
t
Represents the root (top-level element) of an HTML document, so it is also referred
<html>
to as the root element. All other elements must be descendants of this element.

Document metadata
Metadata contains information about the page. This includes information about styles, scripts and
data to help software (search engines, browsers, etc.) use and render the page. Metadata for
styles and scripts may be defined in the page or linked to another file that has the information.

Elemen
Description
t
Specifies the base URL to use for all relative URLs in a document. There can be
<base>
only one such element in a document.
Contains machine-readable information (metadata) about the document, like
<head>
its title, scripts, and style sheets.
Specifies relationships between the current document and an external resource. This
element is most commonly used to link to CSS but is also used to establish site
<link>
icons (both "favicon" style icons and icons for the home screen and apps on mobile
devices) among other things.
<meta Represents metadata that cannot be represented by other HTML meta-related
> elements, like <base>, <link>, <script>, <style> and <title>.
Contains style information for a document or part of a document. It contains CSS,
<style>
which is applied to the contents of the document containing this element.
Defines the document's title that is shown in a browser's title bar or a page's tab. It
<title>
only contains text; tags within the element are ignored.

Sectioning root
Elemen
Description
t
represents the content of an HTML document. There can be only one such element
<body>
in a document.

Content sectioning
Content sectioning elements allow you to organize the document content into logical pieces. Use
the sectioning elements to create a broad outline for your page content, including header and
footer navigation, and heading elements to identify sections of content.

Element Description
Indicates that the enclosed HTML provides contact
<address>
information for a person or people, or for an organization.
Represents a self-contained composition in a document,
page, application, or site, which is intended to be
independently distributable or reusable (e.g., in
<article> syndication). Examples include a forum post, a magazine or
newspaper article, a blog entry, a product card, a user-
submitted comment, an interactive widget or gadget, or any
other independent item of content.
Represents a portion of a document whose content is only
<aside> indirectly related to the document's main content. Asides
are frequently presented as sidebars or call-out boxes.
Represents a footer for its nearest ancestor sectioning
content or sectioning root element. A <footer> typically
<footer>
contains information about the author of the section,
copyright data, or links to related documents.
Represents introductory content, typically a group of
introductory or navigational aids. It may contain some
<header>
heading elements but also a logo, a search form, an author
name, and other elements.
<h1>, <h2>, <h3>, <h4>, <h Represent six levels of section headings. <h1> is the
5>, <h6> highest section level and <h6> is the lowest.
Represents a heading grouped with any secondary content,
<hgroup>
such as subheadings, an alternative title, or a tagline.
Represents the dominant content of the body of a document.
The main content area consists of content that is directly
<main>
related to or expands upon the central topic of a document,
or the central functionality of an application.
Represents a section of a page whose purpose is to provide
navigation links, either within the current document or to
<nav>
other documents. Common examples of navigation sections
are menus, tables of contents, and indexes.
<section> Represents a generic standalone section of a document,
Element Description
which doesn't have a more specific semantic element to
represent it. Sections should always have a heading, with
very few exceptions.
Represents a part that contains a set of form controls or
<search> other content related to performing a search or filtering
operation.

Text content
Use HTML text content elements to organize blocks or sections of content placed between the
opening <body> and closing </body> tags. Important for accessibility and SEO, these elements
identify the purpose or structure of that content.

Element Description
Indicates that the enclosed text is an extended quotation. Usually, this is rendered
<blockquo visually by indentation. A URL for the source of the quotation may be given
te> using the cite attribute, while a text representation of the source can be given
using the <cite> element.
Provides the description, definition, or value for the preceding term (<dt>) in a
<dd>
description list (<dl>).
The generic container for flow content. It has no effect on the content or layout
<div> until styled in some way using CSS (e.g., styling is directly applied to it, or some
kind of layout model like flexbox is applied to its parent element).
Represents a description list. The element encloses a list of groups of terms
(specified using the <dt> element) and descriptions (provided
<dl>
by <dd> elements). Common uses for this element are to implement a glossary
or to display metadata (a list of key-value pairs).
Specifies a term in a description or definition list, and as such must be used
inside a <dl> element. It is usually followed by a <dd> element; however,
<dt>
multiple <dt> elements in a row indicate several terms that are all defined by the
immediate next <dd> element.
<figcaptio Represents a caption or legend describing the rest of the contents of its
n> parent <figure> element.
Represents self-contained content, potentially with an optional caption, which is
<figure> specified using the <figcaption> element. The figure, its caption, and its
contents are referenced as a single unit.
Represents a thematic break between paragraph-level elements: for example, a
<hr>
change of scene in a story, or a shift of topic within a section.
Represents an item in a list. It must be contained in a parent element: an ordered
list (<ol>), an unordered list (<ul>), or a menu (<menu>). In menus and
<li> unordered lists, list items are usually displayed using bullet points. In ordered
lists, they are usually displayed with an ascending counter on the left, such as a
number or letter.
ElementDescription
A semantic alternative to <ul>, but treated by browsers (and exposed through
<menu> the accessibility tree) as no different than <ul>. It represents an unordered list of
items (which are represented by <li> elements).
<ol> Represents an ordered list of items — typically rendered as a numbered list.
Represents a paragraph. Paragraphs are usually represented in visual media as
blocks of text separated from adjacent blocks by blank lines and/or first-line
<p>
indentation, but HTML paragraphs can be any structural grouping of related
content, such as images or form fields.
Represents preformatted text which is to be presented exactly as written in the
<pre> HTML file. The text is typically rendered using a non-proportional,
or monospaced, font. Whitespace inside this element is displayed as written.
<ul> Represents an unordered list of items, typically rendered as a bulleted list.

Inline text semantics


Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or
any arbitrary piece of text.

Elemen
Description
t
Together with its href attribute, creates a hyperlink to web pages, files, email
<a>
addresses, locations within the current page, or anything else a URL can address.
<abbr> Represents an abbreviation or acronym.
Used to draw the reader's attention to the element's contents, which are not
otherwise granted special importance. This was formerly known as the Boldface
element, and most browsers still draw the text in boldface. However, you should not
<b>
use <b> for styling text or granting importance. If you wish to create boldface text,
you should use the CSS font-weight property. If you wish to indicate an element is
of special importance, you should use the strong element.
Tells the browser's bidirectional algorithm to treat the text it contains in isolation
<bdi> from its surrounding text. It's particularly useful when a website dynamically inserts
some text and doesn't know the directionality of the text being inserted.
Overrides the current directionality of text, so that the text within is rendered in a
<bdo>
different direction.
Produces a line break in text (carriage-return). It is useful for writing a poem or an
<br>
address, where the division of lines is significant.
Used to mark up the title of a cited creative work. The reference may be in an
<cite> abbreviated form according to context-appropriate conventions related to citation
metadata.
Displays its contents styled in a fashion intended to indicate that the text is a short
<code> fragment of computer code. By default, the content text is displayed using the user
agent's default monospace font.
<data> Links a given piece of content with a machine-readable translation. If the content is
Elemen
Description
t
time- or date-related, the<time> element must be used.
Used to indicate the term being defined within the context of a definition phrase or
<dfn> sentence. The ancestor <p> element, the <dt>/<dd> pairing, or the nearest section
ancestor of the <dfn> element, is considered to be the definition of the term.
Marks text that has stress emphasis. The <em> element can be nested, with each
<em>
nesting level indicating a greater degree of emphasis.
Represents a range of text that is set off from the normal text for some reason, such
as idiomatic text, technical terms, and taxonomical designations, among others.
<i>
Historically, these have been presented using italicized type, which is the original
source of the <i> naming of this element.
Represents a span of inline text denoting textual user input from a keyboard, voice
input, or any other text entry device. By convention, the user agent defaults to
<kbd>
rendering the contents of a <kbd> element using its default monospace font,
although this is not mandated by the HTML standard.
Represents text which is marked or highlighted for reference or notation purposes
<mark>
due to the marked passage's relevance in the enclosing context.
Indicates that the enclosed text is a short inline quotation. Most modern browsers
implement this by surrounding the text in quotation marks. This element is intended
<q>
for short quotations that don't require paragraph breaks; for long quotations use
the <blockquote> element.
Used to provide fall-back parentheses for browsers that do not support the display
of ruby annotations using the <ruby> element. One <rp> element should enclose
<rp>
each of the opening and closing parentheses that wrap the <rt> element that
contains the annotation's text.
Specifies the ruby text component of a ruby annotation, which is used to provide
<rt> pronunciation, translation, or transliteration information for East Asian typography.
The <rt> element must always be contained within a <ruby> element.
Represents small annotations that are rendered above, below, or next to base text,
<ruby> usually used for showing the pronunciation of East Asian characters. It can also be
used for annotating other kinds of text, but this usage is less common.
Renders text with a strikethrough, or a line through it. Use the <s> element to
represent things that are no longer relevant or no longer accurate. However, <s> is
<s>
not appropriate when indicating document edits; for that, use
the <del> and <ins> elements, as appropriate.
Used to enclose inline text which represents sample (or quoted) output from a
<samp
> computer program. Its contents are typically rendered using the browser's default
monospaced font (such as Courier or Lucida Console).
Represents side-comments and small print, like copyright and legal text,
<small
> independent of its styled presentation. By default, it renders text within it one font
size smaller, such as from small to x-small.
<span> A generic inline container for phrasing content, which does not inherently represent
anything. It can be used to group elements for styling purposes (using
the class or id attributes), or because they share attribute values, such as lang. It
Elemen
Description
t
should be used only when no other semantic element is appropriate. <span> is very
much like a div element, but div is a block-level element whereas a <span> is
an inline-level element.
<strong Indicates that its contents have strong importance, seriousness, or urgency.
> Browsers typically render the contents in bold type.
Specifies inline text which should be displayed as subscript for solely typographical
<sub> reasons. Subscripts are typically rendered with a lowered baseline using smaller
text.
Specifies inline text which is to be displayed as superscript for solely typographical
<sup>
reasons. Superscripts are usually rendered with a raised baseline using smaller text.
Represents a specific period in time. It may include the datetime attribute to
<time> translate dates into machine-readable format, allowing for better search engine
results or custom features such as reminders.
Represents a span of inline text which should be rendered in a way that indicates
<u> that it has a non-textual annotation. This is rendered by default as a simple solid
underline but may be altered using CSS.
Represents the name of a variable in a mathematical expression or a programming
<var> context. It's typically presented using an italicized version of the current typeface,
although that behavior is browser-dependent.
Represents a word break opportunity—a position within text where the browser
<wbr> may optionally break a line, though its line-breaking rules would not otherwise
create a break at that location.

Image and multimedia


HTML supports various multimedia resources such as images, audio, and video.

Elemen
Description
t
Defines an area inside an image map that has predefined clickable areas. An image
<area>
map allows geometric areas on an image to be associated with hyperlink.
Used to embed sound content in documents. It may contain one or more audio
<audio sources, represented using the src attribute or the source element: the browser will
> choose the most suitable one. It can also be the destination for streamed media,
using a MediaStream.
<img> Embeds an image into the document.
<map> Used with <area> elements to define an image map (a clickable link area).
Used as a child of the media elements, audio and video. It lets you specify timed
<track> text tracks (or time-based data), for example to automatically handle subtitles. The
tracks are formatted in WebVTT format (.vtt files)—Web Video Text Tracks.
<video Embeds a media player which supports video playback into the document. You can
> also use <video> for audio content, but the audio element may provide a more
Elemen
Description
t
appropriate user experience.

Embedded content
In addition to regular multimedia content, HTML can include a variety of other content, even if
it's not always easy to interact with.

Elemen
Description
t
Embeds external content at the specified point in the document. This content is
<embe
d> provided by an external application or other source of interactive content such as a
browser plug-in.
<iframe Represents a nested browsing context, embedding another HTML page into the
> current one.
<object Represents an external resource, which can be treated as an image, a nested
> browsing context, or a resource to be handled by a plugin.
<pictur Contains zero or more <source> elements and one <img> element to offer
e> alternative versions of an image for different display/device scenarios.
<portal Enables the embedding of another HTML page into the current one to enable
> smoother navigation into new pages.
Specifies multiple media resources for the picture, the audio element, or the video
element. It is a void element, meaning that it has no content and does not have a
<source
> closing tag. It is commonly used to offer the same media content in multiple file
formats in order to provide compatibility with a broad range of browsers given their
differing support for image file formats and media file formats.

SVG and MathML


You can embed SVG and MathML content directly into HTML documents, using
the <svg> and <math> elements.

Elemen
Description
t
Container defining a new coordinate system and viewport. It is used as the
<svg> outermost element of SVG documents, but it can also be used to embed an SVG
fragment inside an SVG or HTML document.
The top-level element in MathML. Every valid MathML instance must be wrapped
<math
> in it. In addition, you must not nest a second <math> element in another, but you
can have an arbitrary number of other child elements in it.

Scripting
To create dynamic content and Web applications, HTML supports the use of scripting languages,
most prominently JavaScript. Certain elements support this capability.

Element Description
<canva Container element to use with either the canvas scripting API or the WebGL API to
s> draw graphics and animations.
<noscri Defines a section of HTML to be inserted if a script type on the page is unsupported
pt> or if scripting is currently turned off in the browser.
Used to embed executable code or data; this is typically used to embed or refer to
<script
> JavaScript code. The <script> element can also be used with other languages, such
as WebGL's GLSL shader programming language and JSON.

Demarcating edits
These elements let you provide indications that specific parts of the text have been altered.

Elemen
Description
t
Represents a range of text that has been deleted from a document. This can be used
when rendering "track changes" or source code diff information, for example.
<del>
The <ins> element can be used for the opposite purpose: to indicate text that has
been added to the document.
Represents a range of text that has been added to a document. You can use
<ins> the <del> element to similarly represent a range of text that has been deleted from
the document.

Table content
The elements here are used to create and handle tabular data.

Element Description
<caption
> Specifies the caption (or title) of a table.
Defines one or more columns in a column group represented by its implicit or
<col> explicit parent <colgroup> element. The <col> element is only valid as a child of
a <colgroup> element that has no span attribute defined.
<colgrou
p> Defines a group of columns within a table.
Represents tabular data—that is, information presented in a two-dimensional table
<table>
comprised of rows and columns of cells containing data.
Encapsulates a set of table rows (<tr> elements), indicating that they comprise the
<tbody>
body of a table's (main) data.
<td> A child of the <tr> element, it defines a cell of a table that contains data.
<tfoot> Encapsulates a set of table rows (<tr> elements), indicating that they comprise the
Element Description
foot of a table with information about the table's columns. This is usually a
summary of the columns, e.g., a sum of the given numbers in a column.
A child of the <tr> element, it defines a cell as the header of a group of table cells.
<th> The nature of this group can be explicitly defined by
the scope and headers attributes.
Encapsulates a set of table rows (<tr> elements), indicating that they comprise the
<thead> head of a table with information about the table's columns. This is usually in the
form of column headers (<th> elements).
Defines a row of cells in a table. The row's cells can then be established using a
<tr>
mix of <td> (data cell) and <th> (header cell) elements.

Forms
HTML provides several elements that can be used together to create forms that the user can fill
out and submit to the website or application. Further information about this available in
the HTML forms guide.

Element Description
An interactive element activated by a user with a mouse, keyboard, finger, voice
<button
> command, or other assistive technology. Once activated, it performs an action,
such as submitting a form or opening a dialog.
<datalist Contains a set of <option> elements that represent the permissible or
> recommended options available to choose from within other controls.
<fieldset
> Used to group several controls as well as labels (<label>) within a web form.
Represents a document section containing interactive controls for submitting
<form>
information.
Used to create interactive controls for web-based forms to accept data from the
user; a wide variety of types of input data and control widgets are available,
<input> depending on the device and user agent. The <input> element is one of the most
powerful and complex in all of HTML due to the sheer number of combinations of
input types and attributes.
<label> Represents a caption for an item in a user interface.
<legend
> Represents a caption for the content of its parent <fieldset>.
<meter> Represents either a scalar value within a known range or a fractional value.
<optgro
up> Creates a grouping of options within a <select> element.
Used to define an item contained in a select, an <optgroup>, or
<option
> a <datalist> element. As such, <option> can represent menu items in popups and
other lists of items in an HTML document.
<output Container element into which a site or app can inject the results of a calculation or
> the outcome of a user action.
<progres Displays an indicator showing the completion progress of a task, typically
Element Description
s> displayed as a progress bar.
<select> Represents a control that provides a menu of options.
Represents a multi-line plain-text editing control, useful when you want to allow
<textare
a> users to enter a sizeable amount of free-form text, for example, a comment on a
review or feedback form.

Interactive elements
HTML offers a selection of elements that help to create interactive user interface objects.

Element Description
Creates a disclosure widget in which information is visible only when the widget
<details
> is toggled into an "open" state. A summary or label must be provided using
the <summary> element.
Represents a dialog box or other interactive component, such as a dismissible
<dialog>
alert, inspector, or subwindow.
Specifies a summary, caption, or legend for a details element's disclosure box.
<summa
ry> Clicking the <summary> element toggles the state of the
parent <details> element open and closed.

Web Components
Web Components is an HTML-related technology that makes it possible to, essentially, create
and use custom elements as if it were regular HTML. In addition, you can create custom versions
of standard HTML elements.

Element Description
Part of the Web Components technology suite, this element is a placeholder inside
<slot> a web component that you can fill with your own markup, which lets you create
separate DOM trees and present them together.
A mechanism for holding HTML that is not to be rendered immediately when a
<templa
te> page is loaded but may be instantiated subsequently during runtime using
JavaScript.

Obsolete and deprecated elements


Warning: These are old HTML elements that are deprecated and should not be used. You
should never use them in new projects, and you should replace them in old projects as soon
as you can. They are listed here for completeness only.

Element Description
<acrony Allows authors to clearly indicate a sequence of characters that compose an
m>
Element Description
acronym or abbreviation for a word.
Renders the enclosed text at a font size one level larger than the surrounding text
<big> (medium becomes large, for example). The size is capped at the browser's
maximum permitted font size.
Displays its block-level or inline contents centered horizontally within its
<center>
containing element.
An obsolete part of the Web Components suite of technologies—was used inside
of Shadow DOM as an insertion point, and wasn't meant to be used in ordinary
<content
> HTML. It has now been replaced by the <slot> element, which creates a point in
the DOM at which a shadow DOM can be inserted. Consider
using <slot> instead.
Container for a directory of files and/or folders, potentially with styles and icons
<dir> applied by the user agent. Do not use this obsolete element; instead, you should
use the <ul> element for lists, including lists of files.
<font> Defines the font size, color and face for its content.
Defines a particular area in which another HTML document can be displayed. A
<frame>
frame should be used within a <frameset>.
<framese
t> Used to contain <frame> elements.
An ancient and poorly supported precursor to the <img> element. It should not
<image>
be used.
<marque Used to insert a scrolling area of text. You can control what happens when the
e> text reaches the edges of its content area using its attributes.
<menuite Represents a command that a user is able to invoke through a popup menu. This
m> includes context menus, as well as menus that might be attached to a menu button.
Prevents the text it contains from automatically wrapping across multiple lines,
<nobr> potentially resulting in the user having to scroll horizontally to see the entire
width of the text.
An obsolete, non-standard way to provide alternative, or "fallback", content for
browsers that do not support the embed element or do not support the type
<noembe
d> of embedded content an author wishes to use. This element was deprecated in
HTML 4.01 and above in favor of placing fallback content between the opening
and closing tags of an <object> element.
Provides content to be presented in browsers that don't support (or have disabled
<noframe support for) the <frame> element. Although most commonly-used browsers
s> support frames, there are exceptions, including certain special-use browsers
including some mobile browsers, as well as text-mode browsers.
<param> Defines parameters for an <object> element.
<plaintex Renders everything following the start tag as raw text, ignoring any following
t> HTML. There is no closing tag, since everything after it is considered raw text.
Used to delimit the base text component of a ruby annotation, i.e. the text that is
<rb> being annotated. One <rb> element should wrap each separate atomic segment of
the base text.
<rtc> Embraces semantic annotations of characters presented in a ruby
Element Description
of <rb> elements used inside of <ruby> element. <rb> elements can have both
pronunciation (<rt>) and semantic (<rtc>) annotations.
An obsolete part of the Web Components technology suite that was intended to be
<shadow used as a shadow DOM insertion point. You might have used it if you have
> created multiple shadow roots under a shadow host. Consider
using <slot> instead.
<strike> Places a strikethrough (horizontal line) over text.
Creates inline text which is presented using the user agent default monospace font
face. This element was created for the purpose of rendering text as it would be
<tt>
displayed on a fixed-width display such as a teletype, text-only screen, or line
printer.
Renders text between the start and end tags without interpreting the HTML in
<xmp> between and using a monospaced font. The HTML2 specification recommended
that it should be rendered wide enough to allow 80 characters per line.

See also
 Element interface

Help improve MDN


Was this page helpful to you?
YesNo
Learn how to contribute.

This page was last modified on Apr 9, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content


Use this CSS reference to browse an alphabetical index of all of the
standard CSS properties, pseudo-classes, pseudo-elements, data types, functional
notations and at-rules. You can also browse key CSS concepts and a list of selectors organized
by type. Also included is a brief DOM-CSS / CSSOM reference.

Basic rule syntax

Style rule syntax


CSSCopy to Clipboard
style-rule ::=
selectors-list {
properties-list
}

Where:

CSSCopy to Clipboard
selectors-list ::=
selector[:pseudo-class] [::pseudo-element]
[, selectors-list]

properties-list ::=
[property : value] [; properties-list]

See the index of selectors, pseudo-classes, and pseudo-elements below. The syntax for each
specified value depends on the data type defined for each specified property.

Style rule examples


CSSCopy to Clipboard
strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}

For a beginner-level introduction to the syntax of selectors, see our guide on CSS Selectors. Be
aware that any syntax error in a rule definition invalidates the entire rule. Invalid rules are
ignored by the browser. Note that CSS rule definitions are entirely (ASCII) text-based, whereas
DOM-CSS / CSSOM (the rule management system) is object-based.

At-rule syntax

As the structure of at-rules varies widely, please see At-rule to find the syntax of the specific one
you want.

Index
Note: This index does not include SVG-exclusive presentation attributes, which can be used as
CSS properties on SVG elements.
Note: The property names in this index do not include the JavaScript names which do differ
from the CSS standard names.

 --*
 -webkit-line-clamp

 abs()
 accent-color
 acos()
 :active
 additive-symbols (@counter-style)
 ::after (:after)
 align-content
 align-items
 align-self
 align-tracks
 all
 <an-plus-b>
 <angle>
 <angle-percentage>
 animation
 animation-composition
 animation-delay
 animation-direction
 animation-duration
 animation-fill-mode
 animation-iteration-count
 animation-name
 animation-play-state
 animation-range
 animation-range-end
 animation-range-start
 animation-timeline
 animation-timing-function
 @annotation
 :any-link
 appearance
 ascent-override (@font-face)
 asin()
 aspect-ratio
 atan()
 atan2()
 attr()

 ::backdrop
 backdrop-filter
 backface-visibility
 background
 background-attachment
 background-blend-mode
 background-clip
 background-color
 background-image
 background-origin
 background-position
 background-position-x
 background-position-y
 background-repeat
 background-size
 base-palette (@font-palette-values)
 <basic-shape>
 ::before (:before)
 :blank
 bleed (@page)
 <blend-mode>
 block-size
 blur()
 border
 border-block
 border-block-color
 border-block-end
 border-block-end-color
 border-block-end-style
 border-block-end-width
 border-block-start
 border-block-start-color
 border-block-start-style
 border-block-start-width
 border-block-style
 border-block-width
 border-bottom
 border-bottom-color
 border-bottom-left-radius
 border-bottom-right-radius
 border-bottom-style
 border-bottom-width
 border-collapse
 border-color
 border-end-end-radius
 border-end-start-radius
 border-image
 border-image-outset
 border-image-repeat
 border-image-slice
 border-image-source
 border-image-width
 border-inline
 border-inline-color
 border-inline-end
 border-inline-end-color
 border-inline-end-style
 border-inline-end-width
 border-inline-start
 border-inline-start-color
 border-inline-start-style
 border-inline-start-width
 border-inline-style
 border-inline-width
 border-left
 border-left-color
 border-left-style
 border-left-width
 border-radius
 border-right
 border-right-color
 border-right-style
 border-right-width
 border-spacing
 border-start-end-radius
 border-start-start-radius
 border-style
 border-top
 border-top-color
 border-top-left-radius
 border-top-right-radius
 border-top-style
 border-top-width
 border-width
 bottom
 @bottom-center
 box-decoration-break
 box-shadow
 box-sizing
 break-after
 break-before
 break-inside
 brightness()

 calc()
 caption-side
 caret
 caret-color
 caret-shape
 @character-variant
 @charset
 :checked
 circle()
 clamp()
 clear
 clip
 clip-path
 <color>
 color
 color-scheme
 column-count
 column-fill
 column-gap
 column-rule
 column-rule-color
 column-rule-style
 column-rule-width
 column-span
 column-width
 columns
 conic-gradient()
 contain
 contain-intrinsic-block-size
 contain-intrinsic-height
 contain-intrinsic-inline-size
 contain-intrinsic-size
 contain-intrinsic-width
 container
 container-name
 container-type
 content
 content-visibility
 contrast()
 cos()
 <counter>
 counter-increment
 counter-reset
 counter-set
 @counter-style
 counters()
 cross-fade()
 cubic-bezier()
 ::cue
 ::cue-region
 :current
 cursor
 <custom-ident>
 length#cap
 length#ch
 length#cm

 angle#deg
 <dashed-ident>
 :default
 :defined
 descent-override (@font-face)
 <dimension>
 :dir
 direction
 :disabled
 display
 <display-box>
 <display-inside>
 <display-internal>
 <display-legacy>
 <display-listitem>
 <display-outside>
 drop-shadow()
 resolution#dpcm
 resolution#dpi
 resolution#dppx

 <easing-function>
 element()
 ellipse()
 :empty
 empty-cells
 :enabled
 env()
 exp()
 length#em
 length#ex

 fallback (@counter-style)
 filter
 <filter-function>
 :first
 :first-child
 ::first-letter (:first-letter)
 ::first-line (:first-line)
 :first-of-type
 fit-content()
 <flex>
 flex
 flex-basis
 flex-direction
 flex-flow
 flex-grow
 flex-shrink
 flex-wrap
 flex_value#fr
 float
 :focus
 :focus-visible
 :focus-within
 font
 font-display (@font-face)
 @font-face
 font-family
 font-family (@font-face)
 font-family (@font-palette-values)
 font-feature-settings
 font-feature-settings (@font-face)
 @font-feature-values
 font-kerning
 font-language-override
 font-optical-sizing
 font-palette
 @font-palette-values
 font-size
 font-size-adjust
 font-stretch
 font-stretch (@font-face)
 font-style
 font-style (@font-face)
 font-synthesis
 font-synthesis-position
 font-synthesis-small-caps
 font-synthesis-style
 font-synthesis-weight
 font-variant
 font-variant-alternates
 font-variant-caps
 font-variant-east-asian
 font-variant-emoji
 font-variant-ligatures
 font-variant-numeric
 font-variant-position
 font-variation-settings
 font-variation-settings (@font-face)
 font-weight
 font-weight (@font-face)
 forced-color-adjust
 format()
 <frequency>
 <frequency-percentage>
 :fullscreen
 :future

 angle#grad
 gap
 <gradient>
 ::grammar-error
 grayscale()
 grid
 grid-area
 grid-auto-columns
 grid-auto-flow
 grid-auto-rows
 grid-column
 grid-column-end
 grid-column-start
 grid-row
 grid-row-end
 grid-row-start
 grid-template
 grid-template-areas
 grid-template-columns
 grid-template-rows

 frequency#Hz
 hanging-punctuation
 :has
 height
 @historical-forms
 :host()
 :host-context()
 :hover
 hsl()
 hue-rotate()
 hwb()
 hyphenate-character
 hyphenate-limit-chars
 hyphens
 hypot()

I
 <ident>
 <image>
 image()
 image-orientation
 image-rendering
 image-resolution
 image-set()
 @import
 :in-range
 :indeterminate
 inherit
 inherits (@property)
 initial
 initial-letter
 initial-letter-align
 initial-value (@property)
 inline-size
 input-security
 inset
 inset()
 inset-block
 inset-block-end
 inset-block-start
 inset-inline
 inset-inline-end
 inset-inline-start
 <integer>
 :invalid
 invert()
 :is
 isolation
 length#ic
 length#in

 justify-content
 justify-items
 justify-self
 justify-tracks

 frequency#kHz
 @keyframes

 lab()
 :lang
 :last-child
 :last-of-type
 @layer
 layer()
 layer() (@import)
 lch()
 leader()
 :left
 left
 @left-bottom
 <length>
 <length-percentage>
 letter-spacing
 light-dark()
 line-break
 line-clamp
 line-gap-override (@font-face)
 line-height
 line-height-step
 <line-style>
 linear-gradient()
 :link
 list-style
 list-style-image
 list-style-position
 list-style-type
 local()
 :local-link
 log()

 length#mm
 margin
 margin-block
 margin-block-end
 margin-block-start
 margin-bottom
 margin-inline
 margin-inline-end
 margin-inline-start
 margin-left
 margin-right
 margin-top
 margin-trim
 ::marker
 marks (@page)
 mask
 mask-border
 mask-border-mode
 mask-border-outset
 mask-border-repeat
 mask-border-slice
 mask-border-source
 mask-border-width
 mask-clip
 mask-composite
 mask-image
 mask-mode
 mask-origin
 mask-position
 mask-repeat
 mask-size
 mask-type
 masonry-auto-flow
 math-depth
 math-shift
 math-style
 matrix()
 matrix3d()
 max()
 max-block-size
 max-height
 max-inline-size
 max-lines
 max-width
 @media
 min()
 min-block-size
 min-height
 min-inline-size
 min-width
 minmax()
 mix-blend-mode
 mod()
 time#ms

 @namespace
 negative (@counter-style)
 :not
 :nth-child
 :nth-last-child
 :nth-last-of-type
 :nth-of-type
 <number>

 object-fit
 object-position
 offset
 offset-anchor
 offset-distance
 offset-path
 offset-position
 offset-rotate
 :only-child
 :only-of-type
 opacity
 opacity()
 :optional
 order
 @ornaments
 orphans
 :out-of-range
 outline
 outline-color
 outline-offset
 outline-style
 outline-width
 <overflow>
 overflow-anchor
 overflow-block
 overflow-clip-margin
 overflow-inline
 overflow-wrap
 overflow-x
 overflow-y
 overlay
 override-colors (@font-palette-values)
 overscroll-behavior
 overscroll-behavior-block
 overscroll-behavior-inline
 overscroll-behavior-x
 overscroll-behavior-y

 Pseudo-classes
 Pseudo-elements
 length#pc
 length#pt
 length#px
 pad (@counter-style)
 padding
 padding-block
 padding-block-end
 padding-block-start
 padding-bottom
 padding-inline
 padding-inline-end
 padding-inline-start
 padding-left
 padding-right
 padding-top
 @page
 page
 page-break-after
 page-break-before
 page-break-inside
 page-orientation (@page)
 paint()
 paint-order
 ::part
 :past
 path()
 :paused
 <percentage>
 perspective
 perspective()
 perspective-origin
 :picture-in-picture
 place-content
 place-items
 place-self
 ::placeholder
 :placeholder-shown
 :playing
 pointer-events
 polygon()
 <position>
 position
 pow()
 prefix (@counter-style)
 print-color-adjust
 @property

 length#Q
 quotes

 angle#rad
 length#rem
 radial-gradient()
 range (@counter-style)
 <ratio>
 ray()
 :read-only
 :read-write
 rect()
 rem()
 repeat()
 repeating-conic-gradient()
 repeating-linear-gradient()
 repeating-radial-gradient()
 :required
 resize
 <resolution>
 reversed()
 revert
 rgb()
 :right
 right
 @right-bottom
 :root
 rotate
 rotate()
 rotate3d()
 rotateX()
 rotateY()
 rotateZ()
 round()
 row-gap
 ruby-align
 ruby-merge
 ruby-position

 saturate()
 scale
 scale()
 scale3d()
 scaleX()
 scaleY()
 scaleZ()
 :scope
 @scope
 scroll()
 scroll-behavior
 scroll-margin
 scroll-margin-block
 scroll-margin-block-end
 scroll-margin-block-start
 scroll-margin-bottom
 scroll-margin-inline
 scroll-margin-inline-end
 scroll-margin-inline-start
 scroll-margin-left
 scroll-margin-right
 scroll-margin-top
 scroll-padding
 scroll-padding-block
 scroll-padding-block-end
 scroll-padding-block-start
 scroll-padding-bottom
 scroll-padding-inline
 scroll-padding-inline-end
 scroll-padding-inline-start
 scroll-padding-left
 scroll-padding-right
 scroll-padding-top
 scroll-snap-align
 scroll-snap-stop
 scroll-snap-type
 scroll-timeline
 scroll-timeline-axis
 scroll-timeline-name
 scrollbar-color
 scrollbar-gutter
 scrollbar-width
 ::selection
 selector()
 sepia()
 <shape>
 shape-image-threshold
 shape-margin
 shape-outside
 sign()
 sin()
 size (@page)
 size-adjust (@font-face)
 skew()
 skewX()
 skewY()
 ::slotted
 speak-as (@counter-style)
 ::spelling-error
 sqrt()
 src (@font-face)
 @starting-style
 steps()
 <string>
 @styleset
 @stylistic
 suffix (@counter-style)
 @supports
 supports() (@import)
 @swash
 symbols (@counter-style)
 symbols()
 syntax (@property)
 system (@counter-style)
 time#s

 angle#turn
 tab-size
 table-layout
 tan()
 :target
 target-counter()
 target-counters()
 ::target-text
 target-text()
 :target-within
 text-align
 text-align-last
 text-combine-upright
 text-decoration
 text-decoration-color
 text-decoration-line
 text-decoration-skip
 text-decoration-skip-ink
 text-decoration-style
 text-decoration-thickness
 text-emphasis
 text-emphasis-color
 text-emphasis-position
 text-emphasis-style
 text-indent
 text-justify
 text-orientation
 text-overflow
 text-rendering
 text-shadow
 text-size-adjust
 text-transform
 text-underline-offset
 text-underline-position
 text-wrap
 text-wrap-mode
 text-wrap-style
 <time>
 <time-percentage>
 timeline-scope
 top
 @top-center
 touch-action
 transform
 transform-box
 <transform-function>
 transform-origin
 transform-style
 transition
 transition-behavior
 transition-delay
 transition-duration
 transition-property
 transition-timing-function
 translate
 translate()
 translate3d()
 translateX()
 translateY()
 translateZ()
 type()

U
 unicode-bidi
 unicode-range (@font-face)
 unset
 <url>
 url()
 :user-invalid
 user-select
 :user-valid

 length#vh
 length#vmax
 length#vmin
 length#vw
 :valid
 var()
 vertical-align
 view()
 view-timeline
 view-timeline-axis
 view-timeline-inset
 view-timeline-name
 ::view-transition
 ::view-transition-group
 ::view-transition-image-pair
 view-transition-name
 ::view-transition-new
 ::view-transition-old
 visibility
 :visited

 :where
 white-space
 white-space-collapse
 widows
 width
 will-change
 word-break
 word-spacing
 word-wrap
 writing-mode

 resolution#x

Z
 z-index

Others

 --*

Selectors

The following are the various selectors, which allow styles to be conditional based on various
features of elements within the DOM.

Basic selectors

Basic selectors are fundamental selectors; these are the most basic selectors that are frequently
combined to create other, more complex selectors.

 Universal selector *
 Type selector elementname
 Class selector .classname
 ID selector #idname
 Attribute selector [attr=value]

Grouping selectors
Selector list A, B

Specifies that both A and B elements are selected. This is a grouping method to select
several matching elements.

Combinators

Combinators are selectors that establish a relationship between two or more simple selectors,
such as "A is a child of B" or "A is adjacent to B", creating a complex selector.

Next-sibling combinator A + B

Specifies that the elements selected by both A and B have the same parent and that the
element selected by B immediately follows the element selected by A horizontally.

Subsequent-sibling combinator A ~ B
Specifies that the elements selected by both A and B share the same parent and that the
element selected by A comes before—but not necessarily immediately before—the
element selected by B.

Child combinator A > B

Specifies that the element selected by B is the direct child of the element selected by A.

Descendant combinator A B

Specifies that the element selected by B is a descendant of the element selected by A, but
is not necessarily a direct child.

Column combinator A || B Experimental

Specifies that the element selected by B is located within the table column specified by A.
Elements which span multiple columns are considered to be a member of all of those
columns.

Pseudo
Pseudo classes :

Specifies a special state of the selected element(s).

Pseudo elements ::

Represents entities that are not included in HTML.

See also selectors in the Selectors specification and the pseudo-element specification.

Concepts

Syntax and semantics

 CSS syntax
 At-rules
 Cascade
 Comments
 Descriptor
 Inheritance
 Shorthand properties
 Specificity
 Value definition syntax
 CSS unit and value types
 CSS functional notations

Values

 Actual value
 Computed value
 Initial value
 Resolved value
 Specified value
 Used value

Layout

 Block formatting context


 Box model
 Containing block
 Layout mode
 Margin collapsing
 Replaced elements
 Stacking context
 Visual formatting model

DOM-CSS / CSSOM

Major object types

 Document.styleSheets
 styleSheets[i].cssRules
 cssRules[i].cssText (selector & style)
 cssRules[i].selectorText
 HTMLElement.style
 HTMLElement.style.cssText (just style)
 Element.className
 Element.classList

Important methods

 CSSStyleSheet.insertRule()
 CSSStyleSheet.deleteRule()

See also
 Mozilla CSS extensions (prefixed with -moz-)
 WebKit CSS extensions (mostly prefixed with -webkit-)

External Links

 CSS Indices (w3.org)

Help improve MDN


Was this page helpful to you?
YesNo
Learn how to contribute.

This page was last modified on Feb 29, 2024 by MDN contributors.

View this page on GitHub • Report a problem with this content

You might also like