Close void elements

.htmlvalidate.json

@@ -2,6 +2,7 @@
     "extends": ["html-validate:recommended"],
     "rules": {
         "no-inline-style": "off",
+        "void-style": "off",
         "wcag/h37": "off"
     }
 }

content/en/shader-editor/window-layout/graph-editor.md

@@ -10,7 +10,7 @@ The Graph Editor displays the currently selected graph. This is where nodes are
 
 | How To | |
 |---|---|
-| Create a node | Drag an entry from the [Nodes Pane][2] and drop it on the Graph Editor work area.<br>Drag a sub-graph from the [Assets Pane][3] onto the Graph Editor work area. |
+| Create a node | Drag an entry from the [Nodes Pane][2] and drop it on the Graph Editor work area.<br />Drag a sub-graph from the [Assets Pane][3] onto the Graph Editor work area. |
 | Select a node | Left click the node. |
 | Delete a node | Select the node and either press delete key or use the node context menu 'Delete' option. |
 | Move a node | Left click and drag the node. |

content/en/shader-editor/window-layout/info-pane.md

@@ -4,7 +4,7 @@ layout: shader-editor-page.hbs
 position: 1
 ---
 
-<img loading="lazy" src="/images/shader-editor/info-pane.png" style="float: right; padding: 20px; padding-top: 0px; border: 1px black;">
+<img loading="lazy" src="/images/shader-editor/info-pane.png" style="float: right; padding: 20px; padding-top: 0px; border: 1px black;" />
 
 The Info Pane shows helpful information for the UI element currently under the mouse cursor.
 

content/en/shader-editor/window-layout/inspector-pane/graph-inspector.md

@@ -4,7 +4,7 @@ layout: shader-editor-page.hbs
 position: 1
 ---
 
-<img loading="lazy" src="/images/shader-editor/inspector-pane-graph.png" style="float: right; padding: 20px; padding-top: 0px;">
+<img loading="lazy" src="/images/shader-editor/inspector-pane-graph.png" style="float: right; padding: 20px; padding-top: 0px;" />
 
 The Graph Inspector is where a graph's settings are configured.
 

content/en/shader-editor/window-layout/inspector-pane/material-inspector.md

@@ -4,7 +4,7 @@ layout: shader-editor-page.hbs
 position: 3
 ---
 
-<img loading="lazy" src="/images/shader-editor/inspector-pane-material.png" style="float: right; padding: 20px; padding-top: 0px;">
+<img loading="lazy" src="/images/shader-editor/inspector-pane-material.png" style="float: right; padding: 20px; padding-top: 0px;" />
 
 The Material Inspector is where a material's settings are configured.
 

content/en/shader-editor/window-layout/inspector-pane/node-inspector.md

@@ -4,7 +4,7 @@ layout: shader-editor-page.hbs
 position: 2
 ---
 
-<img loading="lazy" src="/images/shader-editor/inspector-pane-node.png" style="float: right; padding: 20px; padding-top: 0px;">
+<img loading="lazy" src="/images/shader-editor/inspector-pane-node.png" style="float: right; padding: 20px; padding-top: 0px;" />
 
 The Node Inspector is where a node's settings are configured.
 

content/en/shader-editor/window-layout/inspector-pane/texture-inspector.md

@@ -4,7 +4,7 @@ layout: shader-editor-page.hbs
 position: 4
 ---
 
-<img loading="lazy" src="/images/shader-editor/inspector-pane-texture.png" style="float: right; padding: 20px; padding-top: 0px;">
+<img loading="lazy" src="/images/shader-editor/inspector-pane-texture.png" style="float: right; padding: 20px; padding-top: 0px;" />
 
 The Texture Inspector is where textures are configured.
 

content/en/shader-editor/window-layout/nodes-pane.md

@@ -4,7 +4,7 @@ layout: shader-editor-page.hbs
 position: 2
 ---
 
-<img loading="lazy" src="/images/shader-editor/nodes-pane.png" style="float: right; padding: 20px; padding-top: 0px;">
+<img loading="lazy" src="/images/shader-editor/nodes-pane.png" style="float: right; padding: 20px; padding-top: 0px;" />
 
 The Nodes Pane lists the built-in nodes available for constructing graphs. Nodes are grouped into sub-sections by category.
 

content/en/tutorials/Using-forces-on-rigid-bodies.md

@@ -71,7 +71,7 @@ We set up a basic scene with a spotlight, a cube (entity with model, rigidbody,
 
 Some Editor settings were set to prevent the constant application of unbalanced forces (and so prevent a body from continuously accelerating and moving out of control). We enabled angular damping on the cube's attribute editor as well as friction on both the cube and floor. Linear damping is not used here, however it can be used to simulate air resistance, and of course decelerations can be applied as required via code.
 
-<img loading="lazy" src="/images/tutorials/forces/rigidbody_settings.jpg" alt="rigidbody_settings">
+<img loading="lazy" src="/images/tutorials/forces/rigidbody_settings.jpg" alt="rigidbody_settings" />
 
 ## Teleporting a Body
 

content/en/tutorials/basic-materials.md

@@ -45,8 +45,8 @@ Changing the color of the material is a good start, but you'll quickly want more
 
 Download & save these sample textures:
 
-<a href="/downloads/proto_orange.png"><img loading="lazy" style="float:left;" src="/downloads/proto_orange.png" alt="Sample diffuse map texture" width="128"></a>
-<a href="/downloads/proto_gray_n.png"><img loading="lazy" style="padding-left: 20px; margin: 0px" src="/downloads/proto_gray_n.png" alt="Sample normal map texture" width="128"></a>
+<a href="/downloads/proto_orange.png"><img loading="lazy" style="float:left;" src="/downloads/proto_orange.png" alt="Sample diffuse map texture" width="128" /></a>
+<a href="/downloads/proto_gray_n.png"><img loading="lazy" style="padding-left: 20px; margin: 0px" src="/downloads/proto_gray_n.png" alt="Sample normal map texture" width="128" /></a>
 
 Then upload them to your project by dragging the files into the Editor.
 

content/en/tutorials/collision-and-triggers.md

@@ -51,7 +51,7 @@ For this demo, the important property is the **Type**. You can pick one of three
 
 The first Entity we need in this tutorial is the green block that forms the ground.
 
-<img loading="lazy" src="/images/tutorials/collision/ground_setup.png" width="300">
+<img loading="lazy" src="/images/tutorials/collision/ground_setup.png" width="300" />
 
 You can see in the attribute panel, that it has *render*, *collision* and *rigidbody* components. We've increased the Entity and the *collision* box properties so that it is nice and large. And we've also slightly increased the friction and restitution properties. This means that the surface is slightly rougher and slightly bouncier than the defaults.
 
@@ -98,7 +98,7 @@ In this case, when the trigger is fired, we reset the penetrating Entity back up
 
 We've set the ground to **Static**, now we'll create the falling objects and make sure they are **Dynamic**.
 
-<img loading="lazy" src="/images/tutorials/collision/box_setup.png" width="300">
+<img loading="lazy" src="/images/tutorials/collision/box_setup.png" width="300" />
 
 This is the *rigidbody* and *collision* setup for the box component, the sphere and capsule are setup in the same way.
 

content/en/tutorials/light-halos.md

@@ -25,7 +25,7 @@ This texture will form the basis of the glow.
 
 ### Material
 
-<img loading="lazy" src="/images/tutorials/intermediate/light-halos/material.png" height="600">
+<img loading="lazy" src="/images/tutorials/intermediate/light-halos/material.png" height="600" />
 
 The material for the light halo uses the blob texture in the emissive slot. Use the **tint** property to set the color of your halo. We've also enabled blending in the Opacity slot and it also uses the blob texture with **Color Channel** set to **R**.
 

content/en/tutorials/manipulating-entities.md

@@ -17,8 +17,8 @@ One of the most common operations you will need to perform on Entities is to cha
 
 An important part of understanding how to move and manipulate Entities is understanding local and world co-ordinate systems. The world co-ordinate systems is shared by all Entities, it has a fixed origin `(0,0,0)` and a fixed orientation - where `(0,1,0)` is up. The local co-ordinate system relative to the Entity itself. So the local origin is the Entity position, and the orientation follows the orientation of the Entity.
 
-<img loading="lazy" src="/images/tutorials/world.jpg" style="float:left;" alt="World co-ordinates">
-<img loading="lazy" src="/images/tutorials/local.jpg" style="float:right;" alt="Local co-ordinates">
+<img loading="lazy" src="/images/tutorials/world.jpg" style="float:left;" alt="World co-ordinates" />
+<img loading="lazy" src="/images/tutorials/local.jpg" style="float:right;" alt="Local co-ordinates" />
 <div style="clear:both"></div>
 
 *World and Local co-ordinate systems*

content/en/tutorials/real-time-multiplayer.md

@@ -98,11 +98,11 @@ This will log whatever data is sent to the server when `playerJoined` is emitted
 
 For this demo, we’re aiming to have players move around with others in real time, so we'll need to create an environment. Start by create an entity to use as a ground, and add a collision box and static rigidbody. Here is what the settings on the ground entity should look like:
 
-<img loading="lazy" src="/images/tutorials/multiplayer/ground_entity.png" width="360">
+<img loading="lazy" src="/images/tutorials/multiplayer/ground_entity.png" width="360" />
 
 Next we’ll need a player to control. Create a new capsule and call it `Player`. add a dynamic rigidbody and collision box, and change the rigid body settings to match the picture below.
 
-<img loading="lazy" src="/images/tutorials/multiplayer/player_entity.png" width="360">
+<img loading="lazy" src="/images/tutorials/multiplayer/player_entity.png" width="360" />
 
 Duplicate the player entity and rename it as 'Other'. Uncheck the `Enabled` box on this new entity so that it's disabled to begin with.  This is the entity we'll be using to simulate other players in the game.
 

content/en/tutorials/ui-elements-buttons.md

@@ -33,27 +33,27 @@ There are two ways to add a button to the scene.
 
 This is the easiest way to add a button to the scene as it creates the necessary entities, components and preconfigures the properties.
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/adding-button-via-hierarchy.gif">
+<img loading="lazy" src="/images/tutorials/ui/buttons/adding-button-via-hierarchy.gif" />
 
 ### With an existing Element
 
 If there is an existing Element that we would like to turn into a button, we can add Button component to it in the Inspector panel and configure it ourselves.
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/adding-button-via-inspector.gif" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/adding-button-via-inspector.gif" width="300" />
 
 Remember to enable Use Input on the Element component so the user can interact with it:
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/use-input-element.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/use-input-element.png" width="300" />
 
 And set the Image Entity property on the Button component to be same Entity that the Element component is on.
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/set-image-entity-button.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/set-image-entity-button.png" width="300" />
 
 ## Button setup
 
 Let's take a closer look at the first button in the example project:
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/button.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/button.png" width="300" />
 
 The button has 3 components:
 
@@ -63,19 +63,19 @@ The button has 3 components:
 
 The button Entity also has a Text Element as a child for showing text (this is optional depending on the style of your button).
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/text-element.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/text-element.png" width="300" />
 
 The Element's type is Image and it's anchored to the bottom of the screen.
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/bottom-anchor-pivot.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/bottom-anchor-pivot.png" width="300" />
 
 After anchoring the button we give it an offset from the bottom by simply moving it up.
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/offset-position.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/offset-position.png" width="300" />
 
 We also have Use Input enabled in order to interact with the button.
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/use-input-element.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/use-input-element.png" width="300" />
 
 ### Changing how the button looks on interaction
 
@@ -91,21 +91,21 @@ This can be done via two Transition Modes:
 
 Tinting the button color in each state is the easiest method to add some user feedback when they interact with it. In the project, the High Quality button has the following setup:
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/high-quality-button-setup.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/high-quality-button-setup.png" width="300" />
 
 With the following effect:
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/high-quality-button-effect.gif">
+<img loading="lazy" src="/images/tutorials/ui/buttons/high-quality-button-effect.gif" />
 
 #### Changing the Sprite
 
 We can also change the sprite image of the button in the different states for cases where you may want the button to change shape or want to give a look of the button being 'pressed' into the screen. The Low Quality button has the following setup:
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/low-quality-button-setup.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/low-quality-button-setup.png" width="300" />
 
 With the following effect:
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/low-quality-button-effect.gif">
+<img loading="lazy" src="/images/tutorials/ui/buttons/low-quality-button-effect.gif" />
 
 ### Button events
 
@@ -140,7 +140,7 @@ There are other events that can be listened to such as `mouseenter` and `mousele
 
 These events will only fire if Use Input is enabled on the Element component so make sure that has been ticked in the inspector.
 
-<img loading="lazy" src="/images/tutorials/ui/buttons/use-input-element.png" width="300">
+<img loading="lazy" src="/images/tutorials/ui/buttons/use-input-element.png" width="300" />
 
 [1]: https://playcanvas.com/editor/scene/547900
 [2]: /user-manual/user-interface/elements/

content/en/tutorials/using-assets.md

@@ -54,7 +54,7 @@ In this case we've declared three script attributes `a`, `b` and `c` which are a
 
 The **A** and **B** assets are marked as **preload** in this project. This means that during the loading screen, these assets are downloaded. They will be ready to use as soon as your application starts. When an asset is loaded, the loaded resource is available as `asset.resource` and we can assign the asset to the [render component asset property][8]. If `asset.loaded` is `false`, then the asset isn't loaded.
 
-<img loading="lazy" src="/images/tutorials/using_assets/using-assets-a-preload.png" width="360">
+<img loading="lazy" src="/images/tutorials/using_assets/using-assets-a-preload.png" width="360" />
 
 So, the `A` and `B` models are preloaded, which means we know they will be ready when we are running the application. This code checks if the space bar is pressed, and if so we change the render asset on the render component to be the resource property of the asset. In this case `asset.resource` will be a `pc.Render` object. For each different asset type (audio, texture, etc), the `asset.resource` property will be the relevant type.
 
@@ -79,7 +79,7 @@ if (app.keyboard.isPressed(pc.KEY_C)) {
 
 The **C** render asset is not marked as *preload*, so in the code above, you can see that we check if the resource is loaded before we use it. if `asset.loaded` is false, then the resource isn't loaded and we can't change the render component. If the **C** render asset is loaded then `this.c.resource` will be the `pc.Render` property and `asset.loaded` will be true, we'll be then able to assign it.
 
-<img loading="lazy" src="/images/tutorials/using_assets/using-assets-c-preload.png" width="360">
+<img loading="lazy" src="/images/tutorials/using_assets/using-assets-c-preload.png" width="360" />
 
 ```javascript
 if (this.app.keyboard.isPressed(pc.KEY_L)) {

content/en/user-manual/assets/import-pipeline/import-hierarchy.md

@@ -16,11 +16,11 @@ PlayCanvas supports importing models with their meshes as a hierarchy of entitie
 
 Open the 'Project Settings'
 
-<img loading="lazy" src="/images/user-manual/assets/import-pipeline/import-hierarchy/project-settings.png" width="480">
+<img loading="lazy" src="/images/user-manual/assets/import-pipeline/import-hierarchy/project-settings.png" width="480" />
 
 Scroll down to 'Asset Tasks' and enable 'Import Hierarchy':
 
-<img loading="lazy" src="/images/user-manual/assets/import-pipeline/import-hierarchy/asset-tasks.png" width="360">
+<img loading="lazy" src="/images/user-manual/assets/import-pipeline/import-hierarchy/asset-tasks.png" width="360" />
 
 ## Importing models
 

content/en/user-manual/assets/import-pipeline/index.md

@@ -14,7 +14,7 @@ When a source asset is uploaded, PlayCanvas starts an Asset Task to perform this
 
 There are a variety of options available to tune the behavior of the import pipeline to suit your needs.
 
-<img loading="lazy" src="/images/user-manual/assets/import-pipeline/asset-tasks.png" width="480">
+<img loading="lazy" src="/images/user-manual/assets/import-pipeline/asset-tasks.png" width="480" />
 
 ### Search related assets
 
@@ -79,7 +79,7 @@ Only available if using [Convert to GLB](#convert-to-glb) option. Setting this t
 
 If using Draco compression, remember to import the Draco WASM module into the project otherwise the models will not load.
 
-<img loading="lazy" src="/images/user-manual/assets/import-pipeline/draco-import-button.png" width="480">
+<img loading="lazy" src="/images/user-manual/assets/import-pipeline/draco-import-button.png" width="480" />
 
 ### Create FBX Folder
 

content/en/user-manual/assets/importing.md

@@ -30,14 +30,14 @@ For projects created prior to this date, they will still create JSON assets by d
 
 If you would like to migrate assets to the GLB format, please go to 'Project Settings'.
 
-<img loading="lazy" src="/images/user-manual/assets/importing/project-settings.png" alt="Project settings" width="300">
+<img loading="lazy" src="/images/user-manual/assets/importing/project-settings.png" alt="Project settings" width="300" />
 
 Open 'Asset Tasks' and tick 'Convert to GLB'.
 
-<img loading="lazy" src="/images/user-manual/assets/importing/asset-tasks.png" alt="Asset tasks settings" width="400">
+<img loading="lazy" src="/images/user-manual/assets/importing/asset-tasks.png" alt="Asset tasks settings" width="400" />
 
 And finally reimport the model and/or animation file (via drag and drop or the 'Upload' menu option) to create the GLB asset.
 
-<img loading="lazy" src="/images/user-manual/assets/importing/drag-and-drop.gif" alt="Drag and drop file">
+<img loading="lazy" src="/images/user-manual/assets/importing/drag-and-drop.gif" alt="Drag and drop file" />
 
 Once created, this can be referenced to Entities in place of the existing JSON asset.