diff --git a/site/content/docs/02-template-syntax/01-dot-svelte-files.md b/site/content/docs/02-template-syntax/01-svelte-components.md
similarity index 71%
rename from site/content/docs/02-template-syntax/01-dot-svelte-files.md
rename to site/content/docs/02-template-syntax/01-svelte-components.md
index 61da7adaa2..487abc8afc 100644
--- a/site/content/docs/02-template-syntax/01-dot-svelte-files.md
+++ b/site/content/docs/02-template-syntax/01-svelte-components.md
@@ -1,5 +1,5 @@
---
-title: .svelte files
+title: Svelte components
---
Components are the building blocks of Svelte applications. They are written into `.svelte` files, using a superset of HTML.
@@ -342,134 +342,3 @@ In that case, the `
```
-
-## Tags
-
-A lowercase tag, like `
`, denotes a regular HTML element. A capitalised tag, such as `` or ``, indicates a _component_.
-
-```svelte
-
-
-
-
-
-```
-
-## Attributes and props
-
-By default, attributes work exactly like their HTML counterparts.
-
-```svelte
-
-
-
-```
-
-As in HTML, values may be unquoted.
-
-```svelte
-
-```
-
-Attribute values can contain JavaScript expressions.
-
-```svelte
-page {p}
-```
-
-Or they can _be_ JavaScript expressions.
-
-```svelte
-
-```
-
-Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
-
-All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
-
-```svelte
-
-
This div has no title attribute
-```
-
-An expression might include characters that would cause syntax highlighting to fail in regular HTML, so quoting the value is permitted. The quotes do not affect how the value is parsed:
-
-```svelte
-
-```
-
-When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
-
-```svelte
-
-
-
-```
-
-By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
-
-As with elements, `name={name}` can be replaced with the `{name}` shorthand.
-
-```svelte
-
-```
-
-_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
-
-An element or component can have multiple spread attributes, interspersed with regular ones.
-
-```svelte
-
-```
-
-_`$$props`_ references all props that are passed to a component, including ones that are not declared with `export`. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.
-
-```svelte
-
-```
-
-_`$$restProps`_ contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as _`$$props`_, and is likewise not recommended.
-
-```svelte
-
-```
-
-> The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable.
-
-> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example, ``, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to ``.
-
-> Another example is ``. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `` to make the image lazily loaded.
-
-## Text expressions
-
-```svelte
-{expression}
-```
-
-Text can also contain JavaScript expressions:
-
-> If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
-
-```svelte
-
Hello {name}!
-
{a} + {b} = {a + b}.
-
-
{/^[A-Za-z ]+$/.test(value) ? x : y}
-```
-
-## Comments
-
-You can use HTML comments inside components.
-
-```svelte
-
Hello world
-```
-
-Comments beginning with `svelte-ignore` disable warnings for the next block of markup. Usually, these are accessibility warnings; make sure that you're disabling them for a good reason.
-
-```svelte
-
-
-```
diff --git a/site/content/docs/02-template-syntax/02-basic-markup.md b/site/content/docs/02-template-syntax/02-basic-markup.md
new file mode 100644
index 0000000000..83f11861e5
--- /dev/null
+++ b/site/content/docs/02-template-syntax/02-basic-markup.md
@@ -0,0 +1,134 @@
+---
+title: Basic markup
+---
+
+## Tags
+
+A lowercase tag, like `
`, denotes a regular HTML element. A capitalised tag, such as `` or ``, indicates a _component_.
+
+```svelte
+
+
+
+
+
+```
+
+## Attributes and props
+
+By default, attributes work exactly like their HTML counterparts.
+
+```svelte
+
+
+
+```
+
+As in HTML, values may be unquoted.
+
+```svelte
+
+```
+
+Attribute values can contain JavaScript expressions.
+
+```svelte
+page {p}
+```
+
+Or they can _be_ JavaScript expressions.
+
+```svelte
+
+```
+
+Boolean attributes are included on the element if their value is [truthy](https://developer.mozilla.org/en-US/docs/Glossary/Truthy) and excluded if it's [falsy](https://developer.mozilla.org/en-US/docs/Glossary/Falsy).
+
+All other attributes are included unless their value is [nullish](https://developer.mozilla.org/en-US/docs/Glossary/Nullish) (`null` or `undefined`).
+
+```svelte
+
+
This div has no title attribute
+```
+
+An expression might include characters that would cause syntax highlighting to fail in regular HTML, so quoting the value is permitted. The quotes do not affect how the value is parsed:
+
+```svelte
+
+```
+
+When the attribute name and value match (`name={name}`), they can be replaced with `{name}`.
+
+```svelte
+
+
+
+```
+
+By convention, values passed to components are referred to as _properties_ or _props_ rather than _attributes_, which are a feature of the DOM.
+
+As with elements, `name={name}` can be replaced with the `{name}` shorthand.
+
+```svelte
+
+```
+
+_Spread attributes_ allow many attributes or properties to be passed to an element or component at once.
+
+An element or component can have multiple spread attributes, interspersed with regular ones.
+
+```svelte
+
+```
+
+_`$$props`_ references all props that are passed to a component, including ones that are not declared with `export`. It is not generally recommended, as it is difficult for Svelte to optimise. But it can be useful in rare cases – for example, when you don't know at compile time what props might be passed to a component.
+
+```svelte
+
+```
+
+_`$$restProps`_ contains only the props which are _not_ declared with `export`. It can be used to pass down other unknown attributes to an element in a component. It shares the same optimisation problems as _`$$props`_, and is likewise not recommended.
+
+```svelte
+
+```
+
+> The `value` attribute of an `input` element or its children `option` elements must not be set with spread attributes when using `bind:group` or `bind:checked`. Svelte needs to be able to see the element's `value` directly in the markup in these cases so that it can link it to the bound variable.
+
+> Sometimes, the attribute order matters as Svelte sets attributes sequentially in JavaScript. For example, ``, Svelte will attempt to set the value to `1` (rounding up from 0.5 as the step by default is 1), and then set the step to `0.1`. To fix this, change it to ``.
+
+> Another example is ``. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `` to make the image lazily loaded.
+
+## Text expressions
+
+```svelte
+{expression}
+```
+
+Text can also contain JavaScript expressions:
+
+> If you're using a regular expression (`RegExp`) [literal notation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp#literal_notation_and_constructor), you'll need to wrap it in parentheses.
+
+```svelte
+
Hello {name}!
+
{a} + {b} = {a + b}.
+
+
{/^[A-Za-z ]+$/.test(value) ? x : y}
+```
+
+## Comments
+
+You can use HTML comments inside components.
+
+```svelte
+
`. Svelte will set the img `src` before making the img element `loading="lazy"`, which is probably too late. Change this to `