[go: up one dir, main page]

  1. 4 The elements of HTML
    1. 4.1 The document element
      1. 4.1.1 The html element
    2. 4.2 Document metadata
      1. 4.2.1 The head element
      2. 4.2.2 The title element
      3. 4.2.3 The base element
      4. 4.2.4 The link element
        1. 4.2.4.1 Providing users with a means to follow hyperlinks created using the link element
      5. 4.2.5 The meta element
        1. 4.2.5.1 Standard metadata names
        2. 4.2.5.2 Other metadata names
        3. 4.2.5.3 Pragma directives
        4. 4.2.5.4 Specifying the document's character encoding
      6. 4.2.6 The style element

4 The elements of HTML

4.1 The document element

4.1.1 The html element

HTML element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element.">Element/html

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.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:
A 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:
Uses HTMLHtmlElement.

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.

<!DOCTYPE html>
<html lang="en">
<head>
<title>Swapping Songs</title>
</head>
<body>
<h1>Swapping Songs</h1>
<p>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.</p>
</body>
</html>

4.2 Document metadata

4.2.1 The head element

HTML element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets.">Element/head

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
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:
A 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.
A 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:
Uses HTMLHeadElement.

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:

<!doctype html>
<html lang=en>
 <head>
  <title>A document with a short head</title>
 </head>
 <body>
 ...

Here is an example of a longer one:

<!DOCTYPE HTML>
<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

HTML element defines the document's title that is shown in a browser's title bar or a page's tab. It only contains text; tags within the element are ignored.">Element/title

Support in all current engines.

Firefox1+Safari1+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet Explorer1+
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
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:
Uses HTMLTitleElement.

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.

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>
  <p>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.

4.2.3 The base element

HTML element specifies the base URL to use for all relative URLs in a document. There can be only one element in a document.">Element/base

Support in all current engines.

Firefox1+Safari3+Chrome1+
Opera?Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android?
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
hrefDocument base URL
target — Default navigable for hyperlink navigation and form submission
Accessibility considerations:
For authors.
For implementers.
DOM interface:
Uses HTMLBaseElement.

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.

A 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.

A base element, if it has an href attribute, must come before any other elements in the tree that have attributes defined as taking URLs.

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 navigation.

A base element, if it has a target attribute, must come before any elements in the tree that represent hyperlinks.

In this example, a base element is used to set the document base URL:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>This is an example for the &lt;base&gt; element</title>
        <base href="https://www.example.com/news/index.html">
    </head>
    <body>
        <p>Visit the <a href="archives.html">archives</a>.</p>
    </body>
</html>

The link in the above example would be a link to "https://www.example.com/news/archives.html".

HTML element specifies relationships between the current document and an external resource. This element is most commonly used to link to stylesheets, but is also used to establish site icons (both "favicon" style icons and icons for the home screen and apps on mobile devices) among other things.">Element/link

Support in all current engines.

Firefox1+Safari4+Chrome1+
Opera12.1+Edge79+
Edge (Legacy)12+Internet ExplorerYes
Firefox Android?Safari iOS?Chrome Android?WebView Android?Samsung Internet?Opera Android12.1+
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
referrerpolicyReferrer 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")
asPotential 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:
Uses HTMLLinkElement.

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.

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.

A 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 a 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 a 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.

Firefox43+Safari11.1+Chrome45+
Opera?Edge79+
Edge (Legacy)17+Internet ExplorerNo
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 a element.

The type attribute gives the MIME type of the linked resource. It is purely advisory. The value must be a 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">

<!-- ... later, or perhaps inserted dynamically ... -->
<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)">

<!-- ... later, or perhaps inserted dynamically ... -->
<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. 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 the potential destination for a preload request for the resource given by the href attribute. It is an enumerated attribute. Each potential destination 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. 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 script-like destination. For other link elements, it must not be specified.

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 <color> 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

FirefoxNoSafari🔰 preview+Chrome102+
Opera?Edge102+
Edge (Legacy)?Internet ExplorerNo
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.

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:

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

HTML element represents metadata that cannot be represented by other HTML meta-related elements, like , ,