This is a catalog of HTML elements. There's also an API and Templates available.
There's plenty of HTML reference documentation in the world, so why build another?
Other reference documentation is either too verbose, meaning there's so much detail it makes it hard to find the
key parts that you need, or
it's too minimal, meaning there are important parts left off in favor of making it highly condensed. This
catalog aims to provide a goldilocks solution
by balancing comprehensive documentation with ease of use.
The goals of this catalog are to be clear, easy to use, and fast:
Clear in that deprecated, obsolete, theoretical, or widely unsupported HTML elements and
attributes are not included.
Easy to use means the entire reference is on a single page, making it easy to search and
navigate.
Fast means that the page is rendered in vanilla HTML/CSS with minimal JavaScript and
images.
Search
Table of Contents
HTML is divided into different types of elements, each of which serves a purpose in structuring content for the
user. Some elements organize, some denote meaning, some add tabular structures, while others submit data or
interact with the page.
Used to capture an abbreviation, by default this displays a tooltip of the 'title' attribute on hover
abbr
title, determines tooltip text that user sees upon hovering over the abbreviation tag
Types of Tags
Other HTML references focus on categorizing elements as having normal or self closing tags. This one does not.
Since example code is provided with each element, it
should be clear which elements have opening and closing tags and which have self closing tags. In cases where this
really matters,
the description will specify which type of tag the element uses.
Global Attributes
There are common HTML attributes that apply to every element. This list is omitted from the reference, because
it would be incredibly duplicative to reproduce them under each element. The common global HTML attributes:
class, used to group elements together, as well as attach CSS styles to them collectively
data-*, allows you to attach custom data to an HTML element, opening a world of possibility
draggable, defines whether an element can be dragged by the cursor or mouse
hidden, specifies whether the element should be visible or not
id, used to identify individual elements, mostly for the purpose of attaching CSS styles
inputmode, allows you to specify a hint for the end user editing this element
style, used to apply in line CSS styles, as the example above for style="color: red"
tabindex, allows you to specify whether an element should be focusable and when
title, allows you to specify extra information about an element
This concludes the section on using the catalog. On to the elements!
Catalog
Metadata
Metadata is data that describes other data or provides information in the form of a label. For an HTML document,
that means data about the title of the document, its relationship to other resources, how various user agents
should treat it, and more.
charset: declares the page's character encoding (please just use UTF-8)
content: contains the value for the http-equiv or name attribute
http-equiv: defines directives, allowing values named after HTTP headers
content-security-policy: define a content policy for the current page, protecting against cross-site
scripting
refresh: number of seconds until page should be reloaded/redirected, requires inclusion of '; url='
name: defines name of document-level metadata
application-name: name of web application running in page (only used for applications)
author
description: short and accurate summary of the page's content
generator: identifier of software that generated page
keywords: words relevant to the page's content separated by commas
referrer: address of previous webpage
theme-color: suggested color used to customize display of page; content attribute accepts valid CSS
color
color-scheme: specifies light or dark color modes (accepts normal, light | dark, only light)
publisher
robots: defines behavior that web crawlers should follow
viewport: used by mobile devices to hint at the initial size of the viewport
Sectioning
Sectioning elements are used to organize a document into logical pieces. Think of this as your document's
outline. Elements give logical structure not
visual structure. I've depicted it visually below, so you can get a general sense for how most pages
employ these elements. However, there's no
relationship between HTML logical structure and how it's visually presented:
body
header
nav
main
h1
h2
h3
h4
h5
h6
aside
For the sectioning elements, the display portion of the reference may simply say 'Displays content' which means
that the tag does not inherently have a
specific display, but instead that it simply displays what it wraps around or contains. For the sake of
conciseness, the reference does not always show that content.
Stand alone section that is not represented by another more specific content section element. This is the
sectioning version of a div or span (generic, without specific semantic meaning), but should not be used in
place of a div. A section should still appear in a document outline.
Descending levels of section headings which are used to give titles and introduce content. <h1>
represents the highest level section. It's possible to have multiple sets of headings on a page, as long as
they apply to different sections.
download: prompts to save the linked URL instead of navigating to it
href: URL that the hyperlink points to, which can be sections of a page, pieces of media files, 'tel:'
numbers, 'mailto:' addresses
hreflang: the human language of the linked URL; allowed values are the same as the global lang
ping: space-separated list of URLs, which the browser will send POST requests with the body PING to, when
the link is followed
referrerpolicy: how much of the referrer to send when following the link
no-referrer: does not send the referer header
no-referr-when-downgrade: referer header will not be sent to origins without TLS (HTTPS)
origin: sent referer is limited to origin of refering page (scheme, host, port)
origin-when-cross-origin: limited to scheme, host, and port, except path will be included for
navigation on same origin
same-origin: referrer sent for same origin, but cross-origin requests will contain no referrer
information
strict-origin: only send origin when security protocol remains the same (HTTPS to HTTPS)
strict-origin-when-cross-origin: send full URL when performing a same-origin request, only send origin
when protocol remains the same, and send no referer header to less secure destinations
unsafe-url: referrer will incldue the origin and path, but not the fragment, password, or username
rel: relationship of the linked URL as space-separated link types
target: where to display the linked URL (tab, window, or iframe) with keywords: _self, _blank, _parent,
_top
Citation provides a reference to a creative work and generally includes the title of that work
Poe's gothic masterwork starts with a dreary description, DURING the whole of a dull, dark, and soundless
day in the autumn of the year, when the clouds hung oppressively low in the heavens, setting the tone
for the The Fall of the House of Usher.
Represents a range of text set off from normal text, such as technical terms, foreign language, fictional
character thoughts, usually displaying in italics
This house is not my home, he thought with sudden panic.
src: source contains the reference to the image you are embedding
alt: provides alternate text for the image in case it cannot load or for screen readers
height: intrinsic height of the image in pixels (must be an integer)
width: intrinsic width of the image in pixels (must be an integer)
sizes: indicates a set of source sizes described as strings separated by commas, which contain a media
condition and a soruce size value. Media conditions describe the viewport, e.g. (max-width: 600px) 95vw,
(min-width: 600px) 90vw
srcset: indicates a set of image sources described as strings separated by commas, which contain the URL
to an image and a width descriptor, e.g. img/foundation-600.jpg 600w, img/foundation-900.jpg 900w
crossorigin: indicates if CORS is required to retrieve/fetch the image (values: anonymous or
use-credentials)
decoding: suggests to the browser how to decode (sync, async, auto)
ismap: boolean indicating that the image is part of a server-side map
usemap: the partial url (starting with #) of an image map (see below) associated with the element
Defines a region of an image inside an image map (see previous); it's important to remember that this element
is essentially a fancy
anchor element, so has access to similar attributes
alt: provides alternate text for the image in case it cannot load or for screen readers
coords: set of values specifying the coordinates of the hot spot or region of the map
circle: x,y,r, with the center expressed as x,y and then the radius as r
poly: set of x,y pairs for every point in the polygon
rect: two pairs of coordinates describing the left, top, right, bottom
download: prompts to save the linked URL instead of navigating to it
href: URL that the hyperlink points to, which can be sections of a page, pieces of media files, 'tel:'
numbers, 'mailto:' addresses
hreflang: the human language of the linked URL; allowed values are the same as the global lang
ping: space-separated list of URLs, which the browser will send POST requests with the body PING to, when
the link is followed
referrerpolicy: how much of the referrer to send when following the link
no-referrer: does not send the referer header
no-referr-when-downgrade: referer header will not be sent to origins without TLS (HTTPS)
origin: sent referer is limited to origin of refering page (scheme, host, port)
origin-when-cross-origin: limited to scheme, host, and port, except path will be included for
navigation on same origin
same-origin: referrer sent for same origin, but cross-origin requests will contain no referrer
information
strict-origin: only send origin when security protocol remains the same (HTTPS to HTTPS)
strict-origin-when-cross-origin: send full URL when performing a same-origin request, only send origin
when protocol remains the same, and send no referer header to less secure destinations
unsafe-url: referrer will incldue the origin and path, but not the fragment, password, or username
rel: relationship of the linked URL as space-separated link types
shape: default uses the entire image, while circle, poly, and rect describe subsets with coordinates
target: where to display the linked URL (tab, window, or iframe) with keywords: _self, _blank, _parent,
_top
height: height of the frame in CSS pixels (default is 150)
name: name for embedded browsing context
referrerpolicy: which referer to send when fetching the frame's resources
no-referrer: does not send the referer header
no-referr-when-downgrade: referer header will not be sent to origins without TLS (HTTPS)
origin: sent referer is limited to origin of refering page (scheme, host, port)
origin-when-cross-origin: limited to scheme, host, and port, except path will be included for
navigation on same origin
same-origin: referrer sent for same origin, but cross-origin requests will contain no referrer
information
strict-origin: only send origin when security protocol remains the same (HTTPS to HTTPS)
strict-origin-when-cross-origin: send full URL when performing a same-origin request, only send origin
when protocol remains the same, and send no referer header to less secure destinations
unsafe-url: referrer will incldue the origin and path, but not the fragment, password, or username
sandbox: applies extra restrictions to the content in the frame; empty applies all restrictions, while
space separated list removes restrictions individually
allow-forms: allows the iframe to submit forms
allow-modals: allows the iframe to open modal windows
allow-orientation-lock: allows the iframe to lock screen orientation
allow-pointer-lock: allows the iframe to use the pointer lock API
allow-popups: allows popups
allow-popups-to-escape-sandbox: allows popups that do not inherit the sandbox rules
allow-presentation: allows a presentaion session to start
allow-same-origin: pass the same-origin policy
allow-scripts: allow the iframe to run scripts but not create popup windows
allow-top-navigation: allow the iframe to navigate the top level browsing context
allow-top-navigation-by-user-activation: allow the iframe to navigate top if a user gesture initiates
src: URL of document to embed
srcdoc: inline HTML to embed, overriding the src attrbutes
width: width of iframe in CSS pixels (default is 300)
Element with multiple source elements and one image element that allows the browser to select the best image
for the device and situation (e.g. screen size, network bandwidth)
Embed JavaScript into your document with this element
MM/DD/YY
async: script will be fetched in parallel to document parsing and evaluated as soon as is possible
crossorigin: force passing CORS checks, allowing
error logging when a site uses a separate domain for static media
defer: boolean indicating script should be executed after the document has been parsed but before
DOMContentLoaded
integrity:
inline metadata used to verify that a fetched resource has been delivered without manipulation
nomodule: boolean indicating script should not be executed if browser supports ES2015 modules
nonce: cryptographic number used once (nonce) to whitelist in-line scripts in a script-src
CSP
referrerpolicy: indicates which referrer to send when fetching the script
no-referrer: does not send the referer header
no-referr-when-downgrade: referer header will not be sent to origins without TLS (HTTPS)
origin: sent referer is limited to origin of refering page (scheme, host, port)
origin-when-cross-origin: limited to scheme, host, and port, except path will be included for
navigation on same origin
same-origin: referrer sent for same origin, but cross-origin requests will contain no referrer
information
strict-origin: only send origin when security protocol remains the same (HTTPS to HTTPS)
strict-origin-when-cross-origin: send full URL when performing a same-origin request, only send origin
when protocol remains the same, and send no referer header to less secure destinations
unsafe-url: referrer will incldue the origin and path, but not the fragment, password, or username
src: specifies the URI of an external script, which is to be used as an alternative to embedding a script
type: type of script
text/javascript: this is the safest MIME type for all browsers and for forward compatibility
Parent element to encase interactive controls for submitting information
accept-charset: space-separated character encodings that the server accepts; browser will use them in
order
action: the URL (endpoint) that processes the form submission, can be overriden by a formaction attribute
on a button or input type=submit or input type=image element
autocomplete: indicates whether the form or an input element inside the form can be autocompleted by the
browser, either 'off' or 'on' values
enctype: if the value of the method (see next) attribute is post, thne enctype is the MIME type of the
form submission
application/x-www-form-urlencoded: default value
multipart/form-data: used if the form contains an input type=file element
text/plain: used for debugging purposes
method: the HTTP method used to submit the form
post: the POST method means the form data is sent as the request body
get: the GET method appends form data to the action URL with a ? separator, useful when form has no side-effects
dialog: when the form is inside a dialog, closes the dialog on submission
novalidate: form should not be validated when submitted
target: where to display the response after submitting the form
_self (default): loads into same browsing context as current
_blank: load into a new unnamed browsing context
_parent: load into the parent browsing context of the current one
