Sticky activation - MDN Web Docs Glossary: Definitions of Web-related terms

Sticky activation
=================

**Sticky activation** (or "sticky user activation") is a window state that indicates a user has pressed a button, moved a mouse, used a menu, or performed some other user interaction.

A page is considered "user activated" if a user is currently interacting with the page or has completed a touch, pointer, or keyboard interaction since page load. With sticky user activation, if activation is set it is not reset for the duration of the session (unlike Transient activation).

See Features gated by user activation for examples of APIs that require *sticky activation*.

See the `UserActivation.hasBeenActive` property to programmatically access the current window's sticky activation state.

See also
--------

* HTML Living Standard > Sticky activation
* Transient activation
* `UserActivation.hasBeenActive`


Localization - MDN Web Docs Glossary: Definitions of Web-related terms

Localization
============

**Localization** (l10n) is the process of adapting a software user interface to a specific culture.

The following are common factors to consider:

* language
* unit of measure (e.g., kilometers in Europe, miles in U.S.)
* text direction (e.g., European languages are left-to-right, Arabic right-to-left)
* capitalization in Latin script (e.g., English uses capitals for weekdays, Spanish uses lowercase)
* adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally)
* use of register (e.g., in Japanese respectful speech differs exceptionally from casual speech)
* number format (e.g., 10 000,00 in Germany vs. 10,000.00 in the U.S.)
* date format
* currency
* cultural references
* paper size
* color psychology
* compliance with local laws
* local holidays
* personal names

The complementary practice, of designing a system so it is easy to localize, is called Internationalization.

See also
--------

* Localization on Wikipedia
* Internationalization


Card sorting - MDN Web Docs Glossary: Definitions of Web-related terms

Card sorting
============

Card sorting is a simple technique used in Information architecture whereby people involved in the design of a website (or other type of product) are invited to write down the content / services / features they feel the product should contain, and then organize those features into categories or groupings. This can be used for example to work out what should go on each page of a website. The name comes from the fact that often card sorting is carried out by literally writing the items to sort onto cards, and then arranging the cards into piles.

See also
--------

* Card sorting on Wikipedia


Document directive - MDN Web Docs Glossary: Definitions of Web-related terms

Document directive
==================

**CSP document directives** are used in a `Content-Security-Policy` header and govern the properties of a document or worker environment to which a policy applies.

Document directives don't fall back to the `default-src` directive.

See Document directives for a complete list.

See also
--------

* Glossary
    + CSP
    + Reporting directive
    + Fetch directive
    + Navigation directive
* Reference
    + https://www.w3.org/TR/CSP/#directives-document
    + `upgrade-insecure-requests`
    + `block-all-mixed-content`
    + `Content-Security-Policy`


Alignment container - MDN Web Docs Glossary: Definitions of Web-related terms

Alignment container
===================

The **alignment container** is the rectangle that the alignment subject is aligned within. This is defined by the layout mode; it is usually the alignment subject's containing block, and assumes the writing mode of the box establishing the containing block.

See also
--------

* CSS box alignment module
* CSS `align-content` property
* CSS `align-items` property
* CSS `align-self` property
* CSS `align-tracks` property
* CSS `justify-content` property
* CSS `justify-items` property
* CSS `justify-self` property
* CSS `justify-tracks` property
* CSS `place-content` shorthand property
* CSS `place-self` shorthand property
* CSS `scroll-snap-align` property


String - MDN Web Docs Glossary: Definitions of Web-related terms

String
======

In any computer programming language, a string is a sequence of characters used to represent text.

In JavaScript, a String is one of the primitive values and the `String` object is a wrapper around a String primitive.

See also
--------

* String (computer science) on Wikipedia
* JavaScript data types and data structures


Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms

Graceful degradation
====================

**Graceful degradation** is a design philosophy that centers around trying to build a modern website/application that will work in the newest browsers, but falls back to an experience that while not as good still delivers essential content and functionality in older browsers.

Polyfills can be used to build in missing features with JavaScript, but acceptable alternatives to features like styling and layout should be provided where possible, for example by using the CSS cascade, or HTML fallback behavior. Some good examples can be found in Handling common HTML and CSS problems.

It is a useful technique that allows Web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents. Progressive enhancement is related but different — often seen as going in the opposite direction to graceful degradation. In reality both approaches are valid and can often complement one another.

See also
--------

* Graceful degradation on Wikipedia
* Handling common HTML and CSS problems
* Implementing feature detection
* MDN Web Docs Glossary
    + Graceful degradation
    + Polyfill
    + Progressive enhancement


WCAG - MDN Web Docs Glossary: Definitions of Web-related terms

WCAG
====

*Web Content Accessibility Guidelines* (**WCAG**) are a recommendation published by the Web Accessibility Initiative group at the W3C. They outline a set of guidelines for making content accessible primarily for people with disabilities but also for limited-resource devices such as mobile phones.

WCAG 2.0 which superseded WCAG 1.0 was published as a W3C Recommendation on 11 December 2008. It consists of 12 guidelines organized under 4 principles (perceivable, operable, understandable, and robust) and each guideline has testable success criteria.

WCAG uses three levels of conformance:

* Priority 1: Web developers **must** satisfy these requirements, otherwise it will be impossible for one or more groups to access the Web content. Conformance to this level is described as A.
* Priority 2: Web developers **should** satisfy these requirements, otherwise some groups will find it difficult to access the Web content. Conformance to this level is described as AA or Double-A.
* Priority 3: Web developers **may** satisfy these requirements, in order to make it easier for some groups to access the Web content. Conformance to this level is described as AAA or Triple-A.

Work is proceeding on both WCAG 2.2 and WCAG) 3.0.

See also
--------

* WCAG on Wikipedia
* Accessibility information on MDN
* The WCAG 2.0 recommendation at the W3C
* Web Content Accessibility Guidelines (WCAG) 2.2: Candidate Recommendation
* W3C Accessibility Guidelines (WCAG) 3.0: Working Draft


Garbage collection - MDN Web Docs Glossary: Definitions of Web-related terms

Garbage collection
==================

**Garbage collection** is a term used in computer programming to describe the process of finding and deleting objects which are no longer being referenced by other objects.

In other words, garbage collection is the process of removing any objects which are not being used by any other objects. Often abbreviated "GC," garbage collection is a fundamental component of the memory management system used by JavaScript.

See also
--------

* Memory management on Wikipedia
* Garbage collection (computer science) on Wikipedia
* Garbage collection in the MDN JavaScript guide.
* Memory management in JavaScript


TOFU - MDN Web Docs Glossary: Definitions of Web-related terms

TOFU
====

**Trust On First Use** **(TOFU**) is a security model in which a client needs to create a trust relationship with an unknown server. To do that, clients will look for identifiers (for example public keys) stored locally. If an identifier is found, the client can establish the connection. If no identifier is found, the client can prompt the user to determine if the client should trust the identifier.

TOFU is used in the SSH protocol, in `Strict-Transport-Security` (HSTS) where a browser will obey the redirection rule.

See also
--------

* Wikipedia: TOFU


OTA - MDN Web Docs Glossary: Definitions of Web-related terms

OTA
===

*Over The Air* (**OTA**) refers to automatic updating of software on connected devices from a central server. All device owners receiving a given set of updates are on the same "channel", and each device often can access several channels (e.g. for production or engineering builds).

See also
--------

* Over-the-air programming on Wikipedia


Speculative parsing - MDN Web Docs Glossary: Definitions of Web-related terms

Speculative parsing
===================

Traditionally in browsers the HTML parser ran on the main thread and was blocked after a `</script>` tag until the script has been retrieved from the network and executed. Some HTML parser, such as Firefox since Firefox 4, support speculative parsing off of the main thread. It parses ahead while scripts are being downloaded and executed. The HTML parser starts speculative loads for scripts, style sheets and images it finds ahead in the stream and runs the HTML tree construction algorithm speculatively. The upside is that when a speculation succeeds, there's no need to reparse the part of the incoming file that was already scanned for scripts, style sheets and images. The downside is that there's more work lost when the speculation fails.

This document helps you avoid the kind of things that make speculation fail and slow down the loading of your page.

To make speculative loads of linked scripts, style sheets and images successful, avoid `document.write`. If you use a `<base>` element to override the base URI of your page, put the element in the non-scripted part of the document. Don't add it via `document.write()` or `document.createElement`.

Avoiding losing tree builder output
-----------------------------------

Speculative tree building fails when `document.write()` changes the tree builder state such that the speculative state after the `</script>` tag no longer holds when all the content inserted by `document.write()` has been parsed. However, only unusual uses of `document.write()` cause trouble. Here are the things to avoid:

* Don't write unbalanced trees. `<script>document.write("<div>");</script>` is bad. `<script>document.write("<div></div>");</script>` is OK.
* Don't write an unfinished token. `<script>document.write("<div></div");</script>` is bad.
* Don't finish your writing with a carriage return. `<script>document.write("Hello World!\r");</script>` is bad. `<script>document.write("Hello World!\n");</script>` is OK.
* Note that writing balanced tags may cause other tags to be inferred in a way that makes the write unbalanced. E.g. `<script>document.write("<div></div>");</script>` inside the `head` element will be interpreted as `<script>document.write("</head><body><div></div>");</script>` which is unbalanced.
* Don't format part of a table. `<table><script>document.write("<tr><td>Hello World!</td></tr>");</script></table>` is bad.


FTU - MDN Web Docs Glossary: Definitions of Web-related terms

FTU
===

FTU (First Time Use) is the app that loads when you run a newly-installed version of Gecko on a Firefox OS device.

You can use FTU to set many important options (e.g. timezone, Wi-Fi details, default language, importing contacts), or take the "Phone Tour" to find out more about your device.


Unix time - MDN Web Docs Glossary: Definitions of Web-related terms

Unix time
=========

Unix time is a method to represent a timestamp, and is usually defined as the number of seconds since the beginning of the Unix epoch, which is January 1st, 1970, at midnight (UTC). Leap seconds are ignored.

On the web platform, Unix time is used for timestamps, and is given as the number of milliseconds since the beginning of the Unix epoch.

See also
--------

* Unix time on Wikipedia
* Leap second on Wikipedia


Viewport - MDN Web Docs Glossary: Definitions of Web-related terms

Viewport
========

A viewport represents a polygonal (normally rectangular) area in computer graphics that is currently being viewed. In web browser terms, it refers to the part of the document you're viewing which is currently visible in its window (or the screen, if the document is being viewed in full screen mode). Content outside the viewport is not visible onscreen until scrolled into view.

The portion of the viewport that is currently visible is called the **visual viewport**. This can be smaller than the layout viewport, such as when the user has pinched-zoomed. The layout viewport remains the same, but the visual viewport became smaller.

See also
--------

* Visual Viewport API
* Viewport on Wikipedia
* A tale of two viewports (Quirksmode)
* Visual viewport in the MDN Glossary
* Layout viewport in the MDN Glossary


Sloppy mode - MDN Web Docs Glossary: Definitions of Web-related terms

Sloppy mode
===========

ECMAScript 5 and later let scripts opt in to a new strict mode, which alters the semantics of JavaScript in several ways to improve its resiliency and which make it easier to understand what's going on when there are problems.

The normal, non-strict mode of JavaScript is sometimes referred to as **sloppy mode**. This isn't an official designation, but you are likely to come across it if you spend time doing serious JavaScript code.

See also
--------

* "Strict Mode" in chapter 7 ("JavaScript Syntax") in the book Speaking *JavaScript*.


PNG - MDN Web Docs Glossary: Definitions of Web-related terms

PNG
===

**PNG** (Portable Network Graphics) is a graphics file format that supports lossless data compression.

See also
--------

* PNG on Wikipedia


SDK (Software Development Kit) - MDN Web Docs Glossary: Definitions of Web-related terms

SDK (Software Development Kit)
==============================

An **SDK** (**Software Development Kit**) is an integrated collection of tools that a developer can use to create software for a specific framework, operating system, or other platform. An SDK can include:

* An editor
* A compiler
* A debugger
* An emulator or simulator, if the target platform is different from the platform used to create the program.
* Tools to help test and package the program for distribution.

SDKs are usually provided by the owner of a software platform, to support developers targeting the platform. For example, Google provides an Android SDK for developers writing Android apps.

In many respects, the developer tools built into modern web browsers provide a similar function for web developers.


IPv6 - MDN Web Docs Glossary: Definitions of Web-related terms

IPv6
====

**IPv6** is the current version of the communication protocol underlying the Internet. Slowly IPv6 is replacing IPv4, among other reasons because IPv6 allows for many different IP addresses.

See also
--------

* IPv6 on Wikipedia


Whitespace - MDN Web Docs Glossary: Definitions of Web-related terms

Whitespace
==========

**Whitespace** refers to characters which are used to provide horizontal or vertical space between other characters. Whitespace is often used to separate tokens in HTML, CSS, JavaScript, and other computer languages.

Whitespace characters and their usage vary among languages.

In HTML
-------

The Infra Living Standard defines five characters as "ASCII whitespace": U+0009 TAB, U+000A LF, U+000C FF, U+000D CR, and U+0020 SPACE.

In JavaScript
-------------

The ECMAScript Language Specification defines several Unicode code points as "white space": U+0009 CHARACTER TABULATION <TAB>, U+000B LINE TABULATION <VT>, U+000C FORM FEED <FF>, U+0020 SPACE <SP>, U+00A0 NO-BREAK SPACE <NBSP>, U+FEFF ZERO WIDTH NO-BREAK SPACE <ZWNBSP>, and any other Unicode "Space\_Separator" code points <USP>.

See also
--------

* Whitespace character (Wikipedia)
* How whitespace is handled by HTML, CSS, and in the DOM
* `white-space`
* Specifications
    + ASCII whitespace spec
    + ECMAScript Language Specification
* Glossary
    1. Character


GZip compression - MDN Web Docs Glossary: Definitions of Web-related terms

GZip compression
================

gzip is a file format used for file compression and decompression. It is based on the Deflate algorithm that allows files to be made smaller in size which allows for faster network transfers. gzip is commonly supported by web servers and modern browsers, meaning that servers can automatically compress files with gzip before sending them, and browsers can uncompress files upon receiving them.

See also
--------

* The gzip home page
* gzip on Wikipedia


LTR (Left To Right) - MDN Web Docs Glossary: Definitions of Web-related terms

LTR (Left To Right)
===================

**LTR** (**Left To Right**) is a locale property indicating that text is written from left to right. For example, the `en-US` locale (for US English) specifies left-to-right.

Most Western languages, as well as many others around the world, are written LTR.

The opposite of LTR, RTL (Right To Left) is used in other common languages, including Arabic (`ar`) and Hebrew (`he`).

See also
--------

* MDN Web Docs Glossary
    + locale
    + Localization
    + LTR
    + RTL
* HTML global attributes
    + dir
    + lang
* CSS
    + `:dir`
    + `direction`
    + `unicode-bidi`
    + `writing-mode`


Stacking context - MDN Web Docs Glossary: Definitions of Web-related terms

Stacking context
================

**Stacking context** refers to how elements on a webpage appear to sit on top of other elements, just as you can arrange index cards on your desk to lie side-by-side or overlap each other.

See also
--------

* Explanation and example of the stacking context


P2P - MDN Web Docs Glossary: Definitions of Web-related terms

P2P
===

P2P (Peer-to-peer) is a computer networking architecture in which all participating nodes (*peers*) have equal privileges and share the workload. P2P differs from a client-server network architecture, where multiple *client* nodes connect to centralized *servers* for services. P2P is commonly found in Blockchain Applications.

See also
--------

* P2P on Wikipedia


UI - MDN Web Docs Glossary: Definitions of Web-related terms

UI
==

**User Interface** (UI) is anything that facilitates the interaction between a user and a machine. In the world of computers, it can be anything from a keyboard, a joystick, a screen or a program. In case of computer software, it can be a command-line prompt, a webpage, a user input form, or the front-end of any application.

See also
--------

* User interface on Wikipedia
* Front end development on Wikipedia


CSP - MDN Web Docs Glossary: Definitions of Web-related terms

CSP
===

A CSP (Content Security Policy) is used to detect and mitigate certain types of website related attacks like Cross-site\_scripting, clickjacking and data injections.

The implementation is based on an HTTP header called `Content-Security-Policy`.

See also
--------

* Content Security Policy on Wikipedia
* Content Security Policy documentation on MDN


OWASP - MDN Web Docs Glossary: Definitions of Web-related terms

OWASP
=====

**OWASP** (Open Web Application Security Project) is a non-profit organization and worldwide network that works for security in Free Software, especially on the Web.

See also
--------

* Official website


Flex Container - MDN Web Docs Glossary: Definitions of Web-related terms

Flex Container
==============

A flexbox layout is defined using the `flex` or `inline-flex` values of the `display` property on the parent item. This element then becomes a **flex container**, and each one of its children becomes a flex item.

A value of `flex` causes the element to become a block level flex container, and `inline-flex` an inline level flex container. These values create a **flex formatting context** for the element, which is similar to a block formatting context in that floats will not intrude into the container, and the margins on the container will not collapse with those of the items.

See also
--------

### Property reference

* `align-content`
* `align-items`
* `flex`
* `flex-direction`
* `flex-flow`
* `flex-wrap`
* `justify-content`
### Further reading

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Flexbox Guide: *Mastering wrapping of flex items*
* Firefox Developer Tools > How to: *CSS Flexbox Inspector: Examine Flexbox layouts*


Type - MDN Web Docs Glossary: Definitions of Web-related terms

Type
====

**Type** is a characteristic of a value affecting what kind of data it can store, and the structure that the data will adhere to. For example, a boolean Data Type can hold only a `true` or `false` value at any given time, whereas a string has the ability to hold a string or a sequence of characters, a number can hold numerical values of any kind, and so on.

A value's data type also affects the operations that are valid on that value. For example, a value of type number can be multiplied by another number, but not by a string - even if that string contains *only* a number, such as the string "2".

Types also provides us with useful knowledge about the comparison between different values. Comparison between structured types is not always an easy assumption, as even if the previous data structure is the same, there could be inherited structures inside of the Prototype Chain.

If you are unsure of the type of a value, you can use the `typeof` operator.

See also
--------

* Data type on Wikipedia
* JavaScript data types
* Glossary
    + JavaScript
    + string
    + number
    + bigint
    + boolean
    + null
    + undefined
    + symbol


ICE - MDN Web Docs Glossary: Definitions of Web-related terms

ICE
===

**ICE** (*Interactive Connectivity Establishment*) is a framework used by WebRTC (among other technologies) for connecting two peers, regardless of network topology (usually for audio and video chat). This protocol lets two peers find and establish a connection with one another even though they may both be using Network Address Translator (NAT) to share a global IP address with other devices on their respective local networks.

The framework algorithm looks for the lowest-latency path for connecting the two peers, trying these options in order:

1. Direct UDP connection (In this case—and only this case—a STUN server is used to find the network-facing address of a peer)
2. Direct TCP connection, via the HTTP port
3. Direct TCP connection, via the HTTPS port
4. Indirect connection via a relay/TURN server (if a direct connection fails, e.g., if one peer is behind a firewall that blocks NAT traversal)
See also
--------

* WebRTC, the principal web-related protocol which uses ICE
* WebRTC protocols
* RFC 8445, the IETF specification for ICE
* `RTCIceCandidate`, the interface representing an ICE candidate


Symmetric-key cryptography - MDN Web Docs Glossary: Definitions of Web-related terms

Symmetric-key cryptography
==========================

Symmetric-key cryptography is a term used for cryptographic algorithms that use the same key for encryption and for decryption. The key is usually called a "symmetric key" or a "secret key".

This is usually contrasted with public-key cryptography, in which keys are generated in pairs and the transformation made by one key can only be reversed using the other key.

Symmetric-key algorithms should be secure when used properly and are highly efficient, so they can be used to encrypt large amounts of data without having a negative effect on performance.

Most symmetric-key algorithms currently in use are block ciphers: this means that they encrypt data one block at a time. The size of each block is fixed and determined by the algorithm: for example AES uses 16-byte blocks. Block ciphers are always used with a *mode*, which specifies how to securely encrypt messages that are longer than the block size. For example, AES is a cipher, while CTR, CBC, and GCM are all modes. Using an inappropriate mode, or using a mode incorrectly, can completely undermine the security provided by the underlying cipher.

See also
--------

* MDN Web Docs Glossary
    + Block cipher mode of operation
    + Cryptography
    + Cryptographic hash function
    + Symmetric-key cryptography


Crawler - MDN Web Docs Glossary: Definitions of Web-related terms

Crawler
=======

A web crawler is a program, often called a bot or robot, which systematically browses the Web to collect data from webpages. Typically search engines (e.g. Google, Bing, etc.) use crawlers to build indexes.

See also
--------

* Web crawler on Wikipedia
* Search engine (Glossary)


Ink overflow - MDN Web Docs Glossary: Definitions of Web-related terms

Ink overflow
============

The **ink overflow** of a box refers to the part of the box and its contents that creates a visual effect outside of the box's border box. Being visual only, ink overflow does not affect layout as it has no impact on box model properties.

Ink overflow is the overflow of painting effects such as box shadows, border images, text decoration, outlines, etc. that do not affect layout or otherwise extend the scrollable overflow area. Ink overflow is also the overhanging of glyphs, such as ascenders and descenders extending outside the em box.

As replaced elements always establish an independent formatting context, any overflow of replaced content is always ink overflow (as opposed to scrollable overflow).

See also
--------

* CSS overflow module


Global scope - MDN Web Docs Glossary: Definitions of Web-related terms

Global scope
============

In a programming environment, the *global scope* is the scope that contains, and is visible in, all other scopes.

In client-side JavaScript, the global scope is generally the web page inside which all the code is being executed.

See also
--------

* Introduction to variable scope in JavaScript
* Scope on Wikipedia


Hash - MDN Web Docs Glossary: Definitions of Web-related terms

Hash
====

The hash function takes a variable-length message input and produces a fixed-length hash output. It is commonly in the form of a 128-bit "fingerprint" or "message digest". Hashes are very useful for cryptography — they ensure the integrity of transmitted data, and provide the basis for HMAC, which enables message authentication.

See also
--------

* Hash function on Wikipedia


Long task - MDN Web Docs Glossary: Definitions of Web-related terms

Long task
=========

A **long task** is a task that takes more than 50ms to complete.

It is an uninterrupted period where the main UI thread is busy for 50 ms or longer. Common examples include long running event handlers, expensive reflows and other re-renders, and work the browser does between different turns of the event loop that exceeds 50 ms.

See also
--------

* Long task API


Metadata - MDN Web Docs Glossary: Definitions of Web-related terms

Metadata
========

**Metadata** is — in its very simplest definition — data that describes data. For example, an HTML document is data, but HTML can also contain metadata in its `<head>` element that describes the document — for example who wrote it, and its summary.

See also
--------

* Learn: metadata
* metadata on Wikipedia
* The `<meta>` element on MDN


Data structure - MDN Web Docs Glossary: Definitions of Web-related terms

Data structure
==============

**Data structure** is a particular way of organizing *data* so that it can be used efficiently.

See also
--------

* Data structure on Wikipedia


Control flow - MDN Web Docs Glossary: Definitions of Web-related terms

Control flow
============

The *control flow* is the order in which the computer executes statements in a script.

Code is run in order from the first line in the file to the last line, unless the computer runs across the (extremely frequent) structures that change the control flow, such as conditionals and loops.

For example, imagine a script used to validate user data from a webpage form. The script submits validated data, but if the user, say, leaves a required field empty, the script prompts them to fill it in. To do this, the script uses a conditional structure or `if...else`, so that different code executes depending on whether the form is complete or not:

```js
if (isEmpty(field)) {
  promptUser();
} else {
  submitForm();
}
```

A typical script in JavaScript or PHP (and the like) includes many control structures, including conditionals, loops and functions. Parts of a script may also be set to execute when events occur.

For example, the above excerpt might be inside a function that runs when the user clicks the **Submit** button for the form. The function could also include a loop, which iterates through all of the fields in the form, checking each one in turn. Looking back at the code in the `if` and `else` sections, the lines `promptUser` and `submitForm` could also be calls to other functions in the script. As you can see, control structures can dictate complex flows of processing even with only a few lines of code.

Control flow means that when you read a script, you must not only read from start to finish but also look at program structure and how it affects order of execution.

See also
--------

* Control flow on Wikipedia
* JavaScript Reference - Control flow on MDN
* Statements (Control flow) on MDN


Git - MDN Web Docs Glossary: Definitions of Web-related terms

Git
===

**Git** is a free, open-source, distributed Source Code Management (SCM) system. It facilitates handling code bases with distributed development teams. What sets it apart from previous SCM systems is the ability to do common operations (branching, committing, etc.) on your local development machine, without having to change the master repository or even having write access to it.

See also
--------

* Official website with documentation
* GitHub, a Git-based graphical project host


Web performance - MDN Web Docs Glossary: Definitions of Web-related terms

Web performance
===============

**Web performance** is the objective time from when a request for content is made until the requested content is displayed in the user's browser, objective render times, and the subjective user experience of load time and runtime.

Objectively, it is measurable time, in milliseconds, it takes for the web page or web application to be downloaded, painted in the user's web browser, and become responsive and interactive. It is the frames per second and times the main thread is not available for user interactions. Subjectively, it is the user's perception of whether the time it takes between the time the user requests the content and the time until the user feels the content requested is available and usable *feels* slow or fast.

See also
--------

* Learn about web performance
* Perceived performance


Continuous Media - MDN Web Docs Glossary: Definitions of Web-related terms

Continuous Media
================

Continuous media is data where there is a timing relationship between source and destination. The most common examples of continuous media are audio and motion video. Continuous media can be real-time (interactive), where there is a "tight" timing relationship between source and sink, or streaming (playback), where the relationship is less strict.

CSS can be used in a variety of contexts, including print media. And some CSS, particularly those that are used for layout, behave differently depending on the context they are in.

Continuous Media, therefore, identifies a context where the content is not broken up. It flows continuously. Web content displayed on a screen is continuous media, as is spoken content.


Media (Audio-visual presentation) - MDN Web Docs Glossary: Definitions of Web-related terms

Media (Audio-visual presentation)
=================================

The term **media** (more accurately, **multimedia**) refers to audio, video, or combined audio-visual material such as music, recorded speech, movies, TV shows, or any other form of content that is presented over a period of time.

More broadly, media may include still images such as photographs or other still images.

Media content can be recorded, played back, presented, and at times interacted with in various ways.

See also
--------

* Multimedia on Wikipedia
* Web media technologies: a guide to all the ways media can be used in web content
* Multimedia and Embedding in the MDN learning area
* `<audio>` and `<video>` elements, used to present media in HTML documents


Media (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms

Media (CSS)
===========

In the context of CSS (Cascading Style Sheets), the term ***media*** refers to the destination to which the document is to be drawn by the rendering engine.

Typically, this is a screen—but it may also be a printer, Braille display, or another type of device.

CSS offers several features that allow you to tweak your document's styles—or even offer different styles—according to the media **type** (such as screen or print, to name two) or media **capabilities** (such as width, resolution, or other values) of the viewer's device.

See also
--------

* Using media queries
* Media queries
* `@media` at-rule: Conditionally apply part of a stylesheet, based on the result of a media query.
* `Window.matchMedia()`: Test the viewing device against a media query


Boolean attribute (HTML) - MDN Web Docs Glossary: Definitions of Web-related terms

Boolean attribute (HTML)
========================

A **boolean attribute** in HTML is an attribute that represents `true` or `false` values. If an HTML tag contains a boolean attribute - no matter the value of that attribute - the attribute is set to `true` on that element. If an HTML tag does not contain the attribute, the attribute is set to `false`.

If the attribute is present, it can have one of the following values:

* no value at all, e.g. `attribute`
* the empty string, e.g. `attribute=""`
* attribute's name itself, with no leading or trailing whitespace, e.g. `attribute="attribute"`

**Note:** The strings "true" and "false" are invalid values. To set the attribute to `false`, the attribute should not be present in the element tag. Though modern browsers treat *any* string value as `true`, you should not rely on that behavior.

Here's an example of a HTML boolean attribute `checked`:

```html
<!-- The following checkboxes will be checked on initial rendering -->
<input type="checkbox" checked />
<input type="checkbox" checked="" />
<input type="checkbox" checked="checked" />

<!-- The following checkbox will not be checked on initial rendering -->
<input type="checkbox" />
```

See also
--------

* Enumerated


Boolean (JavaScript) - MDN Web Docs Glossary: Definitions of Web-related terms

Boolean (JavaScript)
====================

A **Boolean** in JavaScript is a primitive value that can be either `true` or `false`.

A `Boolean` object is a wrapper around a Boolean primitive.

See also
--------

* The JavaScript global object
* JavaScript data types and data structures


Boolean attribute (ARIA) - MDN Web Docs Glossary: Definitions of Web-related terms

Boolean attribute (ARIA)
========================

A **boolean attribute** in ARIA is an enumerated attribute that includes `true` or `false` in the enumerated list.

In ARIA, booleans only come in the form of strings `"true"` and `"false"`.

See also
--------

* Enumerated that contains more behavioral details and examples of ARIA boolean attributes


Block (scripting) - MDN Web Docs Glossary: Definitions of Web-related terms

Block (scripting)
=================

In JavaScript, a block is a collection of related statements enclosed in braces ("{}"). For example, you can put a block of statements after an `if (condition)` block, indicating that the interpreter should run the code inside the block if the condition is true, or skip the whole block if the condition is false.

See also
--------

* JavaScript block statement


Block (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms

Block (CSS)
===========

A **block** on a webpage is an HTML element that appears on a new line, i.e. underneath the preceding element in a horizontal writing mode, and above the following element (commonly known as a *block-level element*). For example, `<p>` is by default a block-level element, whereas `<a>` is an *inline element* — you can put several links next to one another in your HTML source and they will sit on the same line as one another in the rendered output.

Using the `display` property you can change whether an element displays inline or as a block (among many other options); **blocks** are also subject to the effects of positioning schemes and use of the `position` property.

See also
--------

* Visual formatting model


Property (CSS) - MDN Web Docs Glossary: Definitions of Web-related terms

Property (CSS)
==============

A **CSS property** is a characteristic (like color) whose associated value defines one aspect of how the browser should display the element.

Here's an example of a CSS rule:

```css
/\* "div" is a selector indicating that all the div elements \*/
/\* in the document will be styled by that rule \*/
div {
  /\* The property "color" with the value "black" indicates \*/
  /\* that the text will have the color black \*/
  color: black;

  /\* The property "background-color" with the value "white" indicates \*/
  /\* that the background color of the elements will be white \*/
  background-color: white;
}
```

See also
--------

* Learn CSS
* The CSS reference on MDN
* The CSS Working Group current work


Property (JavaScript) - MDN Web Docs Glossary: Definitions of Web-related terms

Property (JavaScript)
=====================

A **JavaScript property** is a member of an object that associates a key with a value. A JavaScript object is a data structure that stores a collection of properties.

A property consists of the following parts:

* A *name* (also called a *key*), which is either a string or a symbol.
* A *value*, which can be any JavaScript value. A property that has a function as its value may also be called a method.
* Some *attributes*, which specify how the property can be read and written. A property may have the `configurable`, `enumerable`, and `writable` attributes.

Accessor properties do not have an actual "value". The value is represented indirectly through a pair of functions, one (the getter) invoked when reading the value and one (the setter) invoked when setting the value. However, accessor properties behave like regular data properties on the surface, because the getter and setter functions are invoked automatically and are typically transparent to JavaScript code.

The property's value (including the getter and setter) and its attributes are stored in a data record called the *property descriptor*. Many methods, such as `Object.getOwnPropertyDescriptor()` and `Object.defineProperty()`, work with property descriptors.

The term *property* itself does not correspond to any JavaScript value — it's an abstract concept. For example, in the following code:

```js
const obj = {
  a: 1,
  b() {},
};
```

The object `obj` has two properties. The first one has `"a"` as the key and `1` as the value. The second one has `"b"` as the key and a function as the value (using the method syntax). The `"a"` – `1`, `"b"` – `function` associations are the properties of the object.

In the context of classes, properties can be divided into *instance properties*, which are owned by each instance, and *static properties*, which are owned by the class and hold data common to all instances. In the context of inheritance, properties can also be divided into *own properties*, which are owned by the object itself, and *inherited properties*, which are owned by objects in the prototype chain of the object.

For more information about reading and writing properties, see working with objects.

See also
--------

* Property (programming) on Wikipedia
* Introduction to object-oriented JavaScript
* Object properties
* Enumerability and ownership of properties


Baseline (typography) - MDN Web Docs Glossary: Definitions of Web-related terms

Baseline (typography)
=====================

The **baseline** is a term used in European and West Asian typography meaning an imaginary line upon which the characters of a font rest.

See also
--------

* Baseline on Wikipedia
* CSS Box Alignment on MDN


Baseline (compatibility) - MDN Web Docs Glossary: Definitions of Web-related terms

Baseline (compatibility)
========================

**Baseline** identifies web platform features that work across browsers.
 Baseline helps you decide when to use a feature by telling you when it is less likely to cause compatibility problems for your site's visitors.

A Baseline feature - such as an API, a set of CSS properties, or a JavaScript syntax - works consistently across several well-known and widely-used desktop and mobile browsers, including Chrome, Edge, Firefox, and Safari.

Baseline features are described as either newly available in current stable browsers or widely available with continuous support over time.

Badges
------

![Green widget with the checkmark: Baseline, widely available. Four browsers logos, all with checkmarks.](/en-US/docs/Glossary/Baseline/Compatibility/high.png)

 If you see a **widely available** Baseline badge, then you can trust that the feature has a consistent history of support in each of the Baseline browsers.
 A widely available feature has been in multiple browsers for years.
 It works with many browsers and devices, even ones that aren't yet up to date with the latest browser releases.

![Blue widget with the checkmark: Baseline 2022, newly available. Four browsers' logos, all with checkmarks.](/en-US/docs/Glossary/Baseline/Compatibility/limited.png)

 If you see a **newly available** Baseline badge, then you can trust that the feature works in at least the latest stable version of each of the Baseline browsers and often more.
 A newly available feature works in the latest browsers, but may not work with older browsers and devices.
 Consider your site's audience carefully before using a newly available feature.

![Grey widget with the cross: limited availability. Four browsers' logos, two with checkmarks, two with crosses.](/en-US/docs/Glossary/Baseline/Compatibility/low.png)

 If you see a **limited availability** badge, then that feature is *not* Baseline.
 Do more research and testing with your site's users before relying on that feature, or wait for it to become Baseline.

Browser set
-----------

Baseline tracks availability with the following browsers:

* Apple Safari (iOS)
* Apple Safari (macOS)
* Google Chrome (Android)
* Google Chrome (desktop)
* Microsoft Edge (desktop)
* Mozilla Firefox (Android)
* Mozilla Firefox (desktop)
Extra considerations
--------------------

 Baseline is a summary guide to support and doesn't cover every situation.
 If your site needs to work with an older device or browser release, or a browser not covered by the Baseline status, then you may need to do your own research or testing.
 If Baseline doesn't cover your situation, then consider reading browser compatibility tables on MDN or visiting caniuse.com before committing to a feature.

Contributing
------------

 Baseline is a community effort of the W3C WebDX Community Group and relies on MDN's open source browser compatibility data.
 If you have questions, feedback, or want to help update and expand the features covered by Baseline status reports, then go to web-platform-dx/web-features to participate.

See also
--------

* Cross browser testing
* web-platform-dx/web-features repository
* W3C WebDX Community Group
* mdn/browser-compat-data repository


Node (networking) - MDN Web Docs Glossary: Definitions of Web-related terms

Node (networking)
=================

In networking, a **node** is a connection point in the network. In physical networks, a node is usually a device, like a computer or a router.

See also
--------

* Node on Wikipedia


Node (DOM) - MDN Web Docs Glossary: Definitions of Web-related terms

Node (DOM)
==========

In the context of the DOM, a **node** is a single point in the node tree. Various things that are nodes are the document itself, elements, text, and comments.

See also
--------

* The node tree WHATWG spec
* Node objects


DSL (Digital Subscriber Line) - MDN Web Docs Glossary: Definitions of Web-related terms

DSL (Digital Subscriber Line)
=============================

**DSL (Digital Subscriber Line)** is a type of broadband internet connection that sends wired data transmissions over telephone lines.

 The download and upload rates don't need to be the same. In such cases, the line is said to be *asymmetrical* and the ADSL abbreviation is used.
 Contrast with cable, fiber optic, or dial-up connections.

See also
--------

* Digital subscriber line on Wikipedia


DSL (Domain-Specific Language) - MDN Web Docs Glossary: Definitions of Web-related terms

DSL (Domain-Specific Language)
==============================

A **Domain-Specific Language (DSL)** is a type of computer language of limited scope, designed to address a particular problem within an application domain.

Contrast DSLs with *general-purpose languages (GPLs)*, which are designed to address various problems across domains.

See also
--------

* Domain-specific language on Wikipedia
* DSL Guide on martinfowler.com


Safe (HTTP Methods) - MDN Web Docs Glossary: Definitions of Web-related terms

Safe (HTTP Methods)
===================

An HTTP method is **safe** if it doesn't alter the state of the server. In other words, a method is safe if it leads to a read-only operation. Several common HTTP methods are safe: `GET`, `HEAD`, or `OPTIONS`. All safe methods are also idempotent, but not all idempotent methods are safe. For example, `PUT` and `DELETE` are both idempotent but unsafe.

Even if safe methods have a read-only semantic, servers can alter their state: e.g. they can log or keep statistics. What is important here is that by calling a safe method, the client doesn't request any server change itself, and therefore won't create an unnecessary load or burden for the server. Browsers can call safe methods without fearing to cause any harm to the server; this allows them to perform activities like pre-fetching without risk. Web crawlers also rely on calling safe methods.

Safe methods don't need to serve static files only; a server can generate an answer to a safe method on-the-fly, as long as the generating script guarantees safety: it should not trigger external effects, like triggering an order in an e-commerce website.

It is the responsibility of the application on the server to implement the safe semantic correctly, the web server itself, being Apache, Nginx or IIS, can't enforce it by itself. In particular, an application should not allow `GET` requests to alter its state.

A call to a safe method, not changing the state of the server:

```http
GET /pageX.html HTTP/1.1
```

A call to a non-safe method, that may change the state of the server:

```http
POST /pageX.html HTTP/1.1
```

A call to an idempotent but non-safe method:

```http
DELETE /idX/delete HTTP/1.1
```

See also
--------

* Definition of safe in the HTTP specification.
* Description of common safe methods: `GET`, `HEAD`, `OPTIONS`
* Description of common unsafe methods: `PUT`, `DELETE`, `POST`


Signature (functions) - MDN Web Docs Glossary: Definitions of Web-related terms

Signature (functions)
=====================

A **function signature** (or *type* signature, or *method* signature) defines input and output of functions or methods.

A signature can include:

* parameters and their types
* a return value and type
* exceptions that might be thrown or passed back
* information about the availability of the method in an object-oriented program (such as the keywords `public`, `static`, or `prototype`).
In depth
--------

### Signatures in JavaScript

JavaScript is a *loosely typed* or a *dynamic* language. That means you don't have to declare the type of a variable ahead of time. The type will get determined automatically while the program is being processed. A signature in JavaScript can still give you some information about the method:

```js
MyObject.prototype.myFunction(value);
```

* The method is installed on an object called `MyObject`.
* The method is installed on the `prototype` of `MyObject` (thus it is an instance method) as opposed to being a static method.
* The name of the method is `myFunction`.
* The method accepts one parameter, which is called `value` and is not further defined.
### Signatures in Java

In Java, signatures are used to identify methods and classes at the level of the virtual machine code. You have to declare types of variables in your code in order to be able to run the Java code. Java is *strictly typed* and will check any parameters at compilation time if they are correct.

```java
public static void main(String[] args)
```

* The `public` keyword is an access modifier and indicates that this method can be called by any object.
* The `static` keyword indicates that this method is a class method as opposed to being an instance method.
* The `void` keyword indicates that this method has no return value.
* The name of the method is `main`.
* The method accepts one parameter of type String Array. It is named `args`.
See also
--------

* Java internal type signatures on Wikipedia


Signature (security) - MDN Web Docs Glossary: Definitions of Web-related terms

Signature (security)
====================

A **signature**, or *digital signature*, is a protocol showing that a message is authentic.

From the hash of a given message, the **signing process** first generates a digital signature linked to the signing entity, using the entity's private key.

On receiving the message, the **verification process**

* *authenticates the sender -* uses the sender's public key to decrypt the signature and recover the hash, which can only be created with the sender's private key, and
* *checks message integrity -* compares the hash with a newly calculated one from the received document (the two hashes will differ if the document has been tampered with)

The system fails if the private key is compromised or the recipient is deceitfully given the wrong public key.

Digital signatures rely on asymmetric cryptography, also known as public-key cryptography.

See also
--------

* Digital signature on Wikipedia
* See digest, encryption


Common questions - Learn web development

Common questions
================

 This section of the Learning Area is designed to provide answers to common questions that may come
 up, which are not necessarily part of the structured core learning pathways (e.g. the HTML or CSS learning articles.) These articles are designed to work on their own.

* HTML questions
* CSS questions
* JavaScript questions
* Web mechanics
* Tools and setup
* Design and accessibility


Web performance - Learn web development

Web performance
===============

Building websites requires HTML, CSS, and JavaScript. To build websites and applications people want to use, which attract and retain users, you need to create a good user experience. Part of good user experience is ensuring the content is quick to load and responsive to user interaction. This is known as **web performance**, and in this module you'll focus on the fundamentals of how to create performant websites.

The rest of our beginner's learning material tried to stick to web best practices such as performance and accessibility as much as possible, however, it is good to focus specifically on such topics too, and make sure you are familiar with them.

Learning pathway
----------------

While knowing HTML, CSS, and JavaScript is needed for implementing many web performance improvement recommendations, knowing how to build applications is not a necessary pre-condition for understanding and measuring web performance. We do however recommend that before you work through this module, you at least get a basic idea of web development by working through our Getting started with the web module.

It would also be helpful to go a bit deeper into these topics, with modules such as:

* Introduction to HTML
* CSS first steps
* JavaScript first steps

Once you've worked through this module, you'll probably be excited to go deeper into web performance — you can find a lot of further teachings in our main MDN Web performance section, including overviews of performance APIs, testing and analysis tools, and performance bottleneck gotchas.

Guides
------

This topic contains the following guides. The following is a suggested order for working through them; you should definitely start with the first one.

The "why" of web performance

This article discusses why web performance is important for accessibility, user experience and your business goals.

What is web performance?

You know web performance is important, but what constitutes web performance? This article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users' browser to be viewed, to what groups of people we need to consider when thinking about performance.

How do users perceive performance?

More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual page load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.

Measuring performance

Now that you understand a few performance metrics, we take a deeper dive into performance tools, metrics, and APIs and how we can make performance part of the web development workflow.

Multimedia: images

The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. In this article we discuss the impact images have on performance, and the methods to reduce the number of bytes sent per image.

Multimedia: video

The lowest hanging fruit of web performance is often media optimization. In this article we discuss the impact video content has on performance, and cover tips like removing audio tracks from background videos can improve performance.

JavaScript performance optimization

JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.

HTML performance optimization

Some attributes and the source order of your markup can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.

CSS performance optimization

CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.

Fonts and performance

A look at whether you need to include external fonts and, if you do, how to include the fonts your design requires with the least impact on your sites performance.

Mobile performance

With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.

The business case for web performance

There are many things a developer can do to improve performance, but how fast is fast enough? How can you convince powers that be of the importance of these efforts? Once optimized, how can you ensure bloat doesn't come back? In this article we look at convincing management, developing a performance culture and performance budget, and introduce ways to ensure regressions don't sneak into your code base.

See also
--------

Web performance resources

In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features at the basic level and provide links to deeper dives to improve performance for each topic.

Responsive images

In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across different devices. Responsive images are just one part of responsive design, a future CSS topic for you to learn.

Main web performance section on MDN

Our main web performance section — here you'll find much more detail on web performance including overviews of performance APIs, testing and analysis tools, and performance bottleneck gotchas.


Accessibility - Learn web development

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

Learning some HTML, CSS, and JavaScript is useful if you want to become a web developer. Beyond mechanical use, it's important to learn how to use these technologies **responsibly** so that all readers might use your creations on the web. To help you achieve this, this module will cover general best practices (which are demonstrated throughout the HTML, CSS, and JavaScript topics), cross browser testing, and some tips on enforcing accessibility from the start. We'll cover accessibility in special detail.

Overview
--------

When someone describes a site as "accessible", they mean that any user can use all its features and content, regardless of how the user accesses the web — even and especially users with physical or mental impairments.

* Sites should be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.
* Applications should be understandable and usable by people regardless of auditory, visual, physical, or cognitive abilities.
* Sites should also not cause harm: web features like motion can cause migraines or epileptic seizures.

**By default, HTML is accessible, if used correctly.** Web accessibility involves ensuring that content remains accessible, regardless of who and how the web is accessed.

The Firefox Accessibility Inspector is a very useful tool for checking out accessibility issues on web pages. The following video provides a nice introduction to it:

#### 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**

Prerequisites
-------------

To get the most out of this module, it would be a good idea to either work through at least the first two modules of the HTML, CSS, and JavaScript topics, or perhaps even better, work through the relevant parts of the accessibility module as you work through the related technology topics.

**Note:** If you are working on a computer/tablet/other devices where you don't have the ability to create your own files, you can try out most of the code examples in an online coding program such as JSBin or Glitch.

Guides
------

What is accessibility?

This article starts off the module with a good look at what accessibility 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 the correct HTML elements are always used for the correct purpose. 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, but if misused they can significantly harm accessibility. 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 use to 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 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.

Assessments
-----------

Accessibility troubleshooting

In the assessment for this module, we present to you a simple site with several accessibility issues that you need to diagnose and fix.

See also
--------

* Start Building Accessible Web Applications Today — an excellent series of video tutorials by Marcy Sutton.
* Deque University resources — includes code examples, screen reader references, and other useful resources.
* WebAIM resources — includes guides, checklists, tools, and more.
* Web Accessibility Evaluation Tools List — includes a list of web accessibility evaluation tools.


Tools and testing - Learn web development

Tools and testing
=================

Once you've started to become comfortable programming with core web technologies (like HTML, CSS, and JavaScript), and you start to get more experience, read more resources, and learn more tips and tricks, you'll start to come across all kind of tools, from JavaScript frameworks, to testing and automation tools, and more besides. As your web projects become larger and more complex, you'll want to start taking advantage of some of these tools, working out a reliable toolchain to give your development process superpowers.

On top of that, we still need to keep cross-browser support in the forefront of our minds, and make sure that our code follows best practices that allow our projects to work across different browsers and devices that our users are using to browse the Web, and be usable by people with disabilities.

Working out what tools you should be using can be a difficult process, so we have written this set of articles to inform you of what types of tool are available, what they can do for you, and how to make use of the current industry favorites.

**Note:** We have referenced a number of tools in this topic, not because we endorse them or think they are the best, but because we know they work and have good industry support. In most cases there are other tools available, old ones will go out of fashion, and new ones will no doubt appear.

#### 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**

Prerequisites
-------------

You should really learn the basics of the core HTML, CSS, and JavaScript languages first before attempting to use many of the tools detailed here. For example, you'll need to know the fundamentals of these languages before you start debugging problems in complex web code, making effective use of JavaScript frameworks, or writing tests and running them against your code using test runners.

In addition, you should start with the first module in this topic, which gives a useful overview of the general area.

Modules
-------

Understanding client-side web development tools

Client-side tooling can be intimidating, but this series of articles aims to illustrate the purpose of some of the most common client-side tool types, explain the tools you can chain together, how to install them using package managers, and control them using the command line. We finish up by providing a complete toolchain example showing you how to get productive.

Understanding client-side JavaScript frameworks

JavaScript frameworks are an essential part of modern front-end web development, providing developers with tried and tested tools for building scalable, interactive web applications. Many modern companies use frameworks as a standard part of their tooling, so many front-end development jobs now require framework experience. 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 tutorial series covering some of today's most popular ones.

Git and GitHub

All developers will use some kind of **version control system** (**VCS**), a tool to allow them to collaborate with other developers on a project without danger of them overwriting each other's work, and roll back to previous versions of the code base if a problem is discovered later on. The most popular VCS (at least among web developers) is **Git**, along with **GitHub**, a site that provides hosting for your repositories and several tools for working with them. This module aims to teach you what you need to know about both of them.

Cross browser testing

This module looks specifically at the area of testing web projects across different browsers. Here we look at identifying your target audience (e.g. what users, browsers and devices do you most need to worry about?), how to go about testing, the main issues that you'll face with different types of code and how to fix/mitigate those, what tools are most useful in helping you test and fix problems, and how to use automation to speed up testing.


Learning and getting help - Learn web development

Learning and getting help
=========================

It is great that you are putting some time into learning a new set of skills, but there are good practices to employ that will make your learning more effective. There also are times when you'll get stuck and feel frustrated — even professional web developers feel like this regularly — and it pays to know about the most effective ways to try and get help so you can progress in your work. This article provides some hints and tips in both of these areas that will help you get more out of learning web development, as well as further reading so you can find out more information about each sub-topic should you wish.

Effective learning
------------------

Let's move straight on and think about effective learning.

### Different learning methods

It is interesting to consider that there are two main ways in which your brain learns things — **focused** and **diffuse** learning:

* Focused learning is what you might more traditionally associate with academic subjects. You concentrate deeply on a low-level topic and solving the specific problems that it brings. You are focused on a narrow area.
* Diffuse learning is more to do with high-level thinking around a wider area. You let your mind wander more widely, and seemingly make random connections between different things. This is more the kind of thinking you do while you are in the shower, or during a coffee break.

From the studies that neuroscientists have done on brain activity, we have found out that you can't really engage in both ways of learning — or thinking — at once. So which one should you choose? You might think that focused learning is better for studying, but in reality, **both** are very important.

Focused thinking is great for concentrating hard on specific subjects, getting into deep problem-solving, and improving your mastery of the techniques required — strengthening the neural pathways in your brain where that information is stored. It isn't however very good at getting an understanding of "the big picture", and unlocking new neural pathways when you are trying to understand new subjects or solve new problems that you haven't come across before.

For that, you need diffuse thinking. This is the opposite of focus — you let your brain wander around the wider landscape, searching around for connections you didn't have before, touching on new things (or new combinations of things) that you can then focus on later, to strengthen them and start to really understand what they mean.

This is why it is usually good to read some introductory material first to get a high-level understanding of an area before you leap into the specific details.

It is also why you can sometimes get really stuck on a problem, but then figure out the answer when you go for a coffee break (or a walk). You might:

1. Know how to fix problem A with tool A.
2. Know how to fix problem B with tool B.
3. Not know how to fix problem C.

Let's say you focus on problem C for a while and get frustrated because you can't think how to solve it. But then after going on a walk to get some fresh air, you may well find that as your mind wanders, you suddenly make a connection between tool A and tool B, and realize that you can use them together to fix problem C! It isn't always this simple, but it is also surprising how many times this does happen. This also highlights the importance of taking regular breaks when you are studying in front of the computer.

### Different learning materials

It is also worth looking at the different types of learning materials that are available, to see which ones are most effective for you to learn with.

#### Textual articles

You'll find a lot of written articles on the web to teach you about web design. Like most of this course, for example. Some of the articles will be tutorials, to teach you a certain technique or important concept (such as "learn how to create a video player" or "Learn the CSS box model"), and some of the articles will be reference material, to allow you to look up details you may have forgotten (such as "what is the syntax of the CSS `background` property"?)

MDN Web Docs is very good for both types — the area you are currently in is great for learning techniques and concepts, and we also have several giant reference sections allowing you to look up any syntax you can't remember.

There are also several other great resources on the web, some of which we'll mention below.

**Note:** The above text should have given you an important fact — you aren't expected to remember everything! Professional web developers use tools like MDN Web Docs to look up things they have forgotten all the time. As you'll discover, learning web development is more about problem-solving and learning patterns than it is about learning lots of syntaxes.

#### Videos

There are also a number of sites that have video learning content on them. YouTube is an obvious one, with channels such as Mozilla Layout Land, MozillaDeveloper, and Google ChromeDevelopers providing many useful videos. Many people prefer textual articles for more in-depth learning and reference material, and videos for quick explanations of concepts and new features, but it is really up to you what you prefer to learn from. There is no right and wrong answer here.

#### Interactive code playgrounds

You might be the kind of person that prefers minimal instructions and would prefer to jump straight in and start playing with code. This is also a reasonable approach, and some learning sites tend to favor it. Codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired result was achieved.

Many MDN Web docs reference pages provide interactive examples too, where you can alter the code and see how the live result changes. And there is also nothing wrong with creating your own code examples on your computer, or in an online code editor like JSBin, Codepen, or Glitch. In fact, you'll be called to do so as part of this course when you are learning!

**Note:** Online code editors are also really useful for sharing code you've written, for example, if you are collaborating on learning with someone else who isn't in the same location, or are sending it to someone to ask for help with it. You can share the web address of the example with them so they can see it.

**Note:** You might favor one learning method over the others, but realistically a hybrid approach is probably what you will end up with. And you'll probably come up with other methods than the three we covered above.

### Making a plan

It is a good idea to create a plan to help you achieve what you want to achieve through your learning.

#### A goal statement

It sounds silly, but why not start with a single sentence that says what you want to achieve? The following have different scopes, but are all realistic and achievable:

* I want to become a professional web developer in two years' time.
* I want to learn enough to build a website for my local amateur tennis club.
* I want to learn HTML and CSS so I can expand my job role to take over updating the content on our company website.

The following are not quite as reasonable:

* I want to go from a complete beginner to becoming a senior web developer in three months.
* I want to start my own company and build a social network that will out-perform Facebook, in two years.

#### What do you need to get there?

Once you've worked out your goal, it is a good idea to research what you'll need to achieve the goal. For example:

Materials I need:

* A computer
* Internet access
* Pens and paper

Knowledge I need:

* How to use HTML, CSS, JavaScript, and associated tools and best practices to build websites and web applications (we can definitely help you with this one!).
* How to get a domain, hosting, and use them to put a website or application online.
* How to run a small business.
* How to advertise my business and attract clients.

#### How much time and money will it take?

Estimate the time and cost of getting these things. If you'll need to work to earn money to buy the materials required, then the time to do that will have to be factored in. Once you have a time estimate, you can start to build a plan around your life.

#### How many hours per week do I need to dedicate?

Once you know what you need to do and how long you think it'll take, you can start writing out a plan to achieve your goal. It can be as simple as:

"It'll take me 500 hours to learn what I need to know, and I have a year to do it. If I assume 2 weeks of holiday, I'll need to do work on this for 10 hours per week. I am free on evenings and weekends, so I'll plan my time around those."

How much time you can spend on this of course depends on what your circumstances are. If you are at school, then you've got way more free time than if you have a job and children to provide for. It is still possible to achieve your goals, but you have to be realistic about how quickly you can do it.

If you are doing a university or college course to learn web development, then most of this planning is done for you — lucky you!

When you have worked out a weekly schedule then you should keep a record of what you manage to do each week in a simple spreadsheet or even in a notebook!

Also, it might be a good idea to have some sub-goals worked out to allow you to keep track of where you are more easily. For example:

* HTML and CSS basics learned by summer
* JavaScript basics learned by December
* Example website project built by next April
* etc.

Keep thinking about how much progress you are making, and adjust your plan if needs be.

### Staying motivated

It is hard to stay motivated, especially if you are trying to learn a complex skill like programming or web development. What follows are some tips to stay motivated and keep working:

* **Try to make your work environment as productive as possible**. Get a comfortable desk and chair to work in, make sure you have enough light to see what you are doing, and try to include things that help you concentrate (e.g. mellow music, fragrances, whatever else you need). Don't try to work in a room with distractions — for example a television on, with your friends watching football! Also, leave your mobile phone out of the room — most people are distracted by their phone a lot, so you should leave it somewhere else.
* **Take regular breaks**. It is not good for your motivation to keep working away for hours with no break, especially if you are finding it hard or getting stuck on a problem. That just leads to frustration. It is often better to take a break, move around for a bit, then relax with a drink before getting back to work. And as we said earlier, the diffuse learning you do during that time can often help you to figure out a solution to the problem you were facing. It is also physically bad to work for too long without a break; looking at a monitor for too long can hurt your eyes, and sitting still for too long can be bad for your back or legs. We'd recommend taking a 15-minute break every hour to 90 minutes.
* **Eat, exercise, and sleep**. Eat healthily, get regular exercise, and make sure you get enough sleep. This sounds obvious, but it is easy to forget when you get really into coding. Factor these essential ingredients into your schedule, and make sure you are not scheduling more learning time instead of these things.
* **Give yourself rewards**. It's true that *all work and no play makes Jack a dull boy*. You should try to schedule fun things to do after each learning session, which you'll only have when the learning is over and complete. If you are really into gaming, for example, there is something quite motivating about saying "no gaming tonight unless I get through my 5 hours of learning". Now all you need is willpower. Good luck!
* **Co-learning and demoing**. This won't be an option for everyone, but if at all possible try to learn alongside others. Again, this is easier if you are doing a college course on web development, but perhaps you could convince a friend to learn along with you, or find a local meetup or skill-sharing group? It is really useful and motivating to have someone to discuss ideas with and ask for help, and you should also take time to demo your work. Those shouts of appreciation will spur you on.
### Effective problem-solving

There is no one effective way to solve all problems (and learn all things) associated with web design and development, but there are some general bits of advice that will serve you well in most cases.

#### Break things down into chunks

For a start, when you are trying to implement something specific and it seems really hard to get your head around, you should try to break it down into multiple smaller problems or chunks.

For example, if you are looking at a task of "Build a simple two-column website", you could break it down as follows:

* Create the HTML structure
* Work out basic site typography
* Work out a basic color scheme
* Implement a high-level layout — header, horizontal navigation menu, main content area with main and side columns, and footer
* Implement a horizontal navigation menu
* etc.

Then you could break it down further. For example, "Implement horizontal navigation menu" could be written out as:

* Make a list of menu items that sit horizontally in a line.
* Remove unneeded defaults, like list spacing and bullet points.
* Style hover/focus/active states of menu items appropriately.
* Make the menu items equally spaced along the line.
* Give the menu items enough vertical spacing.
* Make sure the text is centered inside each menu item
* etc.

Each of these problems doesn't seem nearly as difficult to solve as the one big problem you had initially. Now you've just got to go through and solve them all!

#### Learn and recognize the patterns

As we said before, web design/programming is mostly about problem-solving and patterns. Once you have written out what you'll need to do to solve a specific problem, you can start to figure out what technology features to use to solve it. For example, professional web developers have created lots of horizontal navigation menus, so they'll immediately start thinking of a solution like this:

A nav menu is usually created from a list of links, something like:

```html
<ul>
  <li><a href="">First menu item</a></li>
  <li><a href="">Second menu item</a></li>
  <li><a href="">Third menu item</a></li>
  <li><a href="">etc.</a></li>
</ul>
```

To make all the items sit horizontally on a line, the easiest modern way is to use flexbox:

```css
ul {
  display: flex;
}
```

To remove unneeded spacing and bullet points, we can do this:

```css
ul {
  list-style-type: none;
  padding: 0;
}
```

etc.

If you are a complete beginner to web development, you'll have to do some study and web searches and lookup solutions to such problems. If you are a professional web developer you'll probably remember the last time you solved a similar problem, and only have to look up a few bits of the syntax that you forgot since then.

When you find solutions to such problems, it is worth writing down notes on what you did, and keeping some minimal code examples in a directory somewhere so you can look back on previous work.

In addition, the web has developer tools that allow you to look at the code used to build any site on the web. If you don't have a solution to hand, one good research method is to find websites with similar features in the wild, and find out how they did it.

**Note:** Notice how above we talked about the problem we are trying to solve first, and the technology used to solve it second. This is pretty much always the best way to do it — don't start with a cool new technology that you want to use, and try to shoehorn it into the use case.

**Note:** The simplest solution is often the best.

### Getting practice

The more you practice solving a problem, the stronger your brain's neural pathways are in that area, and the easier it becomes to recall the details and the logic of that particular problem.

Keep tinkering with code and getting more practice. If you run out of problems to solve, look up some tests online, do some more courses, or ask your friends and family (or local school or church) if there is anything they'd like you to build for them.

Getting help
------------

Web development requires you to learn a complex set of skills — you are bound to get stuck sometimes and need help. As we said before, even professional developers need regular help working out issues.

There are a variety of ways to get help, and what follows are some tips for doing so more effectively.

### Effective web searches

One important skill to learn is the art of effective web searches — what search terms do you need to use in your favorite search engine to find the articles you need?

It is often fairly obvious what to search for. For example:

* If you want to find out more about responsive web design, you could search for "responsive web design".
* If you want to find out more about a specific technology feature, such as the HTML `<video>` element, or the CSS `background-color` or `opacity` properties, or the JavaScript `Date.setTime()` method, you should just search for the feature's name.
* If you are looking for some more specific information, you can add other keywords as modifiers, for example "<video> element autoplay attribute", or "Date.setTime parameters".

If you want to search for something that has less obvious buzzwords, you need to think about what is most likely to return what you want.

* Run code after several promises are fulfilled
* Play a video stream from a webcam in the browser
* Create a linear gradient in the background of your element

#### Error messages

If you are having a problem with some code and a specific error message is coming up, it is often a good idea to just copy the error message into your search engine and use it as the search term. If other people have had the same problem, there'll likely be some articles or blog posts about it in places like MDN or Stack Overflow.

**Note:** Stack Overflow is a really useful website — it is basically a huge database of curated questions and answers on various technologies and related techniques. You'll probably find an answer that answers your question. If not, you can ask a question and see if anyone can help you.

#### Browser testing

It is often a good idea to see if your problem is affecting all browsers, or whether it only occurs in one or a small number of browsers. If it is only affecting one browser, for example, you can use that browser to narrow down the search. Example searches might look like:

* <video> playback doesn't work in the iOS browser.
* Firefox doesn't seem to support the Beetlejuice API.
### Using MDN

The site you are already on has a wealth of information available to you — both reference material for looking up code syntax, and guides/tutorials for learning techniques.

We've provided most of the answers to the questions you'll have about web development fundamentals in this part of MDN. If you are stuck, it is good to re-read the associated articles to see if you missed anything.

If you are not sure which article to read then try searching MDN for some related keywords (as indicated above), or try a general web search. To search on MDN you can either use the site's in-built search functionality or better still, use your favorite search engine and put "mdn" in front of the search term. For example, "mdn responsive web design" or "mdn background-color".

### Other online resources

We already mentioned Stack Overflow, but there are other online resources that can help.

It is good to find a community to be part of, and you'll get a lot of respect if you try to help others answer their questions as well as asking your own. Other good examples include:

* MDN Discourse
* Sitepoint Forums
* webdeveloper.com Forums

However, it also makes sense to find useful groups on social networking sites such as Twitter or Facebook. Look for groups that discuss web development subjects you are interested in and join up. Follow people on Twitter you know are influential, smart, or just plain seem to share lots of useful tips.

### Physical meetups

Lastly, you should try attending some physical meetups to meet other like-minded people, especially ones that cater to beginners. meetup.com is a good place to find local physical meetups, and you could also try your local press/what's on sites.

You could also try attending full-fledged web conferences. While these can be expensive, you could try volunteering at them, and many conferences offer reduced rate tickets, for example, student or diversity tickets.

See also
--------

* Coursera: Learning to learn
* Freecodecamp
* Codecademy


Writing mathematics with MathML - Learn web development

Writing mathematics with MathML
===============================

Mathematical Markup Language — or MathML — is the markup language used to write mathematical formulas in web pages using fractions, scripts, radicals, matrices, integrals, series, etc. Although it was originally designed as an independent XML language, MathML is generally embedded inside HTML documents and can be seen as an extension of HTML.

**Warning:** In practice, MathML content is generated from lightweight markup languages (e.g. LaTeX) or using graphical user interface: if you just need to integrate mathematical formulas in your web pages, the tips from the Authoring MathML page should be enough.

#### 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**

Prerequisites
-------------

Before attempting to learn MathML, it is assumed that you have some basic knowledge of HTML and CSS. Consequently, you are strongly advised to get familiar with at least these two technologies first. Start by working through the following modules:

* Getting started with the Web
* Introduction to HTML
* Introduction to CSS

Some familiarity with mathematical notations and TeX rendering rules might also come in handy, even though required concepts will be explained as needed.

Modules
-------

MathML first steps

MathML is the markup language used to write mathematical formulas in Web pages. This module provides a gentle beginning to your path towards MathML mastery with the basics of how it works, what the syntax looks like, and how you can start using it inside HTML.

See also
--------

MathML on MDN

The main entry point for MathML documentation on MDN, where you'll find detailed reference documentation for all features of the MathML language. Want to know all the values a property can take? This is a good place to go.


Server-side website programming - Learn web development

Server-side website programming
===============================

The ***Dynamic Websites*** – **Server-side programming** topic is a series of modules that show how to create dynamic websites; websites that deliver customized information in response to HTTP requests. The modules provide a general introduction to server-side programming, along with specific beginner-level guides on how to use the Django (Python) and Express (Node.js/JavaScript) web frameworks to create basic applications.

Most major websites use some kind of server-side technology to dynamically display data as required. For example, imagine how many products are available on Amazon, and imagine how many posts have been written on Facebook. Displaying all of these using different static pages would be extremely inefficient, so instead such sites display static templates (built using HTML, CSS, and JavaScript), and then dynamically update the data displayed inside those templates when needed, such as when you want to view a different product on Amazon.

In the modern world of web development, learning about server-side development is highly recommended.

Learning pathway
----------------

Getting started with server-side programming is usually easier than client-side development, because dynamic websites tend to perform a lot of very similar operations (retrieving data from a database and displaying it in a page, validating user-entered data and saving it in a database, checking user permissions and logging users in, etc.), and are constructed using web frameworks that make these and other common web server operations easy.

Basic knowledge of programming concepts (or of a particular programming language) is useful, but not essential. Similarly, expertise in client-side coding is not required, but a basic knowledge will help you work better with the developers creating your client-side web "front end".

You will need to understand "how the web works". We recommend that you first read the following topics:

* What is a web server
* What software do I need to build a website?
* How do you upload files to a web server?

With that basic understanding, you'll be ready to work your way through the modules in this section.

Modules
-------

This topic contains the following modules. You should start with the first module, then go on to one of the following modules, which show how to work with two very popular server-side languages using appropriate web frameworks.

Server-side website programming first steps

This module provides technology-agnostic information about server-side website programming such as "what is it?", "how does it differ from client-side programming?", and "why is it useful?". This module also outlines some of the more popular server-side web frameworks and gives guidance on how to select the best one for your site. Lastly, an introduction to web server security is provided.

Django Web Framework (Python)

Django is an extremely popular and fully featured server-side web framework, written in Python. The module explains why Django is such a good web server framework, how to set up a development environment and how to perform common tasks with it.

Express Web Framework (Node.js/JavaScript)

Express is a popular web framework, written in JavaScript and hosted within the Node.js runtime environment. The module explains some of the key benefits of this framework, how to set up your development environment and how to perform common web development and deployment tasks.

See also
--------

Node server without framework

This article provides a simple static file server built with pure Node.js, for those of you not wanting to use a framework.

Properly configuring server MIME types

Configuring your server to send the correct MIME types (also known as media types or content types) to browsers is important for browsers to be able to properly process and display the content. It is also important to prevent malicious content from masquerading as benign content.


Structuring the web with HTML - Learn web development

Structuring the web with HTML
=============================

To build websites, you should know about HTML — the fundamental technology used to define the structure of a webpage. HTML is used to specify whether your web content should be recognized as a paragraph, list, heading, link, image, multimedia player, form, or one of many other available elements or even a new element that you define.

#### 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**

Prerequisites
-------------

Before starting this topic, you should have at least basic familiarity with using computers and using the web passively (i.e., just looking at it, consuming the content). You should have a basic work environment set up as detailed in Installing basic software, and understand how to create and manage files, as detailed in Dealing with files — both are parts of our Getting started with the web complete beginner's module.

It is recommended that you work through Getting started with the web before attempting this topic. However, this isn't absolutely necessary; much of what is covered in the HTML basics article is also covered in our Introduction to HTML module, albeit in a lot more detail.

After learning HTML, you can then move on to learning about more advanced topics such as:

* CSS, and how to use it to style HTML (for example, alter your text size and fonts used, add borders and drop shadows, layout your page with multiple columns, add animations and other visual effects).
* JavaScript, and how to use it to add dynamic functionality to web pages (for example, find your location and plot it on a map, make UI elements appear/disappear when you toggle a button, save users' data locally on their computers, and much more).
Modules
-------

This topic contains the following modules, in a suggested order for working through them. You should definitely start with the first one.

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.

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.

Solving common HTML problems
----------------------------

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 webpage: dealing with titles, adding images or videos, emphasizing content, creating a basic form, etc.

See also
--------

Web forms

This module provides a series of articles that will help you master the essentials of web forms. Web forms are a very powerful tool for interacting with users — most commonly they are used for collecting data from users, or allowing them to control a user interface. However, for historical and technical reasons it's not always obvious how to use them to their full potential. We'll cover all the essential aspects of Web forms including marking up their HTML structure, styling form controls, validating form data, and submitting data to the server.

HTML (HyperText Markup Language) on MDN

The main entry point for HTML reference documentation on MDN, including detailed element and attribute references — if you want to know what attributes an element has or what values an attribute has, for example, this is a great place to start.