-
-```
-
-## 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
-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-markup-elements.md b/site/content/docs/02-template-syntax/02-markup-elements.md new file mode 100644 index 0000000000..30c53dfcb2 --- /dev/null +++ b/site/content/docs/02-template-syntax/02-markup-elements.md @@ -0,0 +1,134 @@ +--- +title: Markup elements +--- + +## Tags + +A lowercase tag, like ``, denotes a regular HTML element. A capitalised tag, such as `` or ``, indicates a _component_.
+
+```svelte
+
+
+
`. 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
+
+
+```
+
+## 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
+Hello {name}!
+{a} + {b} = {a + b}.
+ +{/^[A-Za-z ]+$/.test(value) ? x : y}
+```
+
+## Comments
+
+You can use HTML comments inside components.
+
+```svelte
+