HTML Standard

HTML Standard
The elements of HTML
4.1
The document element
4.1.1
The
html
element
4.2
Document metadata
4.2.1
The
head
element
4.2.2
The
title
element
4.2.3
The
base
element
4.2.4
The
link
element
4.2.4.1
Processing the
media
attribute
4.2.4.2
Processing the
type
attribute
4.2.4.3
Fetching and processing a resource
from a
link
element
4.2.4.4
Processing `
Link
` headers
4.2.4.5
Early hints
4.2.4.6
Providing users with a means to follow hyperlinks created using the
link
element
4.2.5
The
meta
element
4.2.5.1
Standard metadata names
4.2.5.2
Other metadata names
4.2.5.3
Pragma directives
4.2.5.4
Specifying the document's character encoding
4.2.6
The
style
element
4.2.7
Interactions of styling and scripting
The elements of HTML
4.1
The document element
4.1.1
The
html
element
Element/html
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
Yes
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLHtmlElement
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
Categories
None.
Contexts in which this element can be used
As document's
document element
Wherever a subdocument fragment is allowed in a compound document.
Content model
head
element followed by a
body
element.
Tag omission in text/html
An
html
element's
start tag
can be omitted
if the first thing inside the
html
element is not a
comment
An
html
element's
end tag
can be omitted if
the
html
element is not immediately followed by a
comment
Content attributes
Global attributes
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLHtmlElement
HTMLElement
HTMLConstructor
constructor
();

//
also has obsolete members
};
The
html
element
represents
the root of an HTML document.
Authors are encouraged to specify a
lang
attribute on the root
html
element, giving the document's language. This aids speech synthesis tools to
determine what pronunciations to use, translation tools to determine what rules to use, and so
forth.
The
html
element in the following example declares that the document's language
is English.

html
lang
"en"
head
title
Swapping Songs
title
head
body
h1
Swapping Songs
h1
Tonight I swapped some of the songs I wrote with some friends, who
gave me some of the songs they wrote. I love sharing my music.
body
html
4.2
Document metadata
4.2.1
The
head
element
Element/head
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
Edge
79+
Edge (Legacy)
12+
Internet Explorer
Yes
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
HTMLHeadElement
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
Categories
None.
Contexts in which this element can be used
As the first element in an
html
element.
Content model
If the document is
an
iframe
srcdoc
document
or if title information is available from a higher-level protocol: Zero or more elements of
metadata content
, of which no more than one is a
title
element and no more than one is a
base
element.
Otherwise: One or more elements of
metadata content
, of which exactly one is a
title
element and no more than one is a
base
element.
Tag omission in text/html
head
element's
start tag
can be omitted if
the element is empty, or if the first thing inside the
head
element is an
element.
head
element's
end tag
can be omitted if
the
head
element is not immediately followed by
ASCII whitespace
or a
comment
Content attributes
Global attributes
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLHeadElement
HTMLElement
HTMLConstructor
constructor
();
};
The
head
element
represents
a collection of metadata for the
Document
The collection of metadata in a
head
element can be large or small. Here is an
example of a very short one:

html
lang
en
head
title
A document with a short head
title
head
body
...
Here is an example of a longer one:

HTML
LANG
"EN"
HEAD
META
CHARSET
"UTF-8"
BASE
HREF
"https://www.example.com/"
TITLE
An application with a long head
TITLE
LINK
REL
"STYLESHEET"
HREF
"default.css"
LINK
REL
"STYLESHEET ALTERNATE"
HREF
"big.css"
TITLE
"Big Text"
SCRIPT
SRC
"support.js"
>SCRIPT
META
NAME
"APPLICATION-NAME"
CONTENT
"Long headed application"
HEAD
BODY
...
The
title
element is a required child in most situations, but when a
higher-level protocol provides title information, e.g., in the subject line of an email when HTML
is used as an email authoring format, the
title
element can be omitted.
4.2.2
The
title
element
Element/title
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
Edge
79+
Edge (Legacy)
12+
Internet Explorer
1+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
HTMLTitleElement
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
Categories
Metadata content
Contexts in which this element can be used
In a
head
element containing no other
title
elements.
Content model
Text
that is not
inter-element whitespace
Tag omission in text/html
Neither tag is omissible.
Content attributes
Global attributes
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLTitleElement
HTMLElement
HTMLConstructor
constructor
();

CEReactions
attribute
DOMString
text
};
The
title
element
represents
the document's title or name. Authors
should use titles that identify their documents even when they are used out of context, for
example in a user's history or bookmarks, or in search results. The document's title is often
different from its first heading, since the first heading does not have to stand alone when taken
out of context.
There must be no more than one
title
element per document.
If it's reasonable for the
Document
to have no title, then the
title
element is probably not required. See the
head
element's content
model for a description of when the element is required.
title
text
[ =
value
Returns the
child text content
of the element.
Can be set, to replace the element's children with the given value.
The
text
attribute's getter must return this
title
element's
child text
content
The
text
attribute's setter must
string replace
all
with the given value within this
title
element.
Here are some examples of appropriate titles, contrasted with the top-level headings that
might be used on those same pages.
title
Introduction to The Mating Rituals of Bees
title
...
h1
Introduction
h1
This companion guide to the highly successful
cite
Introduction to Medieval Bee-Keeping
cite
book is...
The next page might be a part of the same site. Note how the title describes the subject
matter unambiguously, while the first heading assumes the reader knows what the context is and
therefore won't wonder if the dances are Salsa or Waltz:
title
Dances used during bee mating rituals
title
...
h1
The Dances
h1
The string to use as the document's title is given by the
document.title
IDL attribute.
User agents should use the document's title when referring to the document in their user
interface. When the contents of a
title
element are used in this way,
the
directionality
of that
title
element should be used to set the directionality
of the document's title in the user interface.
4.2.3
The
base
element
Element/base
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
Edge
79+
Edge (Legacy)
12+
Internet Explorer
Yes
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
HTMLBaseElement
Support in all current engines.
Firefox
1+
Safari
3+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
1+
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
Categories
Metadata content
Contexts in which this element can be used
In a
head
element containing no other
base
elements.
Content model
Nothing
Tag omission in text/html
No
end tag
Content attributes
Global attributes
href
Document base URL
target
— Default
navigable
for
hyperlink
and
form submission
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLBaseElement
HTMLElement
HTMLConstructor
constructor
();

CEReactions
ReflectSetter
attribute
USVString
href
CEReactions
Reflect
attribute
DOMString
target
};
The
base
element allows authors to specify the
document base URL
for
the purposes of parsing
URLs
, and the name of the default
navigable
for the purposes of
following hyperlinks
. The element does not
represent
any content beyond this information.
There must be no more than one
base
element per document.
base
element must have either an
href
attribute, a
target
attribute, or both.
The
href
content
attribute, if specified, must contain a
valid URL potentially surrounded by
spaces
base
element, if it has an
href
attribute,
must come before any other elements in the tree that have attributes defined as taking
URLs
If there are multiple
base
elements with
href
attributes, all but the first are ignored.
The
target
attribute,
if specified, must contain a
valid navigable target name or keyword
, which specifies
which
navigable
is to be used as the default when
hyperlinks
and
forms
in the
Document
cause
base
element, if it has a
target
attribute, must come before any elements in the tree that represent
hyperlinks
If there are multiple
base
elements with
target
attributes, all but the first are ignored.
To
get an element's target
, given an
area
, or
form
element
element
, and an optional string-or-null
target
(default null), run these steps:
If
target
is null, then:
If
element
has a
target
attribute, then set
target
to that attribute's value.
Otherwise, if
element
's
node document
contains a
base
element with a
target
attribute, set
target
to the value of the
target
attribute
of the first such
base
element.
If
target
is not null, and contains an
ASCII tab or newline
and a
U+003C (<), then set
target
to "
_blank
".
Return
target
base
element that is the first
base
element with an
href
content attribute
in a document tree
has a
frozen base URL
. The
frozen base URL
must be
immediately
set
for an element whenever any of the following
situations occur:
The
base
element becomes the first
base
element in
tree
order
with an
href
content attribute in its
Document
The
base
element is the first
base
element in
tree
order
with an
href
content attribute in its
Document
, and its
href
content attribute is
changed.
To
set the frozen base URL
for an element
element
Let
document
be
element
's
node document
Let
urlRecord
be the result of
parsing
the
value of
element
's
href
content attribute with
document
's
fallback base URL
, and
document
's
character encoding
. (Thus, the
base
element isn't affected by itself.)
If any of the following are true:
urlRecord
is failure;
urlRecord
's
scheme
is "
data
" or "
javascript
"; or
running
Is base allowed for Document?
on
urlRecord
and
document
returns "
Blocked
",
then set
element
's
frozen base URL
to
document
's
fallback base URL
and return.
Set
element
's
frozen base URL
to
urlRecord
Respond to base URL changes
given
document
The
href
IDL
attribute, on getting, must return the result of running the following algorithm:
Let
document
be
element
's
node document
Let
url
be the value of the
href
attribute of this element, if it has one, and the empty string otherwise.
Let
urlRecord
be the result of
parsing
url
with
document
's
fallback base URL
, and
document
's
character encoding
(Thus, the
base
element isn't affected by other
base
elements or
itself.)
If
urlRecord
is failure, return
url
Return the
serialization
of
urlRecord
In this example, a
base
element is used to set the
document base
URL

html
lang
"en"
head
title
This is an example for the
<
base
>
element
title
base
href
"https://www.example.com/news/index.html"
head
body
Visit the
href
"archives.html"
archives
body
html
The link in the above example would be a link to "
".
4.2.4
The
link
element
Element/link
Support in all current engines.
Firefox
1+
Safari
4+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
Yes
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLLinkElement
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
Chrome Android
WebView Android
37+
Samsung Internet
Opera Android
12.1+
HTMLLinkElement/rel
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLLinkElement/relList
Support in all current engines.
Firefox
30+
Safari
9+
Chrome
50+
Opera
Edge
79+
Edge (Legacy)
17+
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
Categories
Metadata content
If the element is
allowed in the body
flow content
If the element is
allowed in the body
phrasing content
Contexts in which this element can be used
Where
metadata content
is expected.
In a
noscript
element that is a child of a
head
element.
If the element is
allowed in the body
: where
phrasing content
is expected.
Content model
Nothing
Tag omission in text/html
No
end tag
Content attributes
Global attributes
href
— Address of the
hyperlink
crossorigin
— How the element handles crossorigin requests
rel
— Relationship between the document containing the
hyperlink
and the destination resource
media
— Applicable media
integrity
— Integrity metadata used in
Subresource Integrity
checks
[SRI]
hreflang
— Language of the linked resource
type
— Hint for the type of the referenced resource
referrerpolicy
Referrer policy
for
fetches
initiated by the element
sizes
— Sizes of the icons (for
rel
="
icon
")
imagesrcset
— Images to use in different situations, e.g., high-resolution displays, small monitors, etc. (for
rel
="
preload
")
imagesizes
— Image sizes for different page layouts (for
rel
="
preload
")
as
— Destination for a preload request (for
rel
="
preload
" and
rel
="
modulepreload
")
blocking
— Whether the element is
potentially render-blocking
color
— Color to use when customizing a site's icon (for
rel
="
mask-icon
")
disabled
— Whether the link is disabled
fetchpriority
— Sets the
priority
for
fetches
initiated by the element
Also, the
title
attribute
has special semantics
on this element: Title of the link;
CSS style sheet set name
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLLinkElement
HTMLElement
HTMLConstructor
constructor
();

CEReactions
ReflectURL
attribute
USVString
href
CEReactions
attribute
DOMString
crossOrigin
CEReactions
Reflect
attribute
DOMString
rel
CEReactions
attribute
DOMString
as
SameObject
PutForwards
value
Reflect
="
rel
"]
readonly
attribute
DOMTokenList
relList
CEReactions
Reflect
attribute
DOMString
media
CEReactions
Reflect
attribute
DOMString
integrity
CEReactions
Reflect
attribute
DOMString
hreflang
CEReactions
Reflect
attribute
DOMString
type
SameObject
PutForwards
value
Reflect
readonly
attribute
DOMTokenList
sizes
CEReactions
Reflect
attribute
USVString
imageSrcset
CEReactions
Reflect
attribute
DOMString
imageSizes
CEReactions
attribute
DOMString
referrerPolicy
SameObject
PutForwards
value
Reflect
readonly
attribute
DOMTokenList
blocking
CEReactions
Reflect
attribute
boolean
disabled
CEReactions
attribute
DOMString
fetchPriority

//
also has obsolete members
};
HTMLLinkElement
includes
LinkStyle
The
link
element allows authors to link their document to other resources.
The address of the link(s) is given by the
href
attribute. If the
href
attribute is present, then its value must be a
valid
non-empty URL potentially surrounded by spaces
. One or both of the
href
or
imagesrcset
attributes must be present.
If both the
href
and
imagesrcset
attributes are absent, then the element does not
define a link.
The types of link indicated (the relationships) are given by the value of the
rel
attribute, which, if present, must have a
value that is a
unordered set of unique space-separated tokens
. The
allowed keywords and their meanings
are defined in a later section. If the
rel
attribute is absent, has no keywords, or if
none of the keywords used are allowed according to the definitions in this specification, then the
element does not create any links.
rel
's
supported tokens
are the keywords defined in
HTML link types
which are allowed on
link
elements, impact
the processing model, and are supported by the user agent. The possible
supported tokens
are
alternate
dns-prefetch
expect
icon
manifest
modulepreload
next
pingback
preconnect
prefetch
preload
, and
stylesheet
rel
's
supported
tokens
must only include the tokens from this list that the user agent implements the
processing model for.
Theoretically a user agent could support the processing model for the
canonical
keyword — if it were a search engine that executed
JavaScript. But in practice that's quite unlikely. So in most cases,
canonical
ought not be included in
rel
's
supported
tokens
link
element must have either a
rel
attribute or an
itemprop
attribute, but not both.
If a
link
element has an
itemprop
attribute,
or has a
rel
attribute that contains only keywords that are
body-ok
, then the element is said to be
allowed in the body
. This means
that the element can be used where
phrasing content
is expected.
If the
rel
attribute is used, the element can
only sometimes be used in the
body
of the page. When used with the
itemprop
attribute, the element can be used both in the
head
element and in the
body
of the page, subject to the constraints of
the microdata model.
Two categories of links can be created using the
link
element:
links to external resources
and
hyperlinks
. The
link types section
defines
whether a particular link type is an external resource or a hyperlink. One
link
element can create multiple links (of which some might be
external resource links
and some might be
hyperlinks
); exactly which and how many links are created depends on the
keywords given in the
rel
attribute. User agents must process
the links on a per-link basis, not a per-element basis.
Each link created for a
link
element is handled separately. For
instance, if there are two
link
elements with
rel="stylesheet"
they each count as a separate external resource, and each is affected by its own attributes
independently. Similarly, if a single
link
element has a
rel
attribute with the value
next stylesheet
it creates both a
hyperlink
(for the
next
keyword) and
an
external resource link
(for the
stylesheet
keyword), and they are affected by other attributes (such as
media
or
title
differently.
For example, the following
link
element creates two
hyperlinks
(to the same page):
link
rel
"author license"
href
"/about"
The two links created by this element are one whose semantic is that the target page has
information about the current page's author, and one whose semantic is that the target page has
information regarding the license under which the current page is provided.
Hyperlinks
created with the
link
element and its
rel
attribute apply to the whole document. This contrasts with
the
rel
attribute of
and
area
elements, which indicates the type of a link whose context is given by the link's location within
the document.
Unlike those created by
and
area
elements,
hyperlinks
created by
link
elements are not displayed as
part of the document by default, in user agents that
support the suggested
default rendering
. And even if they are force-displayed using CSS, they have no
activation behavior
. Instead, they primarily provide semantic information which might
be used by the page or by other software that consumes the page's contents. Additionally, the user
agent can
provide
its own UI for following such hyperlinks
The exact behavior for
links to external resources
depends on the exact relationship, as defined for the relevant
link
type
The
crossorigin
attribute is a
CORS settings attribute
. It is intended for use with
external resource links
The
media
attribute
says which media the resource applies to. The value must be a
valid media query
list
Subresource_Integrity
Support in all current engines.
Firefox
43+
Safari
11.1+
Chrome
45+
Opera
Edge
79+
Edge (Legacy)
17+
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
The
integrity
attribute represents the
integrity
metadata
for requests which this element is responsible for. The value is text. The
attribute must only be specified on
link
elements that have a
rel
attribute that contains the
stylesheet
preload
, or
modulepreload
keyword.
[SRI]
The
hreflang
attribute on the
link
element has the same semantics as the
hreflang
attribute on the
element
The
type
attribute
gives the
MIME type
of the linked resource. It is purely advisory. The value must be
valid MIME type string
For
external resource links
, the
type
attribute is used as a hint to user agents so that they can
avoid fetching resources they do not support.
The
referrerpolicy
attribute is a
referrer policy
attribute
. It is intended for use with
external
resource links
, where it helps set the
referrer policy
used when
fetching and processing the linked resource
[REFERRERPOLICY]
The
title
attribute
gives the title of the link. With one exception, it is purely advisory. The value is text. The
exception is for style sheet links that are
in a document tree
, for which the
title
attribute defines
CSS
style sheet sets
The
title
attribute on
link
elements differs from the global
title
attribute of most other
elements in that a link without a title does not inherit the title of the parent element: it
merely has no title.
The
imagesrcset
attribute may be present, and is a
srcset attribute
The
imagesrcset
and
href
attributes (if
width
descriptors
are not used) together contribute the
image
sources
to the
source set
If the
imagesrcset
attribute is present and has any
image candidate strings
using a
width
descriptor
, the
imagesizes
attribute must also be present, and is a
sizes attribute
. The
imagesizes
attribute
contributes the
source size
to the
source set
The
imagesrcset
and
imagesizes
attributes must only be specified on
link
elements that have both a
rel
attribute that
specifies the
preload
keyword, as well as an
as
attribute in the "
image
" state.
These attributes allow preloading the appropriate resource that is later used by an
img
element that has the corresponding values for its
srcset
and
sizes
attributes:
link
rel
"preload"
as
"image"
imagesrcset
"wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
imagesizes
"50vw"

img
src
"wolf.jpg"
alt
"A rad wolf"
srcset
"wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
sizes
"50vw"
Note how we omit the
href
attribute, as it would only
be relevant for browsers that do not support
imagesrcset
, and in those cases it would likely cause the
incorrect image to be preloaded.
The
imagesrcset
attribute can be combined with the
media
attribute to preload the appropriate resource
selected from a
picture
element's sources, for
art direction
link
rel
"preload"
as
"image"
imagesrcset
"dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media
"(max-width: 800px)"
link
rel
"preload"
as
"image"
imagesrcset
"dog-wide-1x.jpg, dog-wide-2x.jpg 2x"
media
"(min-width: 801px)"

picture
source
srcset
"dog-cropped-1x.jpg, dog-cropped-2x.jpg 2x"
media
"(max-width: 800px)"
img
src
"dog-wide-1x.jpg"
srcset
"dog-wide-2x.jpg 2x"
alt
"An awesome dog"
picture
The
sizes
attribute
gives the sizes of icons for visual media. Its value, if present, is merely advisory. User agents may use the value to decide which icon(s) to use if multiple icons are
available. If specified, the attribute must have a value that is an
unordered set of
unique space-separated tokens
which are
ASCII case-insensitive
. Each value
must be either an
ASCII case-insensitive
match for the string "
any
", or a value that consists of two
valid non-negative integers
that do not have a leading U+0030 DIGIT
ZERO (0) character and that are separated by a single U+0078 LATIN SMALL LETTER X or U+0058 LATIN
CAPITAL LETTER X character. The attribute must only be specified on
link
elements
that have a
rel
attribute that specifies the
icon
keyword or the
apple-touch-icon
keyword.
The
apple-touch-icon
keyword is a registered
extension to the predefined set of link types
, but user
agents are not required to support it in any way.
The
as
attribute
specifies either a
preload destination
or a
module preload destination
for a preload request for the resource given by the
href
attribute. It is an
enumerated attribute
. Each of the union of
preload destinations
and
module preload destinations
is a keyword for this
attribute, mapping to a state of the same name. The attribute must be specified on
link
elements that have a
rel
attribute that
contains the
preload
keyword; in such cases it must have a
value which is a
preload destination
. It may be specified on
link
elements that have a
rel
attribute that contains the
modulepreload
keyword; in such cases it must have a value
which is a
module preload destination
. For other
link
elements, it must
not be specified.
The processing model for how the
as
attribute is
used is given in an individual link type's
fetch and process the linked resource
algorithm.
The attribute does not have a
missing value
default
or
invalid value default
, meaning that invalid
or missing values for the attribute map to no state. This is accounted for in the processing
model. For
preload
links, both conditions are an error; for
modulepreload
links, a missing value will be treated as
script
".
The
blocking
attribute is a
blocking attribute
. It is used by link types
stylesheet
and
expect
, and it must only be specified on link elements
that have a
rel
attribute containing those keywords.
The
color
attribute is
used with the
mask-icon
link type. The attribute must only be specified on
link
elements that have a
rel
attribute that
contains the
mask-icon
keyword. The value must be a string that matches the
CSS

production, defining a suggested color that user agents can use to
customize the display of the icon that the user sees when they pin your site.
This specification does not have any user agent requirements for the
color
attribute.
The
mask-icon
keyword is a registered
extension to the predefined set of link types
, but user
agents are not required to support it in any way.
link
elements have an associated
explicitly enabled
boolean. It is
initially false.
The
disabled
attribute is a
boolean attribute
that is used with the
stylesheet
link type. The attribute must only be specified on
link
elements that have a
rel
attribute that
contains the
stylesheet
keyword.
Whenever the
disabled
attribute is removed, set the
link
element's
explicitly enabled
attribute to true.
Removing the
disabled
attribute dynamically, e.g.,
using
document.querySelector("link").removeAttribute("disabled")
, will
fetch and apply the style sheet:
link
disabled
rel
"alternate stylesheet"
href
"css/pooh"
HTMLLinkElement/fetchPriority
Firefox
No
Safari
🔰 preview+
Chrome
102+
Opera
Edge
102+
Edge (Legacy)
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
The
fetchpriority
attribute is a
fetch
priority attribute
that is intended for use with
external resource links
, where it is used to set the
priority
used when
fetching and processing the linked
resource
There is no reflecting IDL attribute for the
color
attribute, but this might be added later.
HTMLLinkElement/as
Support in all current engines.
Firefox
56+
Safari
10+
Chrome
50+
Opera
Edge
79+
Edge (Legacy)
17+
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
The
as
IDL
attribute must
reflect
the
as
content attribute,
limited to only known values
The
crossOrigin
IDL attribute must
reflect
the
crossorigin
content attribute,
limited to only
known values
HTMLLinkElement/referrerPolicy
Support in all current engines.
Firefox
50+
Safari
14.1+
Chrome
58+
Opera
Edge
79+
Edge (Legacy)
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
The
referrerPolicy
IDL attribute must
reflect
the
referrerpolicy
content
attribute,
limited to only known values
The
fetchPriority
IDL attribute must
reflect
the
fetchpriority
content
attribute,
limited to only known values
The
relList
attribute can be used for
feature detection, by calling its
supports()
method to check which
types of links
are supported.
4.2.4.1
Processing the
media
attribute
If the link is a
hyperlink
then the
media
attribute is purely advisory, and describes for which media the document in question was
designed.
However, if the link is an
external resource link
, then the
media
attribute is prescriptive. The user agent must apply the
external resource when the
media
attribute's value
matches the environment
and the other relevant conditions apply, and must not apply
it otherwise.
The default, if the
media
attribute is
omitted, is "
all
", meaning that by default links apply to all media.
The external resource might have further restrictions defined within that limit
its applicability. For example, a CSS style sheet might have some
@media
blocks. This specification does not override such further restrictions or requirements.
4.2.4.2
Processing the
type
attribute
If the
type
attribute is present, then the user agent must
assume that the resource is of the given type (even if that is not a
valid MIME type
string
, e.g. the empty string). If the attribute is omitted, but the
external
resource link
type has a default type defined, then the user agent must assume that the
resource is of that type. If the UA does not support the given
MIME type
for the
given link relationship, then the UA should not
fetch and process the linked
resource
; if the UA does support the given
MIME type
for the given link
relationship, then the UA should
fetch and process the linked resource
at the
appropriate time as specified for the
external resource link
's particular type.
If the attribute is omitted, and the
external resource link
type does not have a
default type defined, but the user agent would
fetch and process the linked resource
if the type was known and supported, then the user agent should
fetch and process the linked
resource
under the assumption that it will be supported.
User agents must not consider the
type
attribute
authoritative — upon fetching the resource, user agents must not use the
type
attribute to determine its actual type. Only the actual type
(as defined in the next paragraph) is used to determine whether to
apply
the resource,
not the aforementioned assumed type.
If the
external resource link
type defines rules
for processing the resource's
Content-Type metadata
, then those
rules apply. Otherwise, if the resource is expected to be an image, user agents may apply the
image sniffing rules
, with the
official
type
being the type determined from the resource's
Content-Type
metadata
, and use the resulting
computed type of the
resource
as if it was the actual type. Otherwise, if neither of these conditions apply or
if the user agent opts not to apply the image sniffing rules, then the user agent must use the
resource's
Content-Type metadata
to determine the type of the
resource. If there is no type metadata, but the
external resource link
type has a
default type defined, then the user agent must assume that the resource is of that type.
The
stylesheet
link type defines rules for
processing the resource's
Content-Type metadata
Once the user agent has established the type of the resource, the user agent must apply the
resource if it is of a supported type and the other relevant conditions apply, and must ignore the
resource otherwise.
If a document contains style sheet links labeled as follows:
link
rel
"stylesheet"
href
"A"
type
"text/plain"
link
rel
"stylesheet"
href
"B"
type
"text/css"
link
rel
"stylesheet"
href
"C"
...then a compliant UA that supported only CSS style sheets would fetch the B and C files, and
skip the A file (since
text/plain
is not the
MIME type
for CSS style
sheets).
For files B and C, it would then check the actual types returned by the server. For those that
are sent as
text/css
, it would apply the styles, but for those labeled as
text/plain
, or any other type, it would not.
If one of the two files was returned without a
Content-Type
metadata, or with a
syntactically incorrect type like
Content-Type: "null"
, then the
default type for
stylesheet
links would kick in. Since that
default type is
text/css
, the style sheet
would
nonetheless be applied.
4.2.4.3
Fetching and processing a resource
from a
link
element
All
external resource
links
have a
fetch and process the linked resource
algorithm, which takes a
link
element
el
. They also have
linked resource fetch setup
steps
which take a
link
element
el
and
request
request
. Individual link types may provide
their own
fetch and process the linked resource
algorithm, but unless explicitly
stated, they use the
default fetch and process the linked resource
algorithm.
Similarly, individual link types may provide their own
linked resource fetch setup
steps
, but unless explicitly stated, these steps just return true.
The
default fetch and process the linked resource
, given a
link
element
el
, is as follows:
Let
options
be the result of
creating link options
from
el
Let
request
be the result of
creating a
link request
given
options
If
request
is null, then return.
Set
request
's
synchronous flag
Run the
linked resource fetch setup steps
, given
el
and
request
. If the result is false, then return.
Set
request
's
initiator
type
to "
css
" if
el
's
rel
attribute contains the keyword
stylesheet
; "
link
" otherwise.
Fetch
request
with
processResponseConsumeBody
set to the following steps
given
response
response
and null, failure, or
byte sequence
bodyBytes
Let
success
be true.
If any of the following are true:
bodyBytes
is null or failure; or
response
's
status
is not an
ok status
then set
success
to false.
Note that content-specific errors, e.g., CSS parse errors or PNG decoding
errors, do not affect
success
Otherwise, wait for the
link
resource
's
critical subresources
to finish loading.
The specification that defines a link type's
critical subresources
(e.g., CSS) is expected to describe how these subresources are fetched and processed. However,
since this is not currently explicit, this specification describes waiting for a
link resource
's
critical subresources
to
be fetched and processed, with the expectation that this will be done correctly.
Process the linked resource
given
el
success
response
, and
bodyBytes
To
create a link request
given a
link processing options
options
Assert
options
's
href
is
not the empty string.
Let
url
be the result of
encoding-parsing a URL
given
options
's
href
, relative to
options
's
base URL
Passing the base URL instead of a document or environment is tracked by
issue #9715
If
url
is failure, then return null.
Let
request
be the result of
creating a potential-CORS request
given
url
options
's
destination
, and
options
's
crossorigin
Set
request
's
policy
container
to
options
's
policy
container
Set
request
's
integrity
metadata
to
options
's
integrity
Set
request
's
cryptographic
nonce metadata
to
options
's
cryptographic
nonce metadata
Set
request
's
referrer
policy
to
options
's
referrer
policy
Set
request
's
client
to
options
's
environment
Set
request
's
priority
to
options
's
fetch priority
Return
request
User agents may opt to only try to
fetch
and process
such resources when they are needed, instead of pro-actively fetching all the
external resources
that are not applied.
Similar to the
fetch and process the linked resource
algorithm, all
external resource links
have a
process the linked
resource
algorithm which takes a
link
element
el
, boolean
success
, a
response
response
, and a
byte sequence
bodyBytes
. Individual link types may provide their own
process the linked resource
algorithm, but unless explicitly stated, that algorithm
does nothing.
Unless otherwise specified for a given
rel
keyword, the
element must
delay the load event
of the element's
node document
until
all the attempts to
fetch and process the linked resource
and its
critical
subresources
are complete. (Resources that the user agent has not yet attempted to fetch
and process, e.g., because it is waiting for the resource to be needed, do not
delay the
load event
.)
4.2.4.4
Processing `
Link
` headers
All link types that can be
external resource
links
define a
process a link header
algorithm, which takes a
link
processing options
. This algorithm defines whether and how they react to appearing in an
HTTP `
Link
` response header.
For most link types, this algorithm does nothing. The
summary table
is a good reference to quickly know whether a link
type has defined
process a link header
steps.
link processing options
is a
struct
. It has the following
items
href
(default the empty
string)
initiator
(default
link
")
integrity
(default
the empty string)
type
(default the empty
string)
cryptographic nonce
metadata
(default the empty string)
A string
destination
(default the empty string)
destination type
crossorigin
(default
No CORS
CORS settings attribute
state
referrer
policy
(default the empty string)
referrer policy
source set
(default
null)
Null or a
source set
base URL
URL
origin
An
origin
environment
An
environment
policy
container
policy container
document
(default
null)
Null or a
Document
on document
ready
(default null)
Null or an algorithm accepting a
Document
fetch priority
(default
Auto
fetch priority attribute
state
link processing options
has a
base URL
and an
href
rather than a parsed URL because the URL could be a result of the options's
source set
To
create link options from element
given a
link
element
el
Let
document
be
el
's
node document
Let
options
be a new
link processing options
with
crossorigin
the state of
el
's
crossorigin
content attribute
referrer policy
the state of
el
's
referrerpolicy
content attribute
source set
el
's
source set
base URL
document
's
document base URL
origin
document
's
origin
environment
document
's
relevant settings object
policy container
document
's
policy container
document
document
cryptographic nonce metadata
the current value of
el
's
[[CryptographicNonce]]
internal slot
fetch priority
the state of
el
's
fetchpriority
content attribute
If
el
has an
href
attribute, then set
options
's
href
to the value of
el
's
href
attribute.
If
el
has an
integrity
attribute,
then set
options
's
integrity
to the
value of
el
's
integrity
content
attribute.
If
el
has a
type
attribute, then set
options
's
type
to the value of
el
's
type
attribute.
Assert
options
's
href
is not
the empty string, or
options
's
source
set
is not null.
link
element with neither an
href
or an
imagesrcset
does not represent a link.
Return
options
To
extract links from headers
given a
header
list
headers
Let
links
be a new
list
Let
rawLinkHeaders
be the result of
getting, decoding, and splitting
Link
` from
headers
For each
linkHeader
of
rawLinkHeaders
Let
linkObject
be the result of
parsing
linkHeader
[WEBLINK]
If
linkObject
["
target_uri
"] does not
exist
, then
continue
Append
linkObject
to
links
Return
links
To
process link headers
given a
Document
doc
response
response
, and a
pre-media
" or "
media
phase
Let
links
be the result of
extracting links
from
response
's
header list
For each
linkObject
in
links
Let
rel
be
linkObject
["
relation_type
"].
Let
attribs
be
linkObject
["
target_attributes
"].
Let
expectedPhase
be "
media
" if either "
srcset
", "
imagesrcset
", or "
media
exist
in
attribs
; otherwise "
pre-media
".
If
expectedPhase
is not
phase
, then
continue
If
attribs
["
media
"]
exists
and
attribs
["
media
"]
does not
match the environment
, then
continue
Let
options
be a new
link processing options
with
href
linkObject
["
target_uri
"]
base URL
doc
's
document base URL
origin
doc
's
origin
environment
doc
's
relevant settings object
policy container
doc
's
policy
container
document
doc
Apply link options from parsed header attributes
to
options
given
attribs
and
rel
. If that returned false, then return.
If
attribs
["
imagesrcset
"]
exists
and
attribs
["
imagesizes
"]
exists
then set
options
's
source set
to the
result of
creating a source set
given
linkObject
["
target_uri
"],
attribs
["
imagesrcset
"],
attribs
["
imagesizes
"], and null.
Run the
process a link header
steps for
rel
given
options
To
apply link options from parsed header attributes
to a
link processing
options
options
given
attribs
and a string
rel
If
rel
is "
preload
":
If
attribs
["
as
"] does not
exist
, then return false.
Let
destination
be the result of
translating
attribs
["
as
"].
If
destination
is null, then return false.
Set
options
's
destination
to
destination
If
attribs
["
crossorigin
"]
exists
and is an
ASCII case-insensitive
match for one of
the
CORS settings attribute
keywords
then set
options
's
crossorigin
to the
CORS settings attribute
state corresponding to that keyword.
If
attribs
["
integrity
"]
exists
, then set
options
's
integrity
to
attribs
["
integrity
"].
If
attribs
["
referrerpolicy
"]
exists
and is an
ASCII case-insensitive
match for
some
referrer policy
, then set
options
's
referrer policy
to that
referrer policy
If
attribs
["
nonce
"]
exists
, then set
options
's
nonce
to
attribs
["
nonce
"].
If
attribs
["
type
"]
exists
, then set
options
's
type
to
attribs
["
type
"].
If
attribs
["
fetchpriority
"]
exists
and is an
ASCII case-insensitive
match for
fetch priority attribute
keyword, then set
options
's
fetch priority
to that
fetch priority
attribute
keyword.
Return true.
4.2.4.5
Early hints
Status/103
Firefox
preview+
Safari
No
Chrome
103+
Opera
No
Edge
103+
Edge (Legacy)
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
Early hints
allow user-agents to perform some operations, such as to speculatively
load resources that are likely to be used by the document, before the navigation request is fully
handled by the server and a response code is served. Servers can indicate early hints by serving a
response
with a 103 status code before serving the final
response
[RFC8297]
For compatibility reasons
early hints are typically
delivered over HTTP/2 or above
, but for readability we use HTTP/1.1-style notation below.
For example, given the following sequence of responses:
103 Early Hint
Link: ;
rel
preload
as
=image
200 OK
Content-Type: text/html

...

the image will start loading before the HTML content arrives.
Only the first early hint response served during the navigation is handled, and it
is discarded if it is succeeded by a cross-origin redirect.
In addition to the `
Link
` headers, it is possible that the 103
response contains a
Content Security Policy
header, which is enforced when processing
the early hint.
For example, given the following sequence of responses:
103 Early Hint
Content-Security-Policy: style-src: self;
Link: ;
rel
preload
as
=style
103 Early Hint
Link: ;
rel
preload
as
=image
302 Redirect
Location: /alternate.html
200 OK
Content-Security-Policy: style-src: none;
Link: ;
rel
preload
as
=font
The font and style would be loaded, and the image will be discarded, as only the first early
hint response in the final redirect chain is respected. The late
Content Security
Policy
header comes after the request to fetch the style has already been performed, but
the style will not be accessible to the document.
To
process early hint headers
given a
response
response
and an
environment
reservedEnvironment
Early-hint `
Link
` headers are always processed
before `
Link
` headers from the final
response
, followed by
link
elements. This is
equivalent to prepending the contents of the early and final `
Link
` headers to the
Document
's
head
element,
in respective order.
Let
earlyPolicyContainer
be the result of
creating a policy container from
a fetch response
given
response
and
reservedEnvironment
This allows the early hint
response
to
include a
Content Security Policy
which would be
enforced
when fetching the early hint
request
Let
links
be the result of
extracting links
from
response
's
header list
Let
earlyHints
be an empty
list
For each
linkObject
in
links
The moment we receive the early hint link header, we begin
fetching
earlyRequest
. If it comes back before the
Document
is created, we set
earlyResponse
to the
response
of that
fetch
and
once the
Document
is created we commit it (by making it available in the
map
of preloaded resources
as if it was a
link
element). If the
Document
is created first, the
response
is
committed as soon as it becomes available.
Let
rel
be
linkObject
["
relation_type
"].
Let
options
be a new
link processing options
with
href
linkObject
["
target_uri
"]
initiator
early-hint
base URL
response
's
URL
origin
response
's
URL
's
origin
environment
reservedEnvironment
policy container
earlyPolicyContainer
Let
attribs
be
linkObject
["
target_attributes
"].
Only the
as
crossorigin
integrity
, and
type
attributes are handled as part of early hint processing. The other ones, in particular
blocking
imagesrcset
imagesizes
, and
media
are only applicable once a
Document
is
created.
Apply link options from parsed header attributes
to
options
given
attribs
and
rel
. If that returned false, then return.
Run the
process a link header
steps for
rel
given
options
Append
options
to
earlyHints
Return the following substeps given
Document
doc
for each
options
in
earlyHints
If
options
's
on document ready
is null, then set
options
's
document
to
doc
Otherwise, call
options
's
on document ready
with
doc
4.2.4.6
Providing users with a means to follow hyperlinks created using the
link
element
Interactive user agents may provide users with a means to
follow the hyperlinks
created using the
link
element, somewhere
within their user interface. Such invocations of the
follow
the hyperlink
algorithm must set the
userInvolvement
argument to "
browser UI
". The exact interface is not defined by this
specification, but it could include the following information (obtained from the element's
attributes, again as defined below), in some form or another (possibly simplified), for each
hyperlink
created with each
link
element in the document:
The relationship between this document and the resource (given by the
rel
attribute)
The title of the resource (given by the
title
attribute).
The address of the resource (given by the
href
attribute).
The language of the resource (given by the
hreflang
attribute).
The optimum media for the resource (given by the
media
attribute).
User agents could also include other information, such as the type of the resource (as given by
the
type
attribute).
4.2.5
The
meta
element
Element/meta
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
Yes
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLMetaElement
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
Categories
Metadata content
If the
itemprop
attribute is present:
flow content
If the
itemprop
attribute is present:
phrasing content
Contexts in which this element can be used
If the
charset
attribute is present, or if the element's
http-equiv
attribute is in the
Encoding declaration state
: in a
head
element.
If the
http-equiv
attribute is present but not in the
Encoding declaration state
: in a
head
element.
If the
http-equiv
attribute is present but not in the
Encoding declaration state
: in a
noscript
element that is a child of a
head
element.
If the
name
attribute is present: where
metadata content
is expected.
If the
itemprop
attribute is present: where
metadata content
is expected.
If the
itemprop
attribute is present: where
phrasing content
is expected.
Content model
Nothing
Tag omission in text/html
No
end tag
Content attributes
Global attributes
name
— Metadata name
http-equiv
— Pragma directive
content
— Value of the element
charset
Character encoding declaration
media
— Applicable media
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLMetaElement
HTMLElement
HTMLConstructor
constructor
();

CEReactions
Reflect
attribute
DOMString
name
CEReactions
Reflect
="
http-equiv
"]
attribute
DOMString
httpEquiv
CEReactions
Reflect
attribute
DOMString
content
CEReactions
Reflect
attribute
DOMString
media

//
also has obsolete members
};
The
meta
element
represents
various kinds of metadata that cannot be
expressed using the
title
base
link
style
and
script
elements.
The
meta
element can represent document-level metadata with the
name
attribute, pragma directives with the
http-equiv
attribute, and the file's
character encoding
declaration
when an HTML document is serialized to string form (e.g. for transmission over
the network or for disk storage) with the
charset
attribute.
Exactly one of the
name
http-equiv
charset
and
itemprop
attributes must be specified.
If either
name
http-equiv
, or
itemprop
is
specified, then the
content
attribute must also be
specified. Otherwise, it must be omitted.
The
charset
attribute specifies the
character encoding
used by the document.
This is a
character encoding declaration
. If the attribute is present, its value must
be an
ASCII case-insensitive
match for the string "
utf-8
".
The
charset
attribute on the
meta
element has no effect in XML documents, but is allowed in XML documents in order
to facilitate migration to and from XML.
There must not be more than one
meta
element with a
charset
attribute per document.
The
content
attribute gives the value of the document metadata or pragma directive when the element is used
for those purposes. The allowed values depend on the exact context, as described in subsequent
sections of this specification.
If a
meta
element has a
name
attribute, it sets document metadata. Document metadata
is expressed in terms of name-value pairs, the
name
attribute
on the
meta
element giving the name, and the
content
attribute on the same element giving the value. The name
specifies what aspect of metadata is being set; valid names and the meaning of their values are
described in the following sections. If a
meta
element has no
content
attribute, then the value part of the metadata
name-value pair is the empty string.
The
media
attribute
says which media the metadata applies to. The value must be a
valid media query list
Unless the
name
is
theme-color
, the
media
attribute has no effect on the processing model and must not be used by authors.
4.2.5.1
Standard metadata names
Element/meta/name
Support in all current engines.
Firefox
1+
Safari
4+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
6+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
This specification defines a few names for the
name
attribute of the
meta
element.
Names are case-insensitive
, and must be compared in an
ASCII
case-insensitive
manner
application-name
The value must be a short free-form string giving the name of the web application that the
page represents. If the page is not a web application, the
application-name
metadata name must not be used.
Translations of the web application's name may be given, using the
lang
attribute to specify the language of each name.
There must not be more than one
meta
element with a given
language
and where the
name
attribute value is an
ASCII case-insensitive
match for
application-name
per document.
User agents may use the application name in UI in preference to the page's
title
, since the title might include status messages and the like relevant to the
status of the page at a particular moment in time instead of just being the name of the
application.
To find the application name to use given an ordered list of languages (e.g. British English,
American English, and English), user agents must run the following steps:
Let
languages
be the list of languages.
Let
default language
be the
language
of the
Document
's
document element
, if any, and if that language is not
unknown.
If there is a
default language
, and if it is not the same language
as any of the languages in
languages
, append it to
languages
Let
winning language
be the first language in
languages
for which
there is a
meta
element in the
Document
where the
name
attribute value is an
ASCII case-insensitive
match for
application-name
and whose
language
is the language in question.
If none of the languages have such a
meta
element, then return;
there's no given application name.
Return the value of the
content
attribute of the
first
meta
element in the
Document
in
tree order
where the
name
attribute value is an
ASCII case-insensitive
match for
application-name
and whose
language
is
winning language
This algorithm would be used by a browser when it needs a name for the page, for
instance, to label a bookmark. The languages it would provide to the algorithm would be the
user's preferred languages.
author
The value must be a free-form string giving the name of one of the page's
authors.
description
The value must be a free-form string that describes the page. The value must be
appropriate for use in a directory of pages, e.g. in a search engine. There must not be more than
one
meta
element where the
name
attribute value
is an
ASCII case-insensitive
match for
description
per document.
generator
The value must be a free-form string that identifies one of the software packages used to
generate the document. This value must not be used on pages whose markup is not generated by
software, e.g. pages whose markup was written by a user in a text editor.
Here is what a tool called "Frontweaver" could include in its output, in the page's
head
element, to identify itself as the tool used to generate the page:
meta
name
generator
content
"Frontweaver 8.2"
keywords
The value must be a
set of comma-separated tokens
, each of which is a keyword
relevant to the page.
This page about typefaces on British motorways uses a
meta
element to specify
some keywords that users might use to look for the page:

html
lang
"en-GB"
head
title
Typefaces on UK motorways
title
meta
name
"keywords"
content
"british,type face,font,fonts,highway,highways"
head
body
...
Many search engines do not consider such keywords, because this feature has
historically been used unreliably and even misleadingly as a way to spam search engine results
in a way that is not helpful for users.
To obtain the list of keywords that the author has specified as applicable to the page, the
user agent must run the following steps:
Let
keywords
be an empty list.
For each
meta
element with a
name
attribute and a
content
attribute and where the
name
attribute value is an
ASCII case-insensitive
match for
keywords
Split the value of the element's
content
attribute on commas
Add the resulting tokens, if any, to
keywords
Remove any duplicates from
keywords
Return
keywords
. This is the list of keywords that the author has
specified as applicable to the page.
User agents should not use this information when there is insufficient confidence in the
reliability of the value.
For instance, it would be reasonable for a content management system to use
the keyword information of pages within the system to populate the index of a site-specific
search engine, but a large-scale content aggregator that used this information would likely find
that certain users would try to game its ranking mechanism through the use of inappropriate
keywords.
referrer
The value must be a
referrer policy
, which defines the default
referrer
policy
for the
Document
[REFERRERPOLICY]
If any
meta
element
element
is
inserted into the document
, or has its
name
or
content
attributes changed, user agents must run the following algorithm:
If
element
is not
in a document tree
, then return.
If
element
does not have a
name
attribute whose value is an
ASCII case-insensitive
match for "
referrer
", then return.
If
element
does not have a
content
attribute, or that attribute's value is the empty string, then return.
Let
value
be the value of
element
's
content
attribute,
converted to ASCII
lowercase
If
value
is one of the values given in the first column of the following table,
then set
value
to the value given in the second column:
Legacy value
Referrer policy
never
no-referrer
default
the
default referrer policy
always
unsafe-url
origin-when-crossorigin
origin-when-cross-origin
If
value
is a
referrer policy
, then set
element
's
node document
's
policy
container
's
referrer policy
to
policy
For historical reasons, unlike other standard metadata names, the processing
model for
referrer
is not responsive to element removals,
and does not use
tree order
. Only the most-recently-inserted or
most-recently-modified
meta
element in this state has an effect.
theme-color
Element/meta/name/theme-color
Firefox
No
Safari
15+
Chrome
🔰 73+
Opera
No
Edge
🔰 79+
Edge (Legacy)
Internet Explorer
No
Firefox Android
Safari iOS
Chrome Android
80+
WebView Android
No
Samsung Internet
6.2+
Opera Android
No
The value must be a string that matches the CSS

production, defining
a suggested color that user agents should use to customize the display of the page or of the
surrounding user interface. For example, a browser might color the page's title bar with the
specified value, or use it as a color highlight in a tab bar or task switcher.
Within an HTML document, the
media
attribute value must
be unique amongst all the
meta
elements with their
name
attribute value set to an
ASCII
case-insensitive
match for
theme-color
This standard itself uses "WHATWG green" as its theme color:

title
HTML Standard
title
meta
name
"theme-color"
content
"#3c790a"
...
The
media
attribute may be used to describe the context
in which the provided color should be used.
If we only wanted to use "WHATWG green" as this standard's theme color in dark mode,
we could use the
prefers-color-scheme
media feature:

title
HTML Standard
title
meta
name
"theme-color"
content
"#3c790a"
media
"(prefers-color-scheme: dark)"
...
To obtain a page's theme color, user agents must run the following steps:
Let
candidate elements
be the list of all
meta
elements that
meet the following criteria, in
tree order
the element is
in a document tree
the element has a
name
attribute, whose value
is an
ASCII case-insensitive
match for
theme-color
; and
the element has a
content
attribute.
For each
element
in
candidate elements
If
element
has a
media
attribute
and the value of
element
's
media
attribute does not
match the environment
, then
continue
Let
value
be the result of
stripping leading and trailing ASCII whitespace
from the value of
element
's
content
attribute.
Let
color
be the result of
parsing
value
If
color
is not failure, then return
color
Return nothing (the page has no theme color).
If any
meta
elements are
inserted into the document
or
removed from the document
, or existing
meta
elements have their
name
content
, or
media
attributes changed, or if the environment changes
such that any
meta
element's
media
attribute's value may now or may no longer
match the
environment
, user agents must re-run the above algorithm and apply the result to any
affected UI.
When using the theme color in UI, user agents may adjust it in implementation-specific ways
to make it more suitable for the UI in question. For example, if a user agent intends to use
the theme color as a background and display white text over it, it might use a darker variant of
the theme color in that part of the UI, to ensure adequate contrast.
color-scheme
To aid user agents in rendering the page background with the desired color scheme immediately
(rather than waiting for all CSS in the page to load), a
'color-scheme'
value can
be provided in a
meta
element.
The value must be a string that matches the syntax for the CSS
'color-scheme'
property value. It determines the
page's supported color-schemes
There must not be more than one
meta
element with its
name
attribute value set to an
ASCII case-insensitive
match for
color-scheme
per document.
The following declaration indicates that the page is aware of and can handle a color scheme
with dark background colors and light foreground colors:
meta
name
"color-scheme"
content
"dark"
To obtain a
page's supported color-schemes
, user agents must run the following steps:
Let
candidate elements
be the list of all
meta
elements that
meet the following criteria, in
tree order
the element is
in a document tree
the element has a
name
attribute, whose value
is an
ASCII case-insensitive
match for
color-scheme
; and
the element has a
content
attribute.
For each
element
in
candidate elements
Let
parsed
be the result of
parsing a list of component values
given the value of
element
's
content
attribute.
If
parsed
is a valid CSS
'color-scheme'
property value, then
return
parsed
Return null.
If any
meta
elements are
inserted into the document
or
removed from the document
, or existing
meta
elements have their
name
or
content
attributes changed, user agents must re-run the above algorithm.
Because these rules check successive elements until they find a match, an
author can provide multiple such values to handle fallback for legacy user agents. Opposite to
how CSS fallback works for properties, the multiple meta elements needs to be arranged with the
legacy values after the newer values.
4.2.5.2
Other metadata names
Anyone can create and use their own
extensions to the
predefined set of metadata names
. There is no requirement to register such extensions.
However, a new metadata name should not be created in any of the following cases:
If either the name is a
URL
, or the value of its accompanying
content
attribute is a
URL
; in those cases,
registering it as an
extension to the predefined set of
link types
is encouraged (rather than creating a new metadata name).
If the name is for something expected to have processing requirements in user agents; in
that case it ought to be standardized.
Also, before creating and using a new metadata name, consulting the
WHATWG Wiki MetaExtensions page
is
encouraged — to avoid choosing a metadata name that's already in use, and to avoid duplicating the
purpose of any metadata names that are already in use, and to avoid new standardized names
clashing with your chosen name.
[WHATWGWIKI]
Anyone is free to edit the WHATWG Wiki MetaExtensions page at any time to add a metadata name.
New metadata names can be specified with the following information:
Keyword
The actual name being defined. The name should not be confusingly similar to any other
defined name (e.g. differing only in case).
Brief description
A short non-normative description of what the metadata name's meaning is, including the
format the value is required to be in.
Specification
A link to a more detailed description of the metadata name's semantics and requirements. It
could be another page on the wiki, or a link to an external page.
Synonyms
A list of other names that have exactly the same processing requirements. Authors should
not use the names defined to be synonyms (they are only intended to allow user agents to support
legacy content). Anyone may remove synonyms that are not used in practice; only names that need to
be processed as synonyms for compatibility with legacy content are to be registered in this
way.
Status
One of the following:
Proposed
The name has not received wide peer review and approval. Someone has proposed it and is, or
soon will be, using it.
Ratified
The name has received wide peer review and approval. It has a specification that
unambiguously defines how to handle pages that use the name, including when they use it in
incorrect ways.
Discontinued
The metadata name has received wide peer review and it has been found wanting. Existing
pages are using this metadata name, but new pages should avoid it. The "brief description" and
"specification" entries will give details of what authors should use instead, if anything.
If a metadata name is found to be redundant with existing values, it should be removed and
listed as a synonym for the existing value.
If a metadata name is added in the "proposed" state for a period of a month or more without
being used or specified, then it may be removed from the WHATWG Wiki MetaExtensions page.
If a metadata name is added with the "proposed" status and found to be redundant with
existing values, it should be removed and listed as a synonym for the existing value. If a
metadata name is added with the "proposed" status and found to be harmful, then it should be
changed to "discontinued" status.
Anyone can change the status at any time, but should only do so in accordance with the
definitions above.
4.2.5.3
Pragma directives
When the
http-equiv
attribute is specified on a
meta
element, the element is a pragma directive.
Despite the name
http-equiv
, pragma directives are
almost entirely unrelated to HTTP headers. Implementers and web developers are best off thinking
of them as entirely separate, and the name as being a historical accident.
In more detail, although the
refresh
keyword has the same processing model as the corresponding `
Refresh
` header, every
other standardized pragma directive has at least slightly different behavior than the
similarly-named header. (And usually dramatically-different behavior.)
Implementers or specification writers contemplating adding new document-level pragmas or HTTP
header-controlled switches should be cautious about this mismatch, and avoid perpetuating the
existing confusion by adding the same or similar behavior to both an HTTP header and an
http-equiv
pragma. Instead, consider providing only an HTTP
header, or if an in-document pragma is needed, consider adding a new attribute to
meta
similar to the model used by the
charset
attribute. (Note that avoiding in-document pragmas is
often the better choice, since the DOM is mutable. Thus, even in the simple case where the
developer does not add, remove, or mutate
meta
elements, the policy will go from
un-applied to applied during parsing, which can have complex implications.)
The
http-equiv
attribute is an
enumerated
attribute
with the following keywords and states:
Keyword
Conforming
State
Brief description
content-language
No
Content language
Sets the
pragma-set default language
content-type
Encoding declaration
An alternative form of setting the
charset
default-style
Default style
Sets the
name
of the default
CSS style sheet set
refresh
Refresh
Acts as a timed redirect.
set-cookie
No
Set-Cookie
Has no effect.
x-ua-compatible
X-UA-Compatible
In practice, encourages Internet Explorer to more closely follow the specifications.
content-security-policy
Content security policy
Enforces
Content Security
Policy
on a
Document
When a
meta
element is
inserted
into the document
, if its
http-equiv
attribute is
present and represents one of the above states, then the user agent must run the algorithm
appropriate for that state, as described in the following list:
Content language state
http-equiv="
content-language
This feature is non-conforming. Authors are encouraged to use the
lang
attribute instead.
This pragma sets the
pragma-set default language
. Until such a pragma is
successfully processed, there is no
pragma-set default language
If the
meta
element has no
content
attribute, then return.
If the element's
content
attribute contains a
U+002C COMMA character (,), then return.
Let
input
be the value of the element's
content
attribute.
Let
position
point at the first character of
input
Skip ASCII whitespace
within
input
given
position
Collect a sequence of code points
that are not
ASCII
whitespace
from
input
given
position
Let
candidate
be the string that resulted from the previous
step.
If
candidate
is the empty string, return.
Set the
pragma-set default language
to
candidate
If the value consists of multiple space-separated tokens, tokens after the
first are ignored.
This pragma is almost, but not quite, entirely unlike the HTTP `
Content-Language
` header of the same name.
[HTTP]
Encoding declaration state
http-equiv="
content-type
The
Encoding declaration state
is
just an alternative form of setting the
charset
attribute: it is a
character encoding declaration
. This state's user
agent requirements are all handled by the parsing section of the specification.
For
meta
elements with an
http-equiv
attribute in the
Encoding declaration
state
, the
content
attribute must have a value
that is an
ASCII case-insensitive
match for a string that consists of:
text/html;
", optionally followed by any number of
ASCII
whitespace
, followed by "
charset=utf-8
".
A document must not contain both a
meta
element with an
http-equiv
attribute in the
Encoding declaration state
and a
meta
element with the
charset
attribute
present.
The
Encoding declaration state
may be
used in
HTML documents
, but elements with an
http-equiv
attribute in that state must not be used in
XML documents
Default style state
http-equiv="
default-style
Alternative_style_sheets
Support in one engine only.
Firefox
3+
Safari
Chrome
1–48
Opera
Yes
Edge
No
Edge (Legacy)
Internet Explorer
8+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
This pragma sets the
name
of the default
CSS style sheet set
If the
meta
element has no
content
attribute, or if that attribute's value is the empty string, then return.
Change the preferred CSS style sheet set name
with the name being the value
of the element's
content
attribute.
[CSSOM]
Refresh state
http-equiv="
refresh
This pragma acts as a timed redirect.
Document
object has an associated
will declaratively
refresh
(a boolean). It is initially false.
If the
meta
element has no
content
attribute, or if that attribute's value is the empty string, then return.
Let
input
be the value of the element's
content
attribute.
Run the
shared declarative refresh steps
with the
meta
element's
node document
input
, and the
meta
element.
The
shared declarative refresh steps
, given a
Document
object
document
, string
input
, and optionally a
meta
element
meta
, are as follows:
If
document
's
will declaratively refresh
is true, then
return.
Let
position
point at the first
code point
of
input
Skip ASCII whitespace
within
input
given
position
Let
time
be 0.
Collect a sequence of code points
that are
ASCII digits
from
input
given
position
, and let
timeString
be the
result.
If
timeString
is the empty string, then:
If the
code point
in
input
pointed to by
position
is not U+002E (.), then return.
Otherwise, set
time
to the result of parsing
timeString
using the
rules for parsing non-negative integers
Collect a sequence of code points
that are
ASCII digits
and
U+002E FULL STOP characters (.) from
input
given
position
. Ignore any
collected characters.
Let
urlRecord
be
document
's
URL
If
position
is not past the end of
input
, then:
If the
code point
in
input
pointed to by
position
is not U+003B (;), U+002C (,), or
ASCII whitespace
, then return.
Skip ASCII whitespace
within
input
given
position
If the
code point
in
input
pointed to by
position
is U+003B (;) or U+002C (,), then advance
position
to the next
code
point
Skip ASCII whitespace
within
input
given
position
If
position
is not past the end of
input
, then:
Let
urlString
be the substring of
input
from the
code point
at
position
to the end of the string.
If the
code point
in
input
pointed to by
position
is U+0055 (U) or U+0075 (u), then advance
position
to the next
code
point
. Otherwise, jump to the step labeled
skip quotes
If the
code point
in
input
pointed to by
position
is U+0052 (R) or U+0072 (r), then advance
position
to the next
code
point
. Otherwise, jump to the step labeled
parse
If the
code point
in
input
pointed to by
position
is U+004C (L) or U+006C (l), then advance
position
to the next
code
point
. Otherwise, jump to the step labeled
parse
Skip ASCII whitespace
within
input
given
position
If the
code point
in
input
pointed to by
position
is U+003D (=), then advance
position
to the next
code point
Otherwise, jump to the step labeled
parse
Skip ASCII whitespace
within
input
given
position
Skip quotes
: If the
code point
in
input
pointed to by
position
is U+0027 (') or U+0022 ("), then let
quote
be that
code
point
, and advance
position
to the next
code point
. Otherwise,
let
quote
be the empty string.
Set
urlString
to the substring of
input
from the
code
point
at
position
to the end of the string.
If
quote
is not the empty string, and there is a
code point
in
urlString
equal to
quote
, then truncate
urlString
at that
code point
, so that it and all subsequent
code
points
are removed.
Parse
: Set
urlRecord
to the result of
encoding-parsing a
URL
given
urlString
, relative to
document
If
urlRecord
is failure, then return.
If
urlRecord
's
scheme
is "
javascript
", then return.
Set
document
's
will declaratively refresh
to true.
Perform one or more of the following steps:
After the refresh has come due (as defined below), if the user has not canceled the
redirect and, if
meta
is given,
document
's
active sandboxing
flag set
does not have the
sandboxed automatic features browsing context
flag
set, then
navigate
document
's
node navigable
to
urlRecord
using
document
, with
historyHandling
set to "
replace
".
For the purposes of the previous paragraph, a refresh is said to have come due as soon as
the
later
of the following two conditions occurs:
At least
time
seconds have elapsed since
document
's
completely loaded time
, adjusted to take into account user or user agent
preferences.
If
meta
is given, at least
time
seconds have elapsed since
meta
was
inserted into the
document
document
, adjusted to take into account user or user agent
preferences.
It is important to use
document
here, and not
meta
's
node document
, as that might have changed between the initial set of steps and
the refresh coming due and
meta
is not always given (in case of the HTTP
Refresh
` header).
Provide the user with an interface that, when selected,
navigates
document
's
node
navigable
to
urlRecord
using
document
Do nothing.
In addition, the user agent may, as with anything, inform the user of any and all aspects
of its operation, including the state of any timers, the destinations of any timed redirects,
and so forth.
For
meta
elements with an
http-equiv
attribute in the
Refresh state
, the
content
attribute must have a value consisting either of:
just a
valid non-negative integer
, or
valid non-negative integer
, followed by a U+003B SEMICOLON character
(;), followed by one or more
ASCII whitespace
, followed by a substring that is
an
ASCII case-insensitive
match for the string "
URL
",
followed by a U+003D EQUALS SIGN character (=), followed by a
valid URL string
that does not start with a literal U+0027 APOSTROPHE (') or U+0022 QUOTATION MARK (")
character.
In the former case, the integer represents a number of seconds before the page is to be
reloaded; in the latter case the integer represents a number of seconds before the page is to be
replaced by the page at the given
URL
A news organization's front page could include the following markup in the page's
head
element, to ensure that the page automatically reloads from the server every
five minutes:
meta
http-equiv
"Refresh"
content
"300"
A sequence of pages could be used as an automated slide show by making each page refresh to
the next page in the sequence, using markup such as the following:
meta
http-equiv
"Refresh"
content
"20; URL=page4.html"
Set-Cookie state
http-equiv="
set-cookie
This pragma is non-conforming and has no effect.
User agents are required to ignore this pragma.
X-UA-Compatible state
http-equiv="
x-ua-compatible
In practice, this pragma encourages Internet Explorer to more closely follow the
specifications.
For
meta
elements with an
http-equiv
attribute in the
X-UA-Compatible state
, the
content
attribute must have a value that is an
ASCII case-insensitive
match for the string "
IE=edge
".
User agents are required to ignore this pragma.
Content security policy state
http-equiv="
content-security-policy
This pragma
enforces
Content Security
Policy
on a
Document
[CSP]
If the
meta
element is not a child of a
head
element,
return.
If the
meta
element has no
content
attribute, or if that attribute's value is the empty string, then return.
Let
policy
be the result of executing Content Security Policy's
parse
a serialized Content Security Policy
algorithm on the
meta
element's
content
attribute's value, with a source of "meta",
and a disposition of "enforce".
Remove all occurrences of the
report-uri
frame-ancestors
, and
sandbox
directives
from
policy
Enforce the policy
policy
For
meta
elements with an
http-equiv
attribute in the
Content security
policy state
, the
content
attribute must have a
value consisting of a
valid Content Security
Policy
, but must not contain any
report-uri
frame-ancestors
, or
sandbox
directives
The
Content Security Policy
given in the
content
attribute will be
enforced
upon the current document.
[CSP]
At the time of inserting the
meta
element to the document, it is
possible that some resources have already been fetched. For example, images might be stored in
the
list of available images
prior to dynamically inserting a
meta
element with an
http-equiv
attribute in the
Content security policy state
Resources that have already been fetched are not guaranteed to be blocked by a
Content
Security Policy
that's
enforced
late.
A page might choose to mitigate the risk of cross-site scripting attacks by preventing the
execution of inline JavaScript, as well as blocking all plugin content, using a policy such
as the following:
meta
http-equiv
"Content-Security-Policy"
content
"script-src 'self'; object-src 'none'"
There must not be more than one
meta
element with any particular state in the
document at a time.
4.2.5.4
Specifying the document's character encoding
character encoding declaration
is a mechanism by which the
character encoding
used to store or transmit a document is specified.
The Encoding standard requires use of the
UTF-8
character
encoding
and requires use of the "
utf-8
encoding label
to identify it. Those requirements necessitate that the document's
character encoding
declaration
, if it exists, specifies an
encoding label
using an
ASCII
case-insensitive
match for "
utf-8
". Regardless of whether a
character encoding declaration
is present or not, the actual
character encoding
used to encode the document must be
UTF-8
[ENCODING]
To enforce the above rules, authoring tools must default to using
UTF-8
for newly-created documents.
The following restrictions also apply:
The character encoding declaration must be serialized without the use of
character references
or character escapes of any kind.
The element containing the character encoding
declaration must be serialized completely within the first 1024 bytes of the
document.
In addition, due to a number of restrictions on
meta
elements, there can only be
one
meta
-based character encoding declaration per document.
If an
HTML document
does not start with a BOM, and its
encoding
is not explicitly given by
Content-Type
metadata
, and the document is not
an
iframe
srcdoc
document
, then the encoding must be specified
using a
meta
element with a
charset
attribute
or a
meta
element with an
http-equiv
attribute in the
Encoding declaration
state
A character encoding declaration is required (either in the
Content-Type metadata
or explicitly in the file) even when all
characters are in the ASCII range, because a character encoding is needed to process non-ASCII
characters entered by the user in forms, in URLs generated by scripts, and so forth.
Using non-UTF-8 encodings can have unexpected results on form submission and URL encodings,
which use the
document's character encoding
by default.
If the document is
an
iframe
srcdoc
document
, the document must not have a
character encoding declaration
. (In
this case, the source is already decoded, since it is part of the document that contained the
iframe
.)
In XML, the XML declaration should be used for inline character encoding information, if
necessary.
In HTML, to declare that the character encoding is
UTF-8
, the author could
include the following markup near the top of the document (in the
head
element):
meta
charset
"utf-8"
In XML, the XML declaration would be used instead, at the very top of the markup:

4.2.6
The
style
element
Element/style
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
3.5+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
3+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
10.1+
HTMLStyleElement
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
HTMLStyleElement/media
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
12+
Internet Explorer
5.5+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
Categories
Metadata content
Contexts in which this element can be used
Where
metadata content
is expected.
In a
noscript
element that is a child of a
head
element.
Content model
Text
that gives a
conformant style sheet
Tag omission in text/html
Neither tag is omissible.
Content attributes
Global attributes
media
— Applicable media
blocking
— Whether the element is
potentially render-blocking
Also, the
title
attribute
has special semantics
on this element:
CSS style sheet set name
Accessibility considerations
For authors
For implementers
DOM interface
Exposed
Window
interface
HTMLStyleElement
HTMLElement
HTMLConstructor
constructor
();
attribute
boolean
disabled
CEReactions
Reflect
attribute
DOMString
media
SameObject
PutForwards
value
Reflect
readonly
attribute
DOMTokenList
blocking

//
also has obsolete members
};
HTMLStyleElement
includes
LinkStyle
The
style
element allows authors to embed CSS style sheets in their documents.
The
style
element is one of several inputs to the styling processing
model. The element does not
represent
content for the
user.
HTMLStyleElement/disabled
Support in all current engines.
Firefox
1+
Safari
1+
Chrome
1+
Opera
12.1+
Edge
79+
Edge (Legacy)
13+
Internet Explorer
5.5+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
12.1+
The
disabled
getter steps are:
If
this
does not have an
associated CSS style sheet
, return
false.
If
this
's
associated CSS style sheet
's
disabled flag
is set, return true.
Return false.
The
disabled
setter steps are:
If
this
does not have an
associated CSS style sheet
return.
If the given value is true, set
this
's
associated CSS style
sheet
's
disabled flag
Otherwise, unset
this
's
associated CSS style sheet
's
disabled flag
Importantly,
disabled
attribute assignments only take
effect when the
style
element has an
associated CSS style sheet
const
style
document
createElement
'style'
);
style
disabled
true
style
textContent
'body { background-color: red; }'
document
body
append
style
);
console
log
style
disabled
);
// false
The
media
attribute
says which media the styles apply to. The value must be a
valid media query list
The user agent must apply the styles when the
media
attribute's value
matches the environment
and
the other relevant conditions apply, and must not apply them otherwise.
The styles might be further limited in scope, e.g. in CSS with the use of
@media
blocks. This specification does not override such further restrictions or
requirements.
The default, if the
media
attribute is omitted, is "
all
", meaning that by default styles apply to all
media.
The
blocking
attribute is a
blocking attribute
Alternative_style_sheets
Support in one engine only.
Firefox
3+
Safari
Chrome
1–48
Opera
Yes
Edge
No
Edge (Legacy)
Internet Explorer
8+
Firefox Android
Safari iOS
Chrome Android
WebView Android
Samsung Internet
Opera Android
The
title
attribute on
style
elements defines
CSS style sheet sets
. If the
style
element
has no
title
attribute, then it has no title; the
title
attribute of ancestors does not apply to the
style
element. If the
style
element is not
in a document tree
, then the
title
attribute is ignored.
[CSSOM]
The
title
attribute on
style
elements, like the
title
attribute on
link
elements, differs from the global
title
attribute in that a
style
block without a title does not inherit the title of the parent element: it
merely has no title.
The
child text content
of a
style
element must be that of a
conformant style sheet
style
element is
implicitly potentially render-blocking
if the
element was created by its
node document
's parser.
The user agent must run the
update a
style
block
algorithm whenever
any of the following conditions occur:
The element is popped off the
stack of open elements
of an
HTML
parser
or
XML parser
The element is not on the
stack of open elements
of an
HTML
parser
or
XML parser
, and it
becomes connected
or
disconnected
The element is not on the
stack of open elements
of an
HTML
parser
or
XML parser
, and its
children changed steps
run.
The
update a
style
block
algorithm is as follows:
Let
element
be the
style
element.
If
element
has an
associated CSS style sheet
remove the CSS style sheet
in question.
If
element
is not
connected
, then return.
If
element
's
type
attribute is present and
its value is neither the empty string nor an
ASCII case-insensitive
match for
text/css
", then return.
In particular, a
type
value with
parameters, such as "
text/css; charset=utf-8
", will cause this algorithm
to return early.
If the
Should element's inline behavior be blocked by Content Security
Policy?
algorithm returns "
Blocked
" when executed upon the
style
element, "
style
", and the
style
element's
child text content
, then return.
[CSP]
Create a CSS style sheet
with the following properties:
type
text/css
owner node
element
media
The
media
attribute of
element
This is a reference to the (possibly absent at this time) attribute, rather
than a copy of the attribute's current value.
CSSOM
defines what happens
when the attribute is dynamically set, changed, or removed.
title
The
title
attribute of
element
, if
element
is
in a document tree
, or the empty string otherwise.
Again, this is a
reference
to the attribute.
alternate flag
Unset.
origin-clean flag
Set.
location
parent CSS style sheet
owner CSS rule
null
disabled flag
Left at its default value.
CSS rules
Left uninitialized.
This doesn't seem right. Presumably we should be using the element's
child text content
? Tracked as
issue #2997
If
element
contributes a script-blocking style sheet
append
element
to its
node document
's
script-blocking style sheet set
If
element
's
media
attribute's value
matches the environment
and
element
is
potentially render-blocking
, then
block rendering
on
element
Once the attempts to obtain the style sheet's
critical subresources
, if any, are
complete, or, if the style sheet has no
critical subresources
, once the style sheet
has been parsed and processed, the user agent must run these steps:
Fetching the
critical subresources
is not well-defined; probably
issue #968
is the best resolution for that.
In the meantime, any
critical subresource
request
should have its
render-blocking
set to whether or not the
style
element is currently
render-blocking
Let
element
be the
style
element associated with the style sheet
in question.
Let
success
be true.
If the attempts to obtain any of the style sheet's
critical subresources
failed
for any reason (e.g., DNS error, HTTP 404 response, a connection being prematurely closed,
unsupported Content-Type), set
success
to false.
Note that content-specific errors, e.g., CSS parse errors or PNG decoding
errors, do not affect
success
Queue an element task
on the
networking task source
given
element
and the following steps:
If
success
is true,
fire an event
named
load
at
element
Otherwise,
fire an event
named
error
at
element
If
element
contributes a script-blocking style sheet
Assert
element
's
node document
's
script-blocking style sheet set
contains
element
Remove
element
from its
node
document
's
script-blocking style sheet set
Unblock rendering
on
element
The element must
delay the load event
of the element's
node document
until all the
attempts to obtain the style sheet's
critical subresources
, if any, are complete.
This specification does not specify a style system, but CSS is expected to be
supported by most web browsers.
[CSS]
The
LinkStyle
interface is also implemented by this element.
[CSSOM]
The following document has its stress emphasis styled as bright red text rather than italics
text, while leaving titles of works and Latin words in their default italics. It shows how using
appropriate elements enables easier restyling of documents.

html
lang
"en-US"
head
title
My favorite book
title
style
body
color
black
background
white
em
font-style
normal
color
red
style
head
body
My
em
favorite
em
book of all time has
em
got
em
to be
cite
A Cat's Life
cite
. It is a book by P. Rahmel that talks
about the
lang
"la"
Felis catus
in modern human society.
body
html
4.2.7
Interactions of styling and scripting
If the style sheet referenced no other resources (e.g., it was an internal style sheet given by
style
element with no
@import
rules), then the style rules
must be
immediately
made available to script; otherwise, the style rules must only be
made available to script once the
event loop
reaches its
update the
rendering
step.
An element
el
in the context of a
Document
of an
HTML parser
or
XML parser
contributes a
script-blocking style sheet
if all of the following are true:
el
was created by that
Document
's parser.
el
is either a
style
element or a
link
element that
was an
external resource link that contributes to the styling
processing model
when the
el
was created by the parser.
el
's
media
attribute's value
matches the environment
el
's style sheet was enabled when the element was created by the
parser.
The last time the
event loop
reached
step 1
el
's
root
was that
Document
The user agent hasn't given up on loading that particular style sheet yet. A user agent
may give up on loading a style sheet at any time.
Giving up on a style sheet before the style sheet loads, if the style sheet
eventually does still load, means that the script might end up operating with incorrect
information. For example, if a style sheet sets the color of an element to green, but a script
that inspects the resulting style is executed before the sheet is loaded, the script will find
that the element is black (or whatever the default color is), and might thus make poor choices
(e.g., deciding to use black as the color elsewhere on the page, instead of green). Implementers
have to balance the likelihood of a script using incorrect information with the performance impact
of doing nothing while waiting for a slow network request to finish.
It is expected that counterparts to the above rules also apply to

PIs. However, this has not yet been thoroughly
investigated.
Document
has a
script-blocking style sheet set
, which is an
ordered set
, initially empty.
Document
document
has a style sheet that is blocking
scripts
if the following steps return true:
If
document
's
script-blocking style sheet set
is not
empty
, then return true.
If
document
's
node navigable
is null, then return false.
Let
containerDocument
be
document
's
node navigable
's
container document
If
containerDocument
is non-null and
containerDocument
's
script-blocking style sheet set
is not
empty
then return true.
Return false.
Document
has no style sheet that is blocking scripts
if it does not
have a style sheet that is blocking
scripts