Security on the web

Security on the web
===================

Websites contain several different types of information. Some of it is non-sensitive, for example the copy shown on the public pages. Some of it is sensitive, for example customer usernames, passwords, and banking information, or internal algorithms and private product information.

Sensitive information needs to be protected, and that is the focus of web security. If that information fell into the wrong hands, it could be used to:

* Put companies at a competitive disadvantage by sharing their information with competitors.
* Disable or hijack their services, again causing serious problems with their operation.
* Put their customer's privacy at risk, making them vulnerable to profiling, targeting, loss of data, identity theft, or even financial loss.

Modern browsers already have several features to protect users' security on the web, but developers also need to employ best practices and code carefully to ensure that their websites are secure. Even simple bugs in your code can result in vulnerabilities that bad people can exploit to steal data and gain control over services for which they don't have authorization.

This article provides an introduction to web security, including information that will help you understand the aspects that can make websites vulnerable and how to secure them.

Relationship between security and privacy
-----------------------------------------

Security and privacy are distinct topics, but they are also closely-related. It is worth knowing the difference between the two and how they relate.

* **Security** is the act of keeping private data and systems protected against unauthorized access. This includes both company (internal) data and user and partner (external) data.
* **Privacy** refers to the act of giving users the right to control how their data is collected, stored, and used, and not using it irresponsibly. For example, you should clearly communicate to users of your sites the data you are collecting, with whom it will be shared, and how it will be used. Users must be given a chance to consent to your privacy policy, have access to their data you have stored, and delete their data if they no longer wish you to have it.

Good security is very essential for good privacy. You could follow all the advice listed in our Privacy on the web guide, but acting with integrity and having a robust privacy policy are futile if your site is not secure and attackers can just steal data anyway.

Security services provided by browsers
--------------------------------------

Web browsers have a strict security model that enforces a good level of fundamental content, connection, and transport security. This section looks at the basics.

### Same-origin policy and CORS

Same-origin policy is a fundamental security mechanism of the web that restricts how a document or script loaded from one origin can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.

In general, documents from one origin cannot make requests to other origins. This makes sense because you don't want sites to be able to interfere with one another and access things they shouldn't. It does make sense to relax this restriction in some circumstances; for example, you might have multiple sites that interact with each other, and you may want these sites to request resources from one another, such as using `fetch()`.

This can be permitted using Cross-Origin Resource Sharing (CORS), an HTTP-header-based mechanism that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.

### HTTP model for communication

HTTP protocol is used by web browsers and servers to communicate with one another, request resources, provide responses (for example, providing the requested resource or detailing why the request failed), and provide security features for that communication.

Transport Layer Security (TLS) provides security and privacy by encrypting data during transport over the network and is the technology behind the HTTPS protocol. TLS is good for privacy because it stops third parties from being able to intercept transmitted data and use it maliciously.

All browsers are moving towards requiring HTTPS by default; this is practically the case already because you can't do much on the web without this protocol.

Related topics:

Transport layer security (TLS)

The Transport Layer Security (TLS) protocol is the standard for enabling two networked applications or devices to exchange information privately and robustly. Applications that use TLS can choose their security parameters, which can have a substantial impact on the security and reliability of data. This article provides an overview of TLS and the kinds of decisions you need to make when securing your content.

HTTP Strict-Transport-Security

The `Strict-Transport-Security:` HTTP header lets a website specify that it may only be accessed using HTTPS.

Certificate Transparency

**Certificate Transparency** is an open framework designed to protect against and monitor for certificate misissuances. Newly issued certificates are 'logged' to publicly run, often independent CT logs which maintain an append-only, cryptographically assured record of issued TLS certificates.

Mixed content

An HTTPS page that includes content fetched using cleartext HTTP is called a **mixed content** page. Pages like this are only partially encrypted, leaving the unencrypted content accessible to sniffers and man-in-the-middle attackers.

How to fix a website with blocked mixed content

If your website delivers HTTPS pages, all active mixed content delivered via HTTP on these pages will be blocked by default. Consequently, your website may appear broken to users (if iframes or plugins don't load, etc.). Passive mixed content is displayed by default, but users can set a preference to block this type of content, as well. This page explains what you should be aware of as a web developer.

Weak signature algorithms

The strength of the hash algorithm used in signing a digital certificate is a critical element of the security of the certificate. This article provides some information about signature algorithms known to be weak, so you can avoid them when appropriate.

### Secure contexts and feature permissions

Browsers control usage of several "powerful features" in a few different ways. By "powerful features", we mean things like a site generating system notifications, using a user's web cam to get access to a media stream, manipulating the system GPU, and using web payments. If a site could just use the APIs that control such features without restriction, malicious developers could for example:

* Annoy users with unneeded notifications and other UI features.
* Clog up their browser/system to create Denial of Service (DoS) attacks.
* Steal data or money.

Such browser features are controlled as follows:

First, usage of such features is permitted only in secure contexts. A secure context is a `window` or a `worker` for which there is reasonable confidence that the content has been delivered securely (via HTTPS/TLS). In a secure context, the potential for communication with contexts that are **not** secure is limited. Secure contexts also help to prevent man-in-the-middle attackers from accessing the powerful APIs of the browser.

**Note:** See also Features restricted to secure contexts. This reference lists web platform features available only in secure contexts.

Second, the usage of these features is gated behind a system of user permissions — users have to explicitly opt-in to providing access to such features, meaning that these featured can't be used automatically. The user permission requests happen automatically, but you can query the state of an API permission by using the Permissions API.

Third, many other browser features can be used only in response to a user action such as clicking a button, meaning that they need to be invoked from inside an appropriate event handler. This is often called **transient activation**. See Features gated by user activation for more information.

Security considerations for client-side developers
--------------------------------------------------

There are many aspects of web security that need to be thought about on the server- and client-side. The sections below focus mainly on client-side security considerations. You can find a useful summary of security from a server-side perspective, which also includes descriptions of common attacks to watch out for, at Website security (part of our Server-side website programming learning module).

Store client-side data responsibly
----------------------------------

Handling data responsibly is largely concerned with cutting down on cookie usage and being careful about the data you store in them. Traditionally, web developers have used cookies to store all kinds of data, for all kinds of purposes, and it has been easy for attackers to exploit this tendency. As a result, browsers have started to limit what you can do with cross-site cookies, with the aim of removing access to them altogether in the future.

You should prepare for the removal of cross-site cookies by limiting the amount of tracking activities you rely on and/or by implementing desired information persistence in other ways.

For example:

* Use an alternative client-side storage mechanism such as the Web Storage API to persist data. Web storage does have the downside that the data is stored per-origin, so it can't be shared. Note that web storage has two variants — `sessionStorage` and `localStorage`. We would recommend using `sessionStorage` for extra security, as data only persists for the lifetime of the window or tab it exists in. `localStorage` data persists even after the window or tab is closed and reopened. This means that there is a higher chance of it falling into the wrong hands, for example on a shared workstation.
* Use a technology such as the Storage Access API to allow your sites to opt-in to using cross-site cookies in a safe and controlled way.
* Use a server-side solution for data persistence.

See our privacy guide and particularly Cut down on tracking cookies for more context around this.

Protect user identity and manage logins
---------------------------------------

When implementing a secure solution that involves data collection, particularly if the data is sensitive such as log-in credentials, it makes sense to use a reputable solution from a well-respected provider. For example, any respectable server-side framework will have built-in features to protect against common vulnerabilities. You could also consider using a specialized product for your purpose, for example an identity provider solution or a secure online survey provider.

If you want to roll your own solution for collecting user data, make sure you understand all aspects and requirements. Hire an experienced server-side developer and/or security engineer to implement the system, and ensure it is tested thoroughly. Use multi-factor authentication (MFA) to provide better protection. Consider using a dedicated API such as Web Authentication or Federated Credential Management to streamline the client-side of the app.

Here are some other tips for providing secure logins:

* When collecting user login information, enforce strong passwords so that your user's account details cannot be easily guessed. Weak passwords are one of the main causes of security breaches. In addition, encourage your users to use a password manager so that they can use more complex passwords, don't need to worry about remembering them, and won't create a security risk by writing them down. See also our article on Insecure passwords.
* You should also educate your users about **phishing**. Phishing is the act of sending a message to a user (for example, an email or an SMS) containing a link to a site that looks like a site they use every day but isn't. The link is accompanied by a message designed to trick users into entering their username and password on the site so it can be stolen and then used by an attacker for malicious purposes.

**Note:** Some phishing sites can be very sophisticated and hard to distinguish from a real website. You should therefore educate your users to not trust random links in emails and SMS messages. If they receive a message along the lines of "Urgent, you need to log in now to resolve an issue", they should go to the site directly in a new tab and try logging in directly rather than clicking the link in the message. Or they could phone or email you to discuss the message they received.
* Protect against brute force attacks on login pages with rate limiting, account lockouts after a certain number of unsuccessful attempts, and CAPTCHA challenges.
* Manage user login sessions with unique session IDs, and automatically log out users after periods of inactivity.
Don't include sensitive data in URL query strings
-------------------------------------------------

As a general rule you shouldn't include sensitive data in URL query strings: if a third party intercepts the URL (for example via the `Referer` HTTP header), they could steal that information. Even more serious is that these URLs can be indexed by public web crawlers, HTTP proxies, and archiving tools such as the internet archive, meaning that your sensitive data can persist on publicly accessible resources.

Use `POST` requests rather than `GET` requests to avoid these issues. Our article Referer header policy: Privacy and security concerns describes in more detail the privacy and security risks associated with the `Referer` header, and offers advice on mitigating those risks.

**Note:** Steering away from transmitting sensitive data in URLs via `GET` requests can also help protect against cross-site request forgery and replay attacks.

Enforce usage policies
----------------------

Consider using tools like Content Security Policy (CSP) and Permissions policy to enforce a set of feature and resource usage on your site that makes it harder to introduce vulnerabilities.

CSP allows you to add a layer of security by, for example, allowing images or scripts to be loaded only from specific trusted origins. This helps to detect and mitigate certain types of attacks, including Cross-Site Scripting (XSS) and data injection attacks. These attacks involve a range of malicious activities, including data theft, site defacement, and distribution of malware.

Permissions policy works in a similar way, except that it is more concerned with allowing or blocking access to specific "powerful features" (as mentioned earlier).

**Note:** Such policies are very useful to help keep sites secure, especially when you are using a lot of third party code on your site. However, keep in mind that if you block usage of a feature that a third-party script relies on to work, you may end up breaking your site's functionality.

Maintain data integrity
-----------------------

Following on from the previous section, when you do allow feature and resource usage on your site, you should try to ensure that resources have not been tampered with.

Related topics:

Subresource integrity

**Subresource Integrity** (SRI) is a security feature that enables browsers to verify that resources they fetch (for example, from a CDN) are delivered without unexpected manipulation. It works by allowing you to provide a cryptographic hash that a fetched resource must match.

HTTP Access-Control-Allow-Origin

The **`Access-Control-Allow-Origin`** response header indicates whether the response can be shared with requesting code from the given origin.

HTTP X-Content-Type-Options

The **`X-Content-Type-Options`** response HTTP header is a marker used by the server to indicate that the MIME types advertised in the `Content-Type` headers should not be changed and be followed. This is a way to opt out of MIME type sniffing, or, in other words, to say that the MIME types are deliberately configured.

Sanitize form input
-------------------

As a general rule, don't trust anything that users enter into forms. Filling out forms online is complicated and tedious, and it is easy for users to enter wrong data or data in the wrong format. In addition, malicious folks are well-versed in the art of entering specific strings of executable code into form fields (for example, SQL or JavaScript). If you're not careful about handling these types of inputs, it could either execute harmful code on your site or delete your databases. See SQL injection for a good example of how this could happen.

To protect against this, you should thoroughly sanitize data entered into your forms:

* You should implement client-side validation to inform users when they have entered data in the wrong format. You can do this using built-in HTML form validation features, or you can write your own validation code. See Client-side form validation for more information.
* You should use output encoding when displaying user input in an application UI to safely display data exactly as a user typed it in, to avoid it being executed as code. See Output encoding for more information.

However, you can't rely on client-side validation alone for security. It is a useful user experience enhancement for your users because it gives them instant validation feedback without having to wait for a round trip to the server. At the same time, client-side validation is too easy for a malicious party to bypass (for example, by turning off JavaScript in the browser to bypass JavaScript-based validation), so it should be combined with server-side validation.

Any reputable server-side framework will provide functionality for validating form submissions. In addition, a common best practice is to escape any special characters that form part of executable syntax, thereby making any entered code no longer executable and treated as plain text.

Protect against clickjacking
----------------------------

In clickjacking, a user is fooled into clicking on a UI element that performs an action different from what the user expects. This can be a risk inherent in embedded third-party content (make sure you trust what is being embedded into your site), and it can also be combined with phishing.

The following features can help guard against clickjacking:

HTTP X-Frame-Options

The **`X-Frame-Options`** HTTP response header can be used to indicate whether a browser should be allowed to render a page in a `<frame>`, `<iframe>`, `<embed>` or `<object>`. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.

CSP: frame-ancestors

The HTTP `Content-Security-Policy` (CSP) **`frame-ancestors`** directive specifies valid parents that may embed a page using `<frame>`, `<iframe>`, `<object>`, or `<embed>`.

See also
--------

* Privacy on the web
* Website security
* Mozilla security blog
* Mozilla observatory
* OWASP Cheat Sheet series — a series of detailed documents on different security topics, including how to protect against different types of vulnerability.
* Mozilla web security cheat sheet


HTML: HyperText Markup Language

HTML: HyperText Markup Language
===============================

**HTML** (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

HTML uses "markup" to annotate text, images, and other content for display in a Web browser. HTML markup includes special "elements" such as `<head>`, `<title>`, `<body>`, `<header>`, `<footer>`, `<article>`, `<section>`, `<p>`, `<div>`, `<span>`, `<img>`, `<aside>`, `<audio>`, `<canvas>`, `<datalist>`, `<details>`, `<embed>`, `<nav>`, `<search>`, `<output>`, `<progress>`, `<video>`, `<ul>`, `<ol>`, `<li>` and many others.

An HTML element is set off from other text in a document by "tags", which consist of the element name surrounded by "`<`" and "`>`". The name of an element inside a tag is case-insensitive. That is, it can be written in uppercase, lowercase, or a mixture. For example, the `<title>` tag can be written as `<Title>`, `<TITLE>`, or in any other way. However, the convention and recommended practice is to write tags in lowercase.

The articles below can help you learn more about HTML.

Key resources
-------------

HTML Introduction

If you're new to web development, be sure to read our HTML Basics article to learn what HTML is and how to use it.

HTML Tutorials

For articles about how to use HTML, as well as tutorials and complete examples, check out our HTML Learning Area.

HTML Reference

In our extensive HTML reference section, you'll find the details about every element and attribute in HTML.

#### Looking to become a front-end web developer?

 We have put together a course that includes all the essential information you need to
 work towards your goal.

**Get started**

Beginner's tutorials
--------------------

Our HTML Learning Area features multiple modules that teach HTML from the ground up — no previous knowledge required.

Introduction to HTML

This module sets the stage, getting you used to important concepts and syntax such as looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a web page.

Multimedia and embedding

This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.

HTML tables

Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.

HTML forms

Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side/front-end parts of forms.

Use HTML to solve common problems

Provides links to sections of content explaining how to use HTML to solve very common problems when creating a web page: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

Advanced topics
---------------

CORS enabled image

The `crossorigin` attribute, in combination with an appropriate CORS header, allows images defined by the `<img>` element to be loaded from foreign origins and used in a `<canvas>` element as if they were being loaded from the current origin.

CORS settings attributes

Some HTML elements that provide support for CORS, such as `<img>` or `<video>`, have a `crossorigin` attribute (`crossOrigin` property), which lets you configure the CORS requests for the element's fetched data.

Preloading content with rel="preload"

The `preload` value of the `<link>` element's `rel` attribute allows you to write declarative fetch requests in your HTML `<head>`, specifying resources that your pages will need very soon after loading, which you therefore want to start preloading early in the lifecycle of a page load, before the browser's main rendering machinery kicks in. This ensures that they are made available earlier and are less likely to block the page's first render, leading to performance improvements. This article provides a basic guide to how `preload` works.

Reference
---------

HTML reference

HTML consists of **elements**, each of which may be modified by some number of **attributes**. HTML documents are connected to each other with **links**.

HTML element reference

Browse a list of all HTML elements.

HTML attribute reference

Elements in HTML have **attributes**. These are additional values that configure the elements or adjust their behavior in various ways.

Global attributes

Global attributes may be specified on all HTML elements, *even those not specified in the standard*. This means that any non-standard elements must still permit these attributes, even though those elements make the document HTML5-noncompliant.

Inline-level elements and block-level elements

HTML elements are usually "inline-level" or "block-level" elements. An inline-level element occupies only the space bounded by the tags that define it. A block-level element occupies the entire space of its parent element (container), thereby creating a "block box".

Guide to media types and formats on the web

The `<audio>` and `<video>` elements allow you to play audio and video media natively within your content without the need for external software support.

HTML content categories

HTML is comprised of several kinds of content, each of which is allowed to be used in certain contexts and is disallowed in others. Similarly, each context has a set of other content categories it can contain and elements that can or can't be used in them. This is a guide to these categories.

Quirks mode and standards mode

Historical information on quirks mode and standards mode.

Related topics
--------------

Applying color to HTML elements using CSS

This article covers most of the ways you use CSS to add color to HTML content, listing what parts of HTML documents can be colored and what CSS properties to use when doing so. Includes examples, links to palette-building tools, and more.


Text fragments

Text fragments
==============

**Text fragments** allow linking directly to a specific portion of text in a web document, without requiring the author to annotate it with an ID, using particular syntax in the URL fragment. Supporting browsers are free to choose how to draw attention to the linked text, e.g. with a color highlight and/or scrolling to the content on the page. This is useful because it allows web content authors to deep-link to other content they don't control, without relying on the presence of IDs to make that possible. Building on top of that, it could be used to generate more effective content-sharing links for users to pass to one another.

Concepts and usage
------------------

Historically, one of the web's key features has always been its ability to provide links between different documents — it is what makes *the web*, a web:

* You can link to the top of a document by linking to its URL, for example:
    + https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a.
* You can link to a specific section of a document by linking to its URL plus the *document fragment* (ID) of that section, for example:
    + https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#browser\_compatibility.

The issue with linking to specific document fragments is that the author of the linked page needs to put an anchor in place to *actually* link to. The second example above links to an h2 element with an ID of `browser_compatibility`:

```html
<h2 id="browser\_compatibility">
  <a href="#browser\_compatibility">Browser compatibility</a>
</h2>
```

If the ID is changed or removed, the document fragment is ignored, and the link just links through to the top of the page. This is reasonable in terms of graceful degradation, but it would arguably be better if the author of the link had full control over where they link to, without needing to rely on the page author.

**Text fragments** make this a reality — they allow link authors to specify text content to link to, rather than document fragments, in a flexible manner.

Syntax
------

In a similar manner to document fragments, text fragments are appended onto a URL after a hash symbol (`#`). The syntax however is a bit different:

```url
https://example.com#:~:text=[prefix-,]textStart[,textEnd][,-suffix]
```

The key parts to understand are as follows:

`:~:`

Otherwise known as *the fragment directive*, this sequence of characters tells the browser that what comes next is one or more user-agent instructions, which are stripped from the URL during loading so that author scripts cannot directly interact with them. User-agent instructions are also called directives.

`text=`

A text directive. This provides a text fragment to the browser, defining what text is to be linked to in the linked document.

`textStart`

A text string specifying the start of the linked text.

`textEnd` Optional

A text string specifying the end of the linked text.

`prefix-` Optional

A text string followed by a hyphen specifying what text should precede the linked text. This helps the browser to select the correct linked text, in cases where there are multiple matches.

`-suffix` Optional

A hyphen followed by a text string specifying what text should follow the linked text. This helps the browser to select the correct linked text, in cases where there are multiple matches.

Supporting browsers will scroll to and highlight the first text fragment in the linked document that matches the specified directive. Note that it is possible to specify multiple text fragments to highlight in the same URL by separating them with ampersand (`&`) characters.

### Usage notes

* Text strings used for the `textStart`, `textEnd`, `prefix-`, and `-suffix` values need to be percent-encoded.
* Matches are case-insensitive.
* Individual `textStart`, `textEnd`, `prefix-`, and `-suffix` strings need to reside wholly inside the same block-level element, but complete matches can span across multiple element boundaries.
* For security reasons, the feature requires links to be opened in a noopener context — you need to add `rel="noopener"` to your `<a>` elements, and add `noopener` to your `window.open()` calls when using this feature.
* Text fragments are invoked only on full (non-same-page), user-initiated navigations.
* Text fragments are only applied to the main frame; text will not be searched inside `<iframe>`s, and `iframe` navigation will not invoke a text fragment.
* For sites that wish to opt-out, Chromium-based browsers support a Document Policy header value that they can send so user agents will not process Text Fragments:

```http
Document-Policy: force-load-at-top
```

**Note:** If the provided text fragment does not match any text in the linked document, or if the browser does not support text fragments, the whole text fragment is ignored and the top of the document is linked.

Examples
--------

### Simple text fragment with textStart

* https://example.com#:~:text=for scrolls to and highlights the first instance of the text `for` in the document.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=human scrolls to and highlights the first instance of the text `human` in the document.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL scrolls to and highlights the first instance of the text `linked URL` in the document.
### textStart and textEnd

* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=human,URL scrolls to and highlights the first instance of a text string starting with `human` and ending with `URL`.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL,defining%20a%20value scrolls to and highlights the first instance of a text string starting with `linked URL` and ending with `defining a value`. Note how the highlighted text spans across multiple block-level elements.
### Examples with prefix- and/or -suffix

* https://example.com#:~:text=asking-,for scrolls to and highlights the second instance of the text `for` in the document.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=sent-,referrer scrolls to and highlights the first instance of the text `referrer` that has the text `sent` directly before it. This is the 5th instance of `referrer` in the document; without the prefix, the first instance would be highlighted.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL,-'s%20format scrolls to and highlights the first instance of the text `linked URL` that has the text `'s format` directly following it. This is the 5th instance of `linked URL` in the document; without the suffix, the first instance would be highlighted.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=downgrade:-,The%20Referer,be%20sent,-to%20origins scrolls to and highlights the instance of the text `The Referer ... be sent` that is prefixed by `downgrade:` and suffixed by `to origins`. This illustrates a more complex example where the prefix/suffix are used to home in on the specific text instance you want to link to. Try removing the prefix, for example, and seeing what is matched.
### URLs with multiple text fragments

You can specify multiple text fragments to highlight in the same URL by separating them with ampersand (`&`) characters. Let's look at a couple of examples:

* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=Causes&text=linked scrolls to and highlights the first instances of the text strings `Causes` and `linked`.
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#:~:text=linked%20URL,-'s%20format&text=Deprecated-,attributes,attribute scrolls to and highlights two text instances:
    + The first instance of the text `linked URL` that has the text `'s format` directly following it.
    + The first instance of a text string starting with `attributes` and ending with `attribute`, which is prefixed by `Deprecated`.

If you don't see one or more of your text fragments highlighted and you are sure you've got the syntax correct, you might just be highlighting a different instance than the one you expected. It might be highlighted, but offscreen.

### Styling matched text fragments

Browsers are free to style the highlighted text in whatever default way they choose. The CSS Pseudo-Elements Module Level 4 defines a pseudo-element, `::target-text`, which allows you to specifying custom styling.

For example, in our scroll-to-text demo we have the following CSS:

```css
::target-text {
  background-color: rebeccapurple;
  color: white;
}
```

Try following the above link in a supporting browser to see the effect this has.

### Feature Detectability

The `FragmentDirective` object, which is accessed via the `Document.fragmentDirective` property, can be used to test whether or not text fragments are supported in a browser.

Try running the following in a supporting browser's devtools, in a tab with one or more matched text fragments:

```js
document.fragmentDirective;
// returns an empty FragmentDirective object, if supported
// undefined otherwise
```

This functionality is mainly intended for feature detection at present. In the future, the `FragmentDirective` object could include additional information.

Reference
---------

### API

`FragmentDirective`

An object representing the text fragments. Currently empty and mainly intended for feature detection.

`Document.fragmentDirective`

Returns the `FragmentDirective` for the current document.

### CSS

`::target-text`

Represents the highlighted text fragments in the current document. It allows authors to customize the styling of text fragments.

Specifications
--------------

| Specification |
| --- |
| URL Fragment Text Directives # fragmentdirective |
| CSS Pseudo-Elements Module Level 4 # selectordef-target-text |

Browser compatibility
---------------------

### html.elements.a.text\_fragments

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### api.FragmentDirective

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

### css.selectors.target-text

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Boldly link where no one has linked before: Text Fragments


XPath

XPath
=====

XPath stands for XML Path Language. It uses a non-XML syntax to provide a flexible way of addressing (pointing to) different parts of an XML document. It can also be used to test addressed nodes within a document to determine whether they match a pattern or not.

XPath is mainly used in XSLT, but can also be used as a much more powerful way of navigating through the DOM of any XML-like language document using `XPathExpression`, such as HTML and SVG, instead of relying on the `Document.getElementById()` or `Document.querySelectorAll()` methods, the `Node.childNodes` properties, and other DOM Core features.

XPath uses a path notation (as in URLs) for navigating through the hierarchical structure of an XML document. It uses a non-XML syntax so that it can be used in URIs and XML attribute values.

**Note:** Support for XPath varies widely; it's supported reasonably well in Firefox (although there are no plans to improve support further), while other browsers implement it to a lesser extent, if at all. If you need a polyfill, you may consider js-xpath or wicked-good-xpath.

Documentation
-------------

Introduction to using XPath in JavaScript

Describes a non-XSLT use of XPath.

XPath:Axes

List and definition of the axes defined in the XPath specification. Axes are used to describe the relationships between nodes.

XPath:Functions

List and description of the core XPath functions and XSLT-specific additions to XPath.

Transforming XML with XSLT

XSLT uses XPath to address code segments in an XML document that it wishes to transform.

XPath snippets

These are JavaScript utility functions, that can be used in your own code, based on DOM Level 3 XPath APIs.

What is XSLT?

This extensive introduction to XSLT and XPath assumes no prior knowledge of the technologies, and guides the reader through background, context, structure, concepts, and introductory terminology.

Tools
-----

XPath tester

An online XPath Builder/Debugger.

Related Topics
--------------

* XSLT, XML, DOM
* Comparison of CSS Selectors and XPath


Web app manifests

Web app manifests
=================

A **web application manifest**, defined in the Web Application Manifest specification, is a JSON text file that provides information about a web application.

The most common use for a web application manifest is to provide information that the browser needs to install a progressive web app (PWA) on a device, such as the app's name and icon.

A web application manifest contains a single JSON object where the top-level keys are called *members*.

Members
-------

This section lists the members that may appear in the manifest.

All members are optional in the specification, but some applications require some members to be present. For example, PWAs must provide certain manifest members.

* background\_color
* categories
* description
* display
* display\_override
* file\_handlers
* icons
* id
* launch\_handler
* name
* orientation
* prefer\_related\_applications
* protocol\_handlers
* related\_applications
* scope
* screenshots
* serviceworker
* share\_target
* short\_name
* shortcuts
* start\_url
* theme\_color
Example manifest
----------------

```json
{
  "name": "HackerWeb",
  "short\_name": "HackerWeb",
  "start\_url": ".",
  "display": "standalone",
  "background\_color": "#fff",
  "description": "A readable Hacker News app.",
  "icons": [
    {
      "src": "images/touch/homescreen48.png",
      "sizes": "48x48",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen72.png",
      "sizes": "72x72",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen96.png",
      "sizes": "96x96",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen144.png",
      "sizes": "144x144",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen168.png",
      "sizes": "168x168",
      "type": "image/png"
    },
    {
      "src": "images/touch/homescreen192.png",
      "sizes": "192x192",
      "type": "image/png"
    }
  ],
  "related\_applications": [
    {
      "platform": "play",
      "url": "https://play.google.com/store/apps/details?id=cheeaun.hackerweb"
    }
  ]
}
```

Deploying a manifest
--------------------

Web app manifests are deployed in your HTML pages using a `<link>` element in the `<head>` of a document:

```html
<link rel="manifest" href="manifest.json" />
```

The `.webmanifest` extension is specified in the Media type registration section of the specification (the response of the manifest file should return `Content-Type: application/manifest+json`). Browsers generally support manifests with other appropriate extensions like `.json` (`Content-Type: application/json`).

If the manifest requires credentials to fetch, the `crossorigin` attribute must be set to `use-credentials`, even if the manifest file is in the same origin as the current page.

```html
<link rel="manifest" href="/app.webmanifest" crossorigin="use-credentials" />
```

Splash screens
--------------

In some browsers and operating systems, a splash screen is displayed when an installed PWA is launched. This splash screen is automatically generated and its appearance is defined by members in the web app manifest, specifically:

* `name`
* `background_color`
* `icons`
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Progressive Web Apps (PWAs)


MathML

MathML
======

**Mathematical Markup Language (MathML)** is an XML-based language for describing mathematical notation.

MathML was originally designed as a general-purpose specification for browsers, office suites, computer algebra systems, EPUB readers, LaTeX-based generators. However, this approach was not very adapted to the Web: the subset focusing on semantics has never been implemented in browsers while the subset focusing on math layout led to incomplete and inconsistent browser implementations.

MathML Core is a subset with increased implementation details based on rules from LaTeX and the Open Font Format. It is tailored for browsers and designed specifically to work well with other web standards including HTML, CSS, DOM, JavaScript.

Below you will find links to documentation, examples, and tools to work with MathML. MDN uses MathML Core as a reference specification but, due to an erratic standardization history, legacy MathML features may still show up in existing implementations and web content.

**Note:** It is highly recommended that developers and authors switch to MathML Core, perhaps relying on other web technologies to cover missing use cases. The Math WG is maintaining a set of MathML polyfills to facilitate that transition.

MathML reference
----------------

MathML element reference

Details about each MathML element and compatibility information for desktop and mobile browsers.

MathML attribute reference

Information about MathML attributes that modify the appearance or behavior of elements.

MathML examples

MathML samples and examples to help you understand how it works.

Authoring MathML

Suggestions and tips for writing MathML, including suggested MathML editors and how to integrate their output into Web content.

MathML tutorial

A gentle introduction to MathML.

Getting help from the community
-------------------------------

* W3C Math Home
* Raise issues on GitHub w3c/mathml repository
* www-math w3.org mail archive
Tools
-----

* W3C Validator
* W3C's wiki page
Related topics
--------------

* CSS
* HTML
* SVG
Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSS: Cascading Style Sheets

CSS: Cascading Style Sheets
===========================

**Cascading Style Sheets** (**CSS**) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen, on paper, in speech, or on other media.

CSS is among the core languages of the **open web** and is standardized across Web browsers according to W3C specifications. Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now CSS without a version number.

After CSS 2.1, the scope of the specification increased significantly and the progress on different CSS modules started to differ so much, that it became more effective to develop and release recommendations separately per module. Instead of versioning the CSS specification, W3C now periodically takes a snapshot of the latest stable state of the CSS specification and individual modules progress. CSS modules now have version numbers, or levels, such as CSS Color Module Level 5.

Key resources
-------------

CSS Introduction

If you're new to web development, be sure to read our CSS basics article to learn what CSS is and how to use it.

CSS Tutorials

Our CSS learning area contains a wealth of tutorials to take you from beginner level to proficiency, covering all the fundamentals.

CSS Reference

Our exhaustive CSS reference for seasoned Web developers describes every property and concept of CSS.

#### Looking to become a front-end web developer?

 We have put together a course that includes all the essential information you need to
 work towards your goal.

**Get started**

Tutorials
---------

Our CSS Learning Area features multiple modules that teach CSS from the ground up — no previous knowledge required.

CSS first steps

CSS (Cascading Style Sheets) is used to style and layout web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

CSS building blocks

This module carries on where CSS first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, it's time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.

The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout.

CSS styling text

With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows, and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

CSS layout

At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and to each other. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.

Use CSS to solve common problems

This module provides links to sections of content explaining how to use CSS to solve common problems when creating a web page.

Reference
---------

* CSS reference: This exhaustive reference for seasoned Web developers describes every property and concept of CSS.
* CSS key concepts:
    + The syntax and forms of the language
    + Specificity, inheritance, and the Cascade
    + CSS units and values and functional notations
    + Box model and margin collapse
    + The containing block
    + Stacking and block-formatting contexts
    + Initial, computed, used, and actual values
    + CSS shorthand properties
    + CSS Flexible Box Layout
    + CSS Grid Layout
    + CSS selectors
    + Media queries
    + Animation
Cookbook
--------

The CSS layout cookbook aims to bring together recipes for common layout patterns, things you might need to implement in your sites. In addition to providing code you can use as a starting point in your projects, these recipes highlight the different ways layout specifications can be used and the choices you can make as a developer.

Tools for CSS development
-------------------------

* You can use the W3C CSS Validation Service to check if your CSS is valid. This is an invaluable debugging tool.
* Firefox Developer Tools lets you view and edit a page's live CSS via the Inspector and Style Editor tools.
* The Web Developer extension for Firefox lets you track and edit live CSS on watched sites.
Meta bugs
---------

* Firefox: Firefox bug 1323667
See also
--------

* CSS demos: Get a creative boost by exploring examples of the latest CSS technologies in action.
* Web languages to which CSS is often applied: HTML, SVG, MathML, XHTML, and XML.
* Stack Overflow questions about CSS


HTTP

HTTP
====

***Hypertext Transfer Protocol (HTTP)*** is an application-layer protocol for transmitting hypermedia documents, such as HTML. It was designed for communication between web browsers and web servers, but it can also be used for other purposes. HTTP follows a classical client-server model, with a client opening a connection to make a request, then waiting until it receives a response. HTTP is a stateless protocol, meaning that the server does not keep any data (state) between two requests.

Tutorials
---------

Learn how to use HTTP with guides and tutorials.

Overview of HTTP

The basic features of the client-server protocol: what it can do and its intended uses.

HTTP Cache

Caching is very important for fast websites. This article describes different methods of caching and how to use HTTP Headers to control them.

HTTP Cookies

How cookies work is defined by RFC 6265. When serving an HTTP request, a server can send a `Set-Cookie` HTTP header with the response. The client then returns the cookie's value with every request to the same server in the form of a `Cookie` request header. The cookie can also be set to expire on a certain date, or restricted to a specific domain and path.

Cross-Origin Resource Sharing (CORS)

**Cross-site HTTP requests** are HTTP requests for resources from a **different domain** than the domain of the resource making the request. For instance, an HTML page from Domain A (`http://domaina.example/`) makes a request for an image on Domain B (`http://domainb.foo/image.jpg`) via the `img` element. Web pages today very commonly load cross-site resources, including CSS stylesheets, images, scripts, and other resources. CORS allows web developers to control how their site reacts to cross-site requests.

HTTP Client Hints

**Client Hints** are a set of response headers that a server can use to proactively request information from a client about the device, network, user, and user-agent-specific preferences.
 The server can then determine which resources to send, based on the information that the client chooses to provide.

Evolution of HTTP

A brief description of the changes between the early versions of HTTP, to the modern HTTP/2, the emergent HTTP/3 and beyond.

Mozilla web security guidelines

A collection of tips to help operational teams with creating secure web applications.

HTTP Messages

Describes the type and structure of the different kind of messages of HTTP/1.x and HTTP/2.

A typical HTTP session

Shows and explains the flow of a usual HTTP session.

Connection management in HTTP/1.x

Describes the three connection management models available in HTTP/1.x, their strengths, and their weaknesses.

Reference
---------

Browse through detailed HTTP reference documentation.

HTTP Headers

HTTP message headers are used to describe a resource, or the behavior of the server or the client. Header fields are kept in an IANA registry. IANA also maintains a registry of proposed new HTTP message headers.

HTTP Request Methods

The different operations that can be done with HTTP: `GET`, `POST`, and also less common requests like `OPTIONS`, `DELETE`, or `TRACE`.

HTTP Status Response Codes

HTTP response codes indicate whether a specific HTTP request has been successfully completed. Responses are grouped in five classes: informational responses, successful responses, redirections, client errors, and servers errors.

CSP directives

The `Content-Security-Policy` response header fields allows website administrators to control resources the user agent is allowed to load for a given page. With a few exceptions, policies mostly involve specifying server origins and script endpoints.

Tools & resources
-----------------

Helpful tools and resources for understanding and debugging HTTP.

Firefox Developer Tools

Network monitor

Mozilla Observatory

A project designed to help developers, system administrators, and security professionals configure their sites safely and securely.

RedBot

Tools to check your cache-related headers.

How Browsers Work (2011)

A very comprehensive article on browser internals and request flow through HTTP protocol.


Developer guides

Developer guides
================

There are a number of guides within MDN docs. These articles aim to add additional usage examples, or teach you how to use an API or feature. This page links to some of the most popular material.

HTML
----

Structuring the web with HTML

The HTML learning area offers tutorials to help you learn HTML from the ground up.

HTML basics

This article will give you a basic understanding of HTML. After following this guide, you can further explore the material in the HTML Learning Area.

CSS
---

Learn to style HTML using CSS

Our complete CSS tutorial, taking you from first steps through styling text, creating layouts, and more.

CSS Layout Guides

There are a large number of guides to CSS Layout across MDN, this page collects them all together.

Using CSS animations

CSS animations make it possible to animate transitions from one CSS style configuration to another. This guide will help you get started with the animation properties.

JavaScript
----------

JavaScript learning area

Whether you are a complete beginner, or hoping to refresh your skills, this is the place to start.

Media
-----

Audio and video delivery

We can deliver audio and video on the web in several ways, ranging from 'static' media files to adaptive live streams. This article is intended as a starting point for exploring the various delivery mechanisms of web-based media and compatibility with popular browsers.

Audio and video manipulation

The beauty of the web is that you can combine technologies to create new forms. Having native audio and video in the browser means we can use these data streams with technologies such as `<canvas>`, WebGL or Web Audio API to modify audio and video directly, for example adding reverb/compression effects to audio, or grayscale/sepia filters to video. This article provides a reference to explain what you need to do.

APIs
----

Using FormData objects

The `FormData` object lets you compile a set of key/value pairs to send using `fetch()`. It's primarily intended for sending form data, but can be used independently of forms to transmit keyed data. The transmission is in the same format that the form's `submit()` method would use to send the data if the form's encoding type were set to "multipart/form-data".

Progressive web apps

Progressive web apps (PWAs) use modern web APIs along with traditional progressive enhancement strategy to create cross-platform web applications. These apps work everywhere and provide several features that give them the same user experience advantages as native apps. This set of guides tells you all you need to know about PWAs.

Parsing and serializing XML

The web platform provides different methods of parsing and serializing XML, each with its pros and cons.

Performance
-----------

Optimization and performance

When building modern web apps and sites, it's important to make your content work quickly and efficiently. This lets it perform effectively for both powerful desktop systems and weaker handheld devices.

Mobile web development
----------------------

Mobile web development

This article provides an overview of some main techniques needed to design websites that work well on mobile devices.

Fonts
-----

Variable fonts guide

Find out how to use variable fonts in your designs.

The Web Open Font Format (WOFF)

WOFF (Web Open Font Format) is a font file format that is free for anyone to use on the web.

User interface development
--------------------------

User input methods and controls

User input goes beyond just a mouse and keyboard: think of touchscreens for example. This article provides recommendations for managing user input and implementing controls in open web apps, along with FAQs, real-world examples, and links to further information for anyone needing more detailed information on the underlying technologies.


Progressive web apps

Progressive web apps
====================

A **progressive web app** (PWA) is an app that's built using web platform technologies, but that provides a user experience like that of a platform-specific app.

Like a website, a PWA can run on multiple platforms and devices from a single codebase. Like a platform-specific app, it can be installed on the device, can operate while offline and in the background, and can integrate with the device and with other installed apps.

Guides
------

These guides give conceptual explanations of different aspects of PWAs. They're intended to help you understand what kinds of things are possible with PWAs, and to provide enough pointers to help you understand how to achieve them.

What is a progressive web app?

An introduction to PWAs, comparing them with traditional websites and with platform-specific apps, and outlining their main features.

Making PWAs installable

One of the defining aspects of a PWA is that it can be installed on the device, and then appears to users as a platform-specific app, a permanent feature of their device which they can launch directly from the operating system like any other app. In this guide we'll explore what "installable" means, what a PWA needs to provide for it to be installable, and how you can customize the install experience.

Installing and uninstalling web apps

This guide covers how users can install and uninstall PWAs on their devices.

Offline and background operation

In this guide, we'll introduce a set of technologies that enable a PWA to provide a good user experience even when the device has intermittent network connectivity and to perform operations in the background, even when the main app is not running.

Caching

An overview of the APIs that enable a PWA to cache resources locally, and some common strategies used by PWAs to implement offline functionality.

Best practices for PWAs

PWAs should adapt to different browsers and devices, be accessible, have good performance, and integrate well with the operating system. This guide provides a list of best practices to help you make sure your PWA is as good as it can be.

How to
------

These guides give concrete detailed instructions for how to implement specific PWA features.

Create a standalone app

Describes how to specify that a PWA should be launched in its own dedicated window when it is launched, rather than a browser tab.

Define your app icons

Describes how to define your own set of icons to be used when the PWA is installed on a device.

Customize your app's colors

Describes how to set background and theme colors for a PWA.

Display badges

Describes how to display a badge on the PWA's icon: for example to let the user know that they have received new messages.

Expose common app actions as shortcuts

Describes how to expose common actions for a PWA that can be launched from the operating system's app shortcut menu.

Share data between apps

Describes how PWAs can share data with each other by using the operating system's app sharing mechanism.

Trigger installation from your PWA

Describes how developers can provide their own UI to invite users to install their PWA.

Associate files with your PWA

Describes how you can create an association between file types and your PWA, so that when the user clicks on the file, your PWA is launched to handle it.

Tutorials
---------

In these tutorials, you'll build a PWA from scratch. Tutorials walk through the steps of creating an app, from start to finish, explaining how the different features of the app are implemented.

Creating your first PWA

This novice-level tutorial walks through the creation of a PWA to track menstrual cycles. Lessons include a walk through of the HTML, CSS, and JavaScript required to create a fully functional web app, setting up a testing environment, and complete explanations guiding the learner through upgrading the web app into a PWA; including developing and inspecting a manifest, adding a service worker, and using the service worker to delete stale caches.

Deep dive into PWA

This intermediate-level tutorial walks through the creation of a PWA that lists information about games submitted to the A-Frame category in the js13kGames 2017 competition. This tutorial includes all the basics for creating a PWA, with additional features, including notifications, push, and app performance.

Reference
---------

Reference documentation for the web technologies you will use to build a PWA.

### Web app manifest

Web app manifest members

Developers can use web app manifest members to describe a PWA, customize its appearance, and more deeply integrate it into the operating system.

### Service Worker APIs

#### Communication with the app

The following APIs can be used by a service worker to communicate with its associated client PWA:

`Client.postMessage()`

Allows a service worker to send a message to its client PWA.

Broadcast Channel API

Allows a service worker and its client PWA to establish a basic two-way communication channel.

#### Offline operation

The following APIs can be used by a service worker to make your app work offline:

`Cache`

A persistent storage mechanism for HTTP responses used to store assets that can be reused when the app is offline.

`Clients`

An interface used to provide access to the documents that are controlled by the service worker.

`FetchEvent`

An event, dispatched in the service worker with every HTTP request made by the client PWA. The event can be used to either send the request to the server as normal and save the response for future use, or intercept the request and immediately respond with a response cached previously.

#### Background operation

The following APIs can be used by a service worker to perform tasks in the background, even when your app is not running:

Background Synchronization API

A way to defer tasks to run in a service worker once there is a stable network connection.

Web Periodic Background Synchronization API

A way to register tasks to be run in a service worker at periodic intervals with network connectivity.

Background Fetch API

A method for a service worker to manage downloads that may take a significant amount of time, such as video or audio files.

### Other web APIs

IndexedDB

A client-side storage API for significant amounts of structured data, including files.

Badging API

A method of setting a badge on the application icon, providing a low-distraction notification.

Notifications API

A way to send notifications that are displayed at the operating system level.

Web Share API

A mechanism for sharing text, links, files, and other content to other apps selected by the user on their device.

Window Controls Overlay API

An API for PWAs installed on desktop operating systems that enables hiding the default window title bar, enabling displaying the app over the full surface area of the app window.

See also
--------

* Progressive web apps on web.dev
* Learn PWA on web.dev
* Progressive web apps on learn.microsoft.com (2023)


Accessibility

Accessibility
=============

**Accessibility** (often abbreviated to **A11y** — as in, "a", then 11 characters, and then "y") in web development means enabling as many people as possible to use websites, even when those people's abilities are limited in some way.

For many people, technology makes things easier. For people with disabilities, technology makes things possible. Accessibility means developing content to be as accessible as possible, no matter an individual's physical and cognitive abilities and how they access the web.

"**The Web is fundamentally designed to work for all people**, whatever their hardware, software, language, location, or ability. When the Web meets this goal, it is accessible to people with a diverse range of hearing, movement, sight, and cognitive ability." (W3C - Accessibility)

Key tutorials
-------------

The MDN Accessibility Learning Area contains modern, up-to-date tutorials covering the following accessibility essentials:

What is accessibility?

This article starts off the module with a good look at what accessibility actually is — this includes what groups of people we need to consider and why, what tools different people use to interact with the Web, and how we can make accessibility part of our web development workflow.

HTML: A good basis for accessibility

A great deal of web content can be made accessible just by making sure that the correct HTML elements are used for the correct purpose at all times. This article looks in detail at how HTML can be used to ensure maximum accessibility.

CSS and JavaScript accessibility best practices

CSS and JavaScript, when used properly, also have the potential to allow for accessible web experiences. They can significantly harm accessibility if misused. This article outlines some CSS and JavaScript best practices that should be considered to ensure that even complex content is as accessible as possible.

WAI-ARIA basics

Following on from the previous article, sometimes making complex UI controls that involve unsemantic HTML and dynamic JavaScript-updated content can be difficult. WAI-ARIA is a technology that can help with such problems by adding in further semantics that browsers and assistive technologies can recognize and let users know what is going on. Here we'll show how to use it at a basic level to improve accessibility.

Accessible multimedia

Another category of content that can create accessibility problems is multimedia — video, audio, and image content need to be given proper textual alternatives so that they can be understood by assistive technologies and their users. This article shows how.

Mobile accessibility

With web access on mobile devices being so popular and popular platforms such as iOS and Android having fully-fledged accessibility tools, it is important to consider the accessibility of your web content on these platforms. This article looks at mobile-specific accessibility considerations.

Other documentation
-------------------

Understanding the Web Content Accessibility Guidelines

This set of articles provides quick explanations to help you understand the steps that need to be taken to conform to the recommendations outlined in the W3C Web Content Accessibility Guidelines 2.0 (WCAG 2.0 or just WCAG, for the purposes of this writing).

Introduction to color and accessibility

This article discusses our perception of light and color, provides a foundation for the use of color in accessible designs, and demonstrates best practices for visual and readable content.

Keyboard-navigable JavaScript widgets

Until now, web developers who wanted to make their styled `<div>` and `<span>` based widgets accessible have lacked proper techniques. **Keyboard accessibility** is part of the minimum accessibility requirements, which a developer should be aware of.

ARIA

This is a collection of articles to learn how to use Accessible Rich Internet Applications (ARIA) to make your HTML documents more accessible.

Mobile accessibility checklist

This article provides a concise checklist of accessibility requirements for mobile app developers.

Cognitive accessibility

This article explains how to ensure that the web content you're creating is accessible to people with cognitive impairments.

Accessibility for seizure disorders

Some types of visual web content can induce seizures in people with certain brain disorders. This article helps you understand the types of content that can be problematic and find tools and strategies to help you avoid them.

See also
--------

* WAI Interest Group
* Developer guides


JavaScript

JavaScript
==========

**JavaScript** (**JS**) is a lightweight interpreted (or just-in-time compiled) programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat. JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

JavaScript's dynamic capabilities include runtime object construction, variable parameter lists, function variables, dynamic script creation (via `eval`), object introspection (via `for...in` and `Object` utilities), and source-code recovery (JavaScript functions store their source text and can be retrieved through `toString()`).

This section is dedicated to the JavaScript language itself, and not the parts that are specific to Web pages or other host environments. For information about APIs that are specific to Web pages, please see Web APIs and DOM.

The standards for JavaScript are the ECMAScript Language Specification (ECMA-262) and the ECMAScript Internationalization API specification (ECMA-402). As soon as one browser implements a feature, we try to document it. This means that cases where some proposals for new ECMAScript features have already been implemented in browsers, documentation and examples in MDN articles may use some of those new features. Most of the time, this happens between the stages 3 and 4, and is usually before the spec is officially published.

Do not confuse JavaScript with the Java programming language — **JavaScript is *not* "Interpreted Java"**. Both "Java" and "JavaScript" are trademarks or registered trademarks of Oracle in the U.S. and other countries. However, the two programming languages have very different syntax, semantics, and use.

JavaScript documentation of core language features (pure ECMAScript, for the most part) includes the following:

* The JavaScript guide
* The JavaScript reference

For more information about JavaScript specifications and related technologies, see JavaScript technologies overview.

**Looking to become a front-end web developer?**

 We have put together a course that includes all the essential information you need to
 work towards your goal.

**Get started**

Tutorials
---------

Learn how to program in JavaScript with guides and tutorials.

### For complete beginners

Head over to our Learning Area JavaScript topic if you want to learn JavaScript but have no previous experience with JavaScript or programming. The complete modules available there are as follows:

JavaScript first steps

Answers some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", along with discussing key JavaScript features such as variables, strings, numbers, and arrays.

JavaScript building blocks

Continues our coverage of JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events.

Introducing JavaScript objects

The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you.

Asynchronous JavaScript

Discusses asynchronous JavaScript, why it is important, and how it can be used to effectively handle potential blocking operations such as fetching resources from a server.

Client-side web APIs

Explores what APIs are, and how to use some of the most common APIs you'll come across often in your development work.

### JavaScript guide

JavaScript Guide

A much more detailed guide to the JavaScript language, aimed at those with previous programming experience either in JavaScript or another language.

### Intermediate

Understanding client-side JavaScript frameworks

JavaScript frameworks are an essential part of modern front-end web development, providing developers with proven tools for building scalable, interactive web applications. This module gives you some fundamental background knowledge about how client-side frameworks work and how they fit into your toolset, before moving on to a series of tutorials covering some of today's most popular ones.

JavaScript language overview

An overview of the basic syntax and semantics of JavaScript for those coming from other programming languages to get up to speed.

JavaScript data structures

Overview of available data structures in JavaScript.

Equality comparisons and sameness

JavaScript provides three different value comparison operations: strict equality using `===`, loose equality using `==`, and the `Object.is()` method.

Enumerability and ownership of properties

How different methods that visit a group of object properties one-by-one handle the enumerability and ownership of properties.

Closures

A closure is the combination of a function and the lexical environment within which that function was declared.

### Advanced

Inheritance and the prototype chain

Explanation of the widely misunderstood and underestimated prototype-based inheritance.

Memory Management

Memory life cycle and garbage collection in JavaScript.

The event loop

JavaScript has a runtime model based on an "event loop".

Reference
---------

Browse the complete JavaScript reference documentation.

Standard objects

Get to know standard built-in objects `Array`, `Boolean`, `Date`, `Error`, `Function`, `JSON`, `Math`, `Number`, `Object`, `RegExp`, `String`, `Map`, `Set`, `WeakMap`, `WeakSet`, and others.

Expressions and operators

Learn more about the behavior of JavaScript's operators `instanceof`, `typeof`, `new`, `this`, the operator precedence, and more.

Statements and declarations

Learn how `do-while`, `for-in`, `for-of`, `try-catch`, `let`, `var`, `const`, `if-else`, `switch`, and more JavaScript statements and keywords work.

Functions

Learn how to work with JavaScript's functions to develop your applications.

Classes

JavaScript classes are the most appropriate way to do object-oriented programming.


Tutorials

Tutorials
=========

The links on this page lead to a variety of tutorials and training materials. Whether you are just starting, learning the basics, or are an old hand at web development, you can find helpful resources here for best practices.

These resources are created by forward-thinking companies and web developers who have embraced open standards and best practices for web development and that provide or allow translations, through an open content license such as Creative Commons.

For complete beginners to the Web
---------------------------------

Getting started with the Web

*Getting started with the Web* is a concise series introducing you to the practicalities of web development. You'll set up the tools you need to construct a simple webpage and publish your own simple code.

HTML Tutorials
--------------

### Introductory level

Introduction to HTML

This module sets the stage, getting you used to important concepts and syntax, looking at applying HTML to text, how to create hyperlinks, and how to use HTML to structure a webpage.

MDN HTML element reference

A comprehensive reference for HTML elements, and how the different browsers support them.

Creating a Simple Web Page with HTML

An HTML guide for beginners that includes explanations of common tags, including HTML tags. Also includes a step-by-step guide to creating a basic web page with code examples.

HTML Challenges

Use these challenges to hone your HTML skills (for example, "Should I use an <h2> element or a <strong> element?"), focusing on meaningful markup.

### Intermediate level

Multimedia and embedding

This module explores how to use HTML to include multimedia in your web pages, including the different ways that images can be included, and how to embed video, audio, and even entire other webpages.

HTML tables

Representing tabular data on a webpage in an understandable, accessible way can be a challenge. This module covers basic table markup, along with more complex features such as implementing captions and summaries.

### Advanced level

HTML forms

Forms are a very important part of the Web — these provide much of the functionality you need for interacting with websites, e.g. registering and logging in, sending feedback, buying products, and more. This module gets you started with creating the client-side parts of forms.

Tips for authoring fast-loading HTML pages

Optimize web pages to provide a more responsive site for visitors and reduce the load on your web server and Internet connection.

CSS Tutorials
-------------

### Introductory level

CSS basics

CSS (Cascading Style Sheets) is the code you use to style your webpage. *CSS Basics* takes you through what you need to get started. We'll answer questions like: How do I make my text black or red? How do I make my content show up in such-and-such a place on the screen? How do I decorate my webpage with background images and colors?

CSS first steps

CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path toward CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.

CSS building blocks

This module carries on where CSS first steps left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, it's time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.

The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like text styling and CSS layout.

Selectors

Target HTML elements, including based on element state, with CSS.

Specificity

Understanding the browser algorithm to determine which CSS declarations get applied to an element when there are competing declarations, with a specificity quiz

Cascade & Inheritance

The cascade, specificity, and inheritance control how CSS is applied to HTML and how conflicts between style declarations are resolved.

Styling text

Here we look at text styling fundamentals, including setting font, boldness, and italics, line and letter spacing, and drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.

Common CSS Questions

Common questions and answers for beginners.

### Intermediate level

CSS layout

At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so can now dive deep into CSS layout, looking at different display settings, traditional layout methods involving float and positioning, and new fangled layout tools like flexbox.

CSS reference

Complete reference to CSS, with details on support by Firefox and other browsers.

Fluid Grids

Design layouts that fluidly resize with the browser window, while still using a typographic grid.

CSS Challenges

Flex your CSS skills, and see where you need more practice.

### Advanced level

Using CSS transforms

Apply rotation, skewing, scaling, and translation using CSS.

CSS transitions

CSS transitions provide a way to animate changes to CSS properties, instead of having the changes take effect instantly.

Canvas tutorial

Learn how to draw graphics using scripting using the canvas element.

JavaScript Tutorials
--------------------

### Introductory level

JavaScript first steps

In our first JavaScript module, we first answer some fundamental questions such as "what is JavaScript?", "what does it look like?", and "what can it do?", before moving on to taking you through your first practical experience of writing JavaScript. After that, we discuss some key JavaScript features in detail, such as variables, strings, numbers and arrays.

JavaScript building blocks

In this module, we continue our coverage of all JavaScript's key fundamental features, turning our attention to commonly-encountered types of code blocks such as conditional statements, loops, functions, and events. You've seen this stuff already in the course, but only in passing — here we'll discuss it all explicitly.

Getting started with JavaScript

What is JavaScript and how can it help you?

Codecademy

Codecademy is an easy way to learn how to code JavaScript. It's interactive and you can do it with your friends.

freeCodeCamp

freeCodeCamp teaches a variety of languages and frameworks for web development. It also has a forum, an internet radio station, and a blog.

### Intermediate level

Introducing JavaScript objects

In JavaScript, most things are objects, from core JavaScript features like strings and arrays to the browser APIs built on top of JavaScript. You can even create your own objects to encapsulate related functions and variables into efficient packages. The object-oriented nature of JavaScript is important to understand if you want to go further with your knowledge of the language and write more efficient code, therefore we've provided this module to help you. Here we teach object theory and syntax in detail, look at how to create your own objects, and explain what JSON data is and how to work with it.

Client-side web APIs

When writing client-side JavaScript for websites or applications, you won't go very far before you start to use APIs — interfaces for manipulating different aspects of the browser and operating system the site is running on, or even data from other websites or services. In this module, we will explore what APIs are, and how to use some of the most common APIs you'll come across often in your development work.

Eloquent JavaScript

A comprehensive guide to intermediate and advanced JavaScript methodologies.

Speaking JavaScript

For programmers who want to learn JavaScript quickly and properly, and for JavaScript programmers who want to deepen their skills and/or look up specific topics.

Essential JavaScript Design Patterns

An introduction to essential JavaScript design patterns.

JavaScript.info - The Modern JavaScript Tutorial

Part 1: The Language. Part 2: Working with Browsers.

### Advanced level

JavaScript Guide

A comprehensive, regularly updated guide to JavaScript for all levels of learning from beginner to advanced.

You Don't Know JS

A series of books diving deep into the core mechanisms of the JavaScript language.

JavaScript Garden

Documentation of the most quirky parts of JavaScript.

Exploring ES6

Reliable and in-depth information on ECMAScript 2015.

JavaScript Patterns

A JavaScript pattern and anti-pattern collection that covers function patterns, jQuery patterns, jQuery plugin patterns, design patterns, general patterns, literals and constructor patterns, object creation patterns, code reuse patterns, DOM.

How browsers work

A detailed research article describing different modern browsers, their engines, page rendering etc.

JavaScript Videos

A collection of JavaScript videos to watch.

### Extension Development

WebExtensions

WebExtensions is a cross-browser system for developing browser add-ons. To a large extent, the system is compatible with the extension API supported by Google Chrome and Opera. Extensions written for these browsers will in most cases run in Firefox or Microsoft Edge with just a few changes. The API is also fully compatible with multiprocess Firefox.


SVG: Scalable Vector Graphics

SVG: Scalable Vector Graphics
=============================

Getting Started with SVG
------------------------

**Scalable Vector Graphics (SVG)** is an XML-based markup language for describing two-dimensional based vector graphics.

As such, it's a text-based, open Web standard for describing images that can be rendered cleanly at any size and are designed specifically to work well with other web standards including CSS, DOM, JavaScript, and SMIL. SVG is, essentially, to graphics what HTML is to text.

SVG images and their related behaviors are defined in XML text files, which means they can be searched, indexed, scripted, and compressed. Additionally, this means they can be created and edited with any text editor or with drawing software.

Compared to classic bitmapped image formats such as JPEG or PNG, SVG-format vector images can be rendered at any size without loss of quality and can be easily localized by updating the text within them, without the need of a graphical editor to do so. With proper libraries, SVG files can even be localized on-the-fly.

SVG has been developed by the World Wide Web Consortium (W3C) since 1999.

See also, SVG Tutorial.

Documentation
-------------

SVG element reference

Details about each SVG element.

SVG attribute reference

Details about each SVG attribute.

SVG DOM interface reference

Details about the SVG DOM API, for interaction with JavaScript.

Applying SVG effects to HTML content

SVG works together with HTML, CSS and JavaScript.

Tools
-----

* SVG Test Suite
* Markup Validator
Examples
--------

* SVG authoring guidelines
* SVG as an image
* SVG animation with SMIL
* SVG art gallery
* D3 (JavaScript library for visualizing data with HTML, SVG, and CSS)


shortcuts - Web app manifests

shortcuts
=========

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `Array` |

The `shortcuts` member defines an array of shortcuts or links to key tasks or pages within a web app. A user agent can use these values to assemble a context menu to be displayed by the operating system when a user engages with the web app's icon. When user invokes a shortcut, the user agent will navigate to the address given by shortcut's `url` member.

Shortcut item values
--------------------

Shortcut objects may contain the following values (only `name` and `url` are required):

| Member | Description |
| --- | --- |
| `name` | A string that can be displayed to the user in a context menu. |
| `short_name` |
 A string that can be displayed where there is insufficient space to
 display the full name of the shortcut.
  |
| `description` |
 A string that describes the purpose of the shortcut. It may be exposed
 to assistive technology.
  |
| `url` | A URL within the application that opens when the shortcut is activated. |
| `icons` |
 A set of icons that represent the shortcut. They can be used, e.g., in
 the context menu. When included, the icon set must include a 96x96 pixel
 icon.
  |

Examples
--------

The following is a list of shortcuts a calendar app might have:

```json
"shortcuts" : [
  {
    "name": "Today's agenda",
    "url": "/today",
    "description": "List of events planned for today"
  },
  {
    "name": "New event",
    "url": "/create/event"
  },
  {
    "name": "New reminder",
    "url": "/create/reminder"
  }
]
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # shortcuts-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Creating shortcut action menus for PWAs


protocol_handlers - Web app manifests

protocol\_handlers
==================

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `Array` |

The `protocol_handlers` member specifies an array of objects that are protocols which this web app can register and handle. Protocol handlers register the application in an OS's application preferences; the registration associates a specific application with the given protocol scheme. For example, when using the protocol handler `mailto://` on a web page, registered email applications open.

After registering a web app as a protocol handler, when a user clicks on a hyperlink with a specific scheme such as `mailto://` or `web+music://` from a browser or native app, the registered PWA would open and receive the URL.

Example
-------

In this example, a web app manifest declares that the app should be registered to handle the protocols `web+jngl` and `web+jnglstore`.

```json
"protocol\_handlers": [
  {
    "protocol": "web+jngl",
    "url": "/lookup?type=%s"
  },
  {
    "protocol": "web+jnglstore",
    "url": "/shop?for=%s"
  }
]
```

A developer can add a field in the manifest.json to declare which protocols the web app can handle. As seen in the example above, the key is named `protocol_handlers` and it contains an array of protocol handler declaration objects.

Registering applications to handle URL schemes is operating-system dependent. This association is usually done during application install but it can also be done afterwards from an app that has already been installed.

Values
------

Protocol handlers objects may contain the following values:

| Member | Description |
| --- | --- |
| `protocol` |
 A required string containing the protocol to be handled; e.g.:
 `mailto`, `ms-word`, `web+jngl`.
  |
| `url` |
 Required HTTPS URL within the application
 scope that will handle the
 protocol. The `%s` token will be replaced by the URL starting
 with the protocol handler's scheme. If `url` is a relative
 URL, the base URL will be the URL of the manifest.
  |

Specifications
--------------

| Specification |
| --- |
| Manifest Incubations # protocol\_handlers-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


id - Web app manifests

id
==

|  |  |
| --- | --- |
| Type | `String` |

The `id` member is a string that represents the *identity of the web application* — the unique identifier for the web application. If the web application ID does not match an existing ID, the application will be treated as a unique identity even if it is from the same URL.

**Note:** The `id` member can be used to uniquely identify applications. The `id` member is processed like a `start_url` but can be out of scope because it does not point to a resource that can be navigated to.

Examples
--------

```json
"id": "?homescreen=1"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # id-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


serviceworker - Web app manifests

serviceworker
=============

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

**Non-standard:** This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

|  |  |
| --- | --- |
| Type | `Object` |

The `serviceworker` member specifies a serviceworker that is Just-In-Time (JIT)-installed and registered to run a web-based payment app providing a payment mechanism for a specified payment method in a merchant website. See Payment Handler API for more details.

Example
-------

See Payment Handler API > Concepts and usage.

Values
------

`serviceworker` objects may contain the following values:

| Member | Description |
| --- | --- |
| `scope` | A string representing the service worker's registration scope. |
| `src` | A string representing the URL to download the service worker script from. |
| `use_cache` | A boolean that sets how the HTTP cache is used for service worker script resources during updates. It provides equivalent functionality to certain values of the `updateViaCache` option provided when a service worker is registered via JavaScript using `ServiceWorkerContainer.register()`.
 * `true`: The HTTP cache will be queried for imports, but the main script will always be updated from the network. If no fresh entry is found in the HTTP cache for the imports, they're fetched from the network. Equivalent to `updateViaCache: "imports"`.
* `false`: The HTTP cache will not be used for the main script or its imports. All service worker script resources will be updated from the network. Equivalent to `updateViaCache: "none"`.
 |

Specifications
--------------

#### No specification found

No specification data found for `html.manifest.serviceworker`.
Check for problems with this page or contribute a missing `spec_url` to mdn/browser-compat-data. Also make sure the specification is included in w3c/browser-specs.

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Service Worker API
* Payment Handler API
* Web-based payment apps overview
* Setting up a payment method
* Life of a payment transaction
* Using the Payment Request API
* Payment processing concepts


categories - Web app manifests

categories
==========

**Experimental:** **This is an experimental technology**
Check the Browser compatibility table carefully before using this in production.

|  |  |
| --- | --- |
| Type | `Array` of `String`s |

The `categories` member is an array of strings defining the names of categories that the application supposedly belongs to. There is no standard list of possible values, but the W3C maintains a list of known categories.

**Note:** `categories` are used only as hints for catalogs or stores listing web applications. Like search engines and meta keywords, catalogs and stores are free to ignore them.

**Note:** `categories` values are lower-cased by the stores and catalogs before processing, so "News" and "news" are treated as the same value. Developers are encouraged to use lower case in the first place.

Example
-------

```json
"categories": ["books", "education", "medical"]
```

Specifications
--------------

| Specification |
| --- |
| Web App Manifest - Application Information # categories-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


scope - Web app manifests

scope
=====

|  |  |
| --- | --- |
| Type | `String` |

The `scope` member is a string that defines the navigation scope of this web application's application context. It restricts what web pages can be viewed while the manifest is applied. If the user navigates outside the scope, it reverts to a normal web page inside a browser tab or window.

If the `scope` is a relative URL, the base URL will be the URL of the manifest.

Examples
--------

If the scope is relative, the manifest URL is used as a base URL:

```json
"scope": "/app/"
```

The following scope limits navigation to the current site:

```json
"scope": "https://example.com/"
```

Finally, the following example limits navigation to a subdirectory of the current site:

```json
"scope": "https://example.com/subdirectory/"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # scope-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


start_url - Web app manifests

start\_url
==========

|  |  |
| --- | --- |
| Type | `String` |

The `start_url` member is a string that represents the *start URL of the web application* — the preferred URL that should be loaded when the user launches the web application (e.g., when the user taps on the web application's icon from a device's application menu or homescreen).

**Note:** The `start_url` member is purely advisory, and a user agent may ignore it or allow the user to alter it at install time or afterwards.

Examples
--------

### Absolute URL

```json
"start\_url": "https://example.com"
```

### Relative URL

If the URL is relative, the manifest URL is used as the base URL to resolve it.

```json
"start\_url": "../startpoint.html"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # start\_url-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


short_name - Web app manifests

short\_name
===========

|  |  |
| --- | --- |
| Type | `String` |

The `short_name` member is a string that represents the name of the web application displayed to the user if there is not enough space to display `name` (e.g., as a label for an icon on the phone home screen). `short_name` is directionality-capable, which means it can be displayed left-to-right or right-to-left based on the value of the `dir` and `lang` manifest members.

Examples
--------

Simple `short_name` in left-to-right language:

```json
"name": "Awesome application",
"short\_name": "Awesome app"
```

`short_name` in Arabic, which will be displayed right-to-left:

```json
"dir": "rtl",
"lang": "ar",
"name": "تطبيق رائع",
"short\_name": "رائع"
```

Specifications
--------------

| Specification |
| --- |
| Web Application Manifest # short\_name-member |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.