# HTML Standard contributor guidelines
These are the guidelines for contributing to the HTML Standard. First see the [WHATWG Contributor Guidelines](https://github.com/whatwg/meta/blob/main/CONTRIBUTING.md).
The HTML Standard is quite complex and people notice minor and larger issues with it all the time. We'd love your help fixing these. Pull requests for typographical and grammar errors are also most welcome.
We label [good first issues](https://github.com/whatwg/html/labels/good%20first%20issue) that you could help us fix, to get a taste for how to submit pull requests, how the build process works, and so on.
We'd be happy to mentor you through this process. If you're interested and need help getting started, leave a comment on the issue or bug, or [ask around](https://whatwg.org/chat). The [FAQ](FAQ.md) may also be helpful.
## Pull requests
In short, change `source` and submit your patch, with a [good commit message](https://github.com/erlang/otp/wiki/Writing-good-commit-messages). Try to follow the source formatting rules below.
Note that `source` is written in [Wattsi Syntax](https://github.com/whatwg/wattsi/blob/main/Syntax.md), a dialect of HTML, which is eventually compiled into the deployed standard by a tool called [Wattsi](https://github.com/whatwg/wattsi).
Please add your name to the Acknowledgments section (search for ``)
Finally, a line may exceed 100 characters when there is nowhere left to break it: a long URL, a long `data-x` value, or a run of markup with no whitespace in it.
#### Wrapping opportunities
Using newlines between "inline" element tag names and their content is forbidden. (This actually alters the content, by adding spaces.) That is,
```html
Parse error. Create a new DOCTYPE token. Set its force-quirks flag to …
```
is fine and
```html
Parse error. Create a new DOCTYPE token. Set its
force-quirks flag to …
```
is not.
Using newlines between attributes and inside attribute values that contain whitespace is allowed. Always wrap after putting the maximum number of characters on a single line within these guidelines.
```html
A base element that is the first base element with an href content attribute in a document tree has a
```
### Element hierarchy
An `
` element always has a `` element inside it, unless it's a child of `
`.
List items (`- `, `
- `, and `
- `) always start on their own line with a newline between them
and the previous list item. No extra newline at the start or end of the list though:
```html
Let x be 1.
Increment x by 2.
```
If a "block" element contains a single "block" element, do not put it on a new line.
Do not indent for anything except a new "block" element. For instance
```html
Let corsAttributeState be the current state of the element's crossorigin content attribute.
```
is not indented, but
```html
-
For each element in candidate elements, run the following
substeps:
```
is.
End tags must not be omitted (except where it is consistent to do so) and attribute values must be quoted (use double quotes).
### Algorithms
[The Infra Standard](https://infra.spec.whatwg.org/#algorithms) sets out the basics of algorithms, but the HTML spec goes way beyond that.
When contributing to HTML, we attempt to mark up algorithms and variable scopes. The main visible benefit of this is that it gives "var highlighting", where clicking on a `` element highlights all other references to it. Behind the scenes, it also enables various static analysis checks. Do your best to follow the below guidelines when introducing new algorithms or modifying existing ones.
HTML's algorithm system is based on, and intended to be compatible with, [that of Bikeshed](https://speced.github.io/bikeshed/#var-and-algorithms) (a build tool often used for other specifications).
#### The markup
Each algorithm should be wrapped in ` ...
`. The contents of this `` should not be indented.
The 'body' of an algorithm will normally be preceded by a 'preamble', some text that gives:
* the name of the algorithm, or some indication of how/when it is invoked;
* the names and/or types of any parameters; and
* maybe the type of the return value, if any.
Include this preamble within the `
`. Sometimes the preamble will be preceded by other stuff (not specific to the algorithm) in the same `
`. It's generally okay to include the other stuff within the `
`, but consider splitting it off into its own `
`, so that the `
` can be focused on the algorithm.
If the algorithm is followed by one or more paragraphs that refer to any of the algorithm's variables, include those paragraphs within the `
`, so that they can participate in var-highlighting.
Sometimes, a set of related algorithms (e.g., the 4 associated algorithms of a reflected target) are presented in a `
`, where each `- /
- ` pair are (roughly speaking) the preamble and body of an algorithm. In these cases, each `
- /
- ` pair is wrapped in `
...
`.
---
According to the Infra standard, "very short algorithms can be declared and specified using a single sentence". (The HTML spec sometimes strains the idea of "very short".) So an algorithm might be contained by a single `` element, and you might be tempted to just add the `algorithm` attribute to the `
`. But we prefer
```html
```
over
```html
...
```
as it makes refactoring easier, and is easy to spot.
In fact, a single `` can contain two or more single-sentence algorithms. For instance, this sometimes happens with the getter and setter steps of an IDL attribute. You might think that each algorithm should get its own markup, but it's okay to put a single `
` around the multiple algorithms in the `
`.
---
In Bikeshed, the `algorithm` attribute has an optional value, which supplies the name of the algorithm. In the HTML spec, don't give the `algorithm` attribute a value.
#### What qualifies as an algorithm?
Algorithms are easy to spot when the body is a block element like `
` or `` (when used like a 'switch' statement). But the existence of single-sentence algorithms (see above) can make it harder to know when you've written an algorithm.
Here are some categories of algorithms (roughly from commonest to rarest):
* Generally, if you have a term in a `` element, followed by a description of how to 'implement' that term, that's probably an algorithm. Likewise if the term is in a `` element; the `` might be elsewhere in the spec, or even in a different spec.
* Most Web IDL interface members (attributes and operations) have associated behavior. Any text that defines such behavior is an algorithm, even if it just says that an IDL attribute reflects a content attribute, or that a method does nothing.
* Text of roughly the form
```html
When [something happens], the user agent must [do something].
```
or
```html
When [something happens], [do something].
```
is probably an algorithm.
* The behavior of each tokenization state is an algorithm. Similarly for the behavior of each insertion mode.
* The JavaScript spec declares some internal methods and implementation-defined abstract operations, but leaves their definitions to the 'host'. Any text that defines such JavaScript-related behavior is an algorithm. Typically, the method/operation's signature (name and parameter list) is given in an `` element; include this in the ``.
* There are format-definitions, which typically start with wording such as:
```html
A string is a
foo if it consists of...
```
or
```html
A
foo is a string containing...
```
These aren't algorithms per se, but they're wrapped in `
` by special dispensation.
* Even algorithms that appear in examples should be marked up.
Note that this list isn't exhaustive. There are things that are clearly algorithms that don't fit into any of the above categories. There are cases where it's unclear.
And it's possible that we'll change our minds about what should be marked as an algorithm.
### `
` and `var-scope`
For every `` element, one or more of the following should be true:
* It has the `ignore` attribute.
* It is within an element with the `var-scope` attribute.
* It is within an element with the `algorithm` attribute.
* It is within a `` element with `class="domintro"`.
The build process will complain if it finds an 'unscoped' ``, one for which none of the above is true.
Most of the time, any `` element that you introduce will be within a `` or a `
`. But for other cases, the question arises as to whether to mark a `` with `ignore` or mark an ancestor with `var-scope` (possibly creating a `` to have the `var-scope`). Here are some guidelines:
- When you have a set of consecutive algorithms that share variables, put `
...
` around the algorithms and any preamble that mentions the shared variables.
- In any context that has two or more `
` elements with the same variable-name, mark the context with `var-scope`, or put a `` around it, so that the `
`s will participate in var-highlighting.
- Even when a context has only single-use ``s, it can be easier (if there's enough of them) to mark the context `var-scope` rather than mark each `` as `ignore`.
- But if a context has only one ``, or two with different variable-names, probably use `ignore`.
But there's an additional situation in which to use `ignore`. In addition to looking for unscoped ``s, the build process will examine the ``s within each algorithm. Typically, a given variable-name will appear at least twice in an algorithm: once when it's declared/defined, and one or more times when it's used. So it's suspicious if a variable-name appears only *once* within an algorithm, and the build process will raise a warning about it. If you have a `` that should be ignored by this check, mark it with `ignore`.
### Common mistakes around prose style
Most of the style conventions in this section are covered by Infra or the WHATWG style guide, but the editors often have to correct them in contributions anyway.
- Use the [algorithm declaration conventions](https://infra.spec.whatwg.org/#algorithm-declaration) in the Infra Standard.
- **"If foo, then bar"** instead of "If foo, bar". [Example](https://github.com/whatwg/html/pull/10269#discussion_r1568114777).
- **"Abort these steps" vs "return"**: Use "return" to exit a whole algorithm or method. Use "abort these steps" to terminate a set of substeps or [in parallel](https://html.spec.whatwg.org/C#in-parallel) steps and continue at the next step in the "outer" procedure. See examples in [this section on parallelism](https://html.spec.whatwg.org/C#parallelism) and elsewhere throughout the spec, as well as https://github.com/whatwg/infra/issues/258.
- **Usage of positional, optional, and named[^1] (i.e., linkable) parameters**. Follow the [algorithm parameter conventions](https://infra.spec.whatwg.org/#algorithm-params) in the Infra Standard. In particular, use named/linkable optional parameters in your algorithm declaration when callsites pass in values for them while omitting earlier-positioned optional parameters.
- When **nesting 3+ conditions** in a list, the style should look like so:
```html
Foo.
-
If (all|any) of the following are true:
condition 1;
condition 2;
condition 3; (and|or)
condition 4,
then…
Baz.
```
- **Conjugate algorithm invocations inline** so they read more naturally in English, instead of more procedurally. For [example](https://github.com/whatwg/html/pull/9778#discussion_r1574075112), use `the result of getting the popcorn` instead of `the result of running get the popcorn`.
- Prefer American English to British English; see the [WHATWG style guide](https://whatwg.org/style-guide).
[^1]: For example, see parameters like https://html.spec.whatwg.org/C#navigation-referrer-policy, which are named/linkable parameters in an algorithm's declaration.