HTML async Attribute

Introduction

The async attribute is a valuable feature in HTML that is specifically used with script elements. It controls whether the associated script should be executed asynchronously or not. This attribute can significantly impact the loading and execution behavior of scripts in your web page.

What You’ll Learn

Purpose of async

The primary purpose of the async attribute is to influence the way scripts are loaded and executed. When the async attribute is present, it allows the script to be downloaded asynchronously, meaning it won’t block the parsing of the rest of the page. This is particularly useful for non-essential scripts that don’t depend on the page structure.

📝 Syntax

Add the boolean async attribute to an external script tag:

<script async src="myscript.js"></script>

Syntax Rules

• Boolean attribute — write async alone; presence means true.
• Requires a src attribute pointing to an external file.
• Do not use both async and defer on the same script (defer is ignored if async is present).
• Execution order among multiple async scripts is not guaranteed.

💎 Values

The async attribute has a boolean value, and it can be set to either:

• true — The script is downloaded in parallel and executed as soon as it is ready. In HTML, simply include the async attribute.
• false (default) — If the attribute is not present, the script blocks HTML parsing while downloading (unless defer is used).

<!-- Enabled (recommended HTML syntax) -->
<script async src="analytics.js"></script>

<!-- Also valid but redundant -->
<script async="async" src="analytics.js"></script>

<!-- Default: no async -->
<script src="app.js"></script>

Applicable Elements

Examples Gallery

Basic async scripts, dynamic JavaScript loading, and async vs defer comparison.

<script async src="myscript.js"></script>

<script>
  var scriptElement = document.createElement("script");
  scriptElement.src = "dynamicScript.js";
  scriptElement.async = true;
  document.head.appendChild(scriptElement);
</script>

<!-- Independent analytics: async -->
<script async src="analytics.js"></script>

<!-- App logic that needs DOM: defer -->
<script defer src="app.js"></script>

♿ Accessibility

• Faster first paint — Non-blocking scripts can help content appear sooner for all users.
• Do not delay critical UI — Async scripts may run mid-interaction; avoid modifying focus without user action.
• Ensure functionality without JS — Core content should work even if async scripts fail to load.
• Test keyboard flows — Scripts that inject UI asynchronously should manage focus properly.

💡 Best Practices