HTMLCodeRunner Editorial
Forum Replies Created
-
AuthorPosts
-
</>HTMLCodeRunner EditorialEditorial team
Detailed answer
A sandbox starts with restrictions that can be relaxed through tokens.
Grant only abilities the embedded content actually needs and consider its origin and trust level. A sandbox does not eliminate all risks from untrusted content. Powerful combinations of permissions may undo the isolation you intended to create.
Example
<iframe title="Static preview" sandbox srcdoc="<p>Hello HTML</p>"></iframe>Understanding the behavior
Sandbox begins with broad restrictions and individual tokens restore selected capabilities. Add only the capabilities the embed actually requires. Combining allow-scripts and allow-same-origin for same-origin content can weaken the intended protection and needs careful review.
Practical implementation notes
Test the embedded task after each change rather than adding all tokens to silence errors. Sandbox is one layer of isolation; it does not make arbitrary third-party content trustworthy.
How to check it
Begin with a sandbox without capability tokens and add permissions only for a justified need.
Expected result
Static content renders without granting unneeded script or origin privileges.
Watch out: Do not casually combine allow-scripts and allow-same-origin for same-origin untrusted content.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Srcdoc supplies the embedded document directly in an attribute.
Escape it correctly for that context and apply suitable sandbox restrictions. Relative resource URLs can use the embedding document's context, so test paths explicitly. Treat user-provided markup as untrusted even when it has been escaped to fit the attribute.
Example
<iframe title="Example preview" sandbox srcdoc="<h1>Hello</h1><p>An HTML example.</p>"></iframe>Understanding the behavior
Srcdoc embeds an HTML document supplied as an attribute value. That string still needs correct escaping in its containing HTML and an appropriate sandbox policy. Relative URLs can resolve against the embedding page, which may surprise a self-contained demo.
Practical implementation notes
Never treat arbitrary user HTML as safe simply because it appears in an iframe. Test the intended restrictions and avoid allowing scripts or origin access unless the application deliberately needs them.
How to check it
Escape the attribute context and inspect the embedded content with suitable sandbox restrictions.
Expected result
The intended embedded document is shown without breaking the outer attribute.
Watch out: Attribute escaping alone does not make arbitrary embedded scripts safe.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
For external classic scripts, defer allows parsing to continue and runs after parsing while preserving order among deferred scripts.
Async runs when ready without preserving dependency order. Choose based on whether code needs other scripts or the completed DOM. Module scripts have their own default loading behavior.
Example
<script src="/scripts/menu.js" defer></script> <script src="/scripts/independent-widget.js" async></script>Understanding the behavior
For external classic scripts, defer downloads without blocking parsing and executes after parsing in document order. Async runs when available and does not preserve dependency order. Inline classic scripts do not gain deferred execution just by adding defer.
Practical implementation notes
If one script depends on another, preserve a reliable loading order or use a module dependency graph. Inspect the first console error rather than assuming every missing interaction is a download failure.
How to check it
Use a loading strategy that preserves the dependency order and test under slow network conditions.
Expected result
Deferred classic scripts run after parsing in their document order.
Watch out: Do not mark order-dependent classic scripts async and expect source-order execution.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
It is treated as a JavaScript module, with imports, module scope, and strict-mode semantics.
Cross-origin loading uses module-related CORS rules. Serve examples over HTTP for realistic testing rather than assuming local file URLs will behave the same way. Imported resources must return suitable JavaScript content and MIME types.
Example
<script type="module" src="/scripts/app.js"></script>Understanding the behavior
Module scripts use module scope and strict-mode semantics and are deferred by default unless async changes scheduling. Imports are resolved as URLs, and server MIME and cross-origin rules matter. Opening a project directly from a file URL can produce different restrictions.
Practical implementation notes
Serve the example through a local HTTP server and inspect failed import requests. A variable declared in a module is not automatically attached to window for a separate classic script to access.
How to check it
Use type=module and serve the example through HTTP with correct resource types.
Expected result
The browser treats imports and scope according to module rules.
Watch out: A top-level module variable is not automatically a window property.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Template holds inert markup for later instantiation.
JavaScript can clone its content and insert the result into the document. This separates a reusable structure from its instances. Keep cloned IDs unique and use safe text insertion for user values. A template is not an automatic loop or rendering framework.
Example
<template id="card"><article><h2>HTML example</h2></article></template> <script>document.body.append(document.querySelector("#card").content.cloneNode(true));</script>Understanding the behavior
Template stores a fragment that is not rendered as normal document content until code clones or inserts it. Its content is available through the template's content DocumentFragment. Repeated clones still need distinct IDs when they contain labeled controls or fragment targets.
Practical implementation notes
Clone the fragment, append it to a visible container and inspect the resulting elements. If the template contains dynamic user text, insert that text safely instead of constructing unsanitized HTML strings.
How to check it
Clone template.content and append the clone, then check repeated instances for duplicate IDs.
Expected result
Only inserted clones become ordinary rendered content.
Watch out: Repeated cloning can introduce duplicate IDs.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Data attributes attach application-specific information to an element and are available through dataset.
Values are strings, so parse them deliberately when code expects another type. Keep them separate from native semantic attributes. Anything placed in HTML is visible to the visitor; these attributes are not secret storage.
Example
<button type="button" data-example-id="forms-01">Open example</button>Understanding the behavior
Data attributes store application-specific strings on elements. Dataset maps attribute names to JavaScript property names, but values remain strings until explicitly parsed. These attributes are visible to visitors and are unsuitable for storing secrets.
Practical implementation notes
Check how data-item-id becomes dataset.itemId, then validate values before using them. A value of false is still a non-empty string, so a simple truthiness test may not express the intended boolean state.
How to check it
Read button.dataset.exampleId and inspect its type before using it.
Expected result
The value is a string; numeric and boolean meanings need deliberate conversion.
Watch out: A dataset value of false is still a nonempty string unless parsed.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Use aria-current=page on the item representing the current page and supply an obvious visual state too.
This differs from aria-selected, which belongs to particular widgets. Mark the actual current destination rather than setting the state on every link in a broad topic category.
Example
<nav aria-label="Primary"><a href="/html/" aria-current="page">HTML</a><a href="/examples/">Examples</a></nav>Understanding the behavior
Aria-current=page identifies the link representing the current page within a navigation set. It describes location rather than selection in a custom widget. A visual active style can accompany it, but color alone is not an accessible indication.
Practical implementation notes
Check that only the appropriate item is current in each navigation group. On a new route, both the active styling and the attribute should update rather than remaining attached to a hard-coded homepage link.
How to check it
Inspect aria-current and the visible selected appearance on the matching destination.
Expected result
One current destination is clear without misusing widget selection states.
Watch out: Do not use aria-selected to mark an ordinary current-page navigation link.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Use a labeled navigation area, actual destination links, and a clear indication of the current page.
Add descriptive previous and next links when those pages exist. Every destination should work when opened directly. Avoid a disabled-looking anchor with href=# that still behaves as a live link.
Example
<nav aria-label="Discussion pages"><a href="?page=1">1</a><span aria-current="page">2</span><a href="?page=3">3</a><a href="?page=3">Next page</a></nav>Understanding the behavior
Pagination should offer real links with destinations that work when opened directly. Give the region a useful name and identify the current page. Number labels need enough context for someone navigating only through links.
Practical implementation notes
Visit a later page directly and confirm the content changes, the canonical describes that page and the previous/next links are correct. Avoid making every page number return the same first page.
How to check it
Open its real URL directly, then use previous and next navigation.
Expected result
The requested page loads independently and its current state is identified.
Watch out: A visual disabled style does not remove anchor behavior.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Inert prevents a subtree from normal interaction and removes it from sequential focus and the accessibility tree.
It can mark content inactive during a workflow. Remove it when that content becomes usable again. Inert is not necessarily visual hiding, so the design may still need to communicate the inactive state.
Example
<section inert><h2>Unavailable preview</h2><button type="button">Edit</button></section>Understanding the behavior
Inert prevents interaction with a subtree and removes it from normal focus navigation and the accessibility tree. It can help manage inactive interface regions, but it does not replace server authorization or conceal data in downloaded HTML.
Practical implementation notes
When removing inert, check where keyboard focus should move next. Ensure active controls are never left inside an inert ancestor, and test that visible inactive content is communicated clearly in the interface.
How to check it
Try tabbing and activating its controls while inert is present, then remove inert.
Expected result
The inactive subtree cannot be operated until it is re-enabled.
Watch out: Do not leave the only usable navigation or close control inert.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
An absolute URL includes the scheme and host.
A relative URL resolves against the document base URL; a root-relative path begins at the site root. Choose paths with deployment location in mind and test nested pages. A link working from the homepage can still fail from a deeper directory.
Example
<a href="https://htmlcoderunner.com/">Absolute</a> <a href="/guidelines/">Root-relative</a> <a href="lesson.html">Document-relative</a>Understanding the behavior
Relative references are resolved against the document's base URL, which usually comes from the page URL unless base changes it. A leading slash starts at the current origin root; a path without that slash is resolved relative to the current directory.
Practical implementation notes
Test the same link from a nested route and from the homepage. Many broken resource paths only appear after deployment under a deeper path or after a missing trailing slash changes URL resolution.
How to check it
Resolve the same href from both documents and compare the resulting addresses.
Expected result
The intended absolute, root-relative, or document-relative path is clear.
Watch out: A leading slash does not mean the current folder.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Give the destination a unique id and use it as the link fragment.
Fragments work within the current page or after another page's path. Stable IDs preserve incoming links when headings are edited. A fixed header may need scroll-margin styling so the heading remains visible after navigation.
Example
<a href="#forms">Go to forms</a> <h2 id="forms">HTML forms</h2>Understanding the behavior
A fragment points to an element with a matching id in the target document. The destination must exist and use a unique identifier. A link to another page can also include a fragment after its path.
Practical implementation notes
Test the complete URL directly, not only by clicking from the current page. If a sticky header covers the target heading, use a suitable CSS scroll margin rather than inserting empty anchor elements.
How to check it
Follow the fragment and check the destination id, including any fixed-header offset.
Expected result
The intended section remains reachable through a stable identifier.
Watch out: Changing visible heading text does not automatically update its id.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Use target=_blank when the behavior helps and make it clear to users.
Modern browsers generally imply noopener for this target; an explicit rel documents the intention and supports older behavior. Noreferrer has the additional effect of withholding referrer information. New tabs should be a considered choice rather than a default for everything.
Example
<a href="https://developer.mozilla.org/" target="_blank" rel="noopener">MDN (opens in a new tab)</a>Understanding the behavior
Opening a new tab should serve a clear purpose and can be announced in the link text. Modern browsers give target=_blank links implicit noopener behavior, while an explicit rel=noopener documents the intent. Noreferrer additionally changes referrer handling.
Practical implementation notes
Check that the destination is still an ordinary, usable link. Avoid forcing every internal link into a new tab, since that can make navigation and returning to the previous page confusing.
How to check it
Read the link label and inspect target and rel before activation.
Expected result
The new-tab behavior is communicated and opener access is not unintentionally granted.
Watch out: Opening every internal destination in a new tab can make navigation harder.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
The download attribute expresses an intent to download the destination and can suggest a filename.
Actual behavior depends on the origin, browser, and server headers. For files you control, configure the response appropriately and test it. Do not assume the attribute overrides any third-party server's behavior.
Example
<a href="/examples/hello.html" download="hello.html">Download HTML example</a>Understanding the behavior
Download expresses an intention to save a resource and can suggest a filename. Browser behavior depends on the URL's origin, headers and other restrictions. It is not a way to force every third-party URL to download.
Practical implementation notes
Test the served file response and Content-Disposition when downloads matter. The linked asset should have an accurate type and a clear filename; a button-looking anchor cannot compensate for an HTML error page.
How to check it
Check resource origin and server response headers as well as the download attribute.
Expected result
You understand the browser's actual behavior rather than assuming universal support.
Watch out: A suggested filename and download behavior are not universal guarantees.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
Mailto requests a configured email handler, while tel requests a suitable calling handler.
They do not silently send a message or place a call in every environment. Provide readable contact information that users can copy. Encode query values such as an email subject correctly when building the URL.
Example
<a href="mailto:help@example.com?subject=HTML%20question">Email support</a> <a href="tel:+15550101000">Call +1 555 010 1000</a>Understanding the behavior
Mailto and tel ask the operating system or browser to open a configured handler. They do not send an email or make a call automatically. Some devices have no suitable application configured, so the visible address or number should remain understandable.
Practical implementation notes
Encode mail subjects or other URI parameters correctly. Avoid placing private data in a prefilled message URL, and provide another contact route when completing the task depends on a handler being available.
How to check it
Activate it on a device with an appropriate handler and provide copyable contact text.
Expected result
The handler is offered; no hidden message or call is sent automatically.
Watch out: A mailto link is not a reliable server-side contact-form handler.
</>HTMLCodeRunner EditorialEditorial teamDetailed answer
The effective base href changes how relative URLs are resolved throughout the document.
This can affect anchors, scripts, images, and stylesheets. Use it only when its document-wide consequences are intended. A fragment-only link may resolve against the base rather than the exact current page URL.
Example
<head><base href="https://example.com/docs/"><title>HTML docs</title></head> <body><a href="forms.html">Forms</a></body>Understanding the behavior
A base href changes how relative URLs throughout the document resolve, including links and resource references. Its effects can be broader than expected, and only the first relevant base value is used. An absolute URL is not resolved in the same way.
Practical implementation notes
Inspect a link's resolved href property before and after adding base. If local fragment links unexpectedly leave the page, check the base URL rather than changing every id.
How to check it
Inspect the document baseURI and resolve several relative resources against it.
Expected result
The effective base explains the changed resource destinations.
Watch out: Check the resolved URL rather than relying only on the source string.
-
AuthorPosts