- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - async Attribute
HTML async attribute is a Boolean attribute that is used to specify the script to execute as soon as it is loaded.
It is similar to defer attribute in an HTML. As we know that the async attribute is a Boolean attribute that returns true with JavaScript if present within the <script> element, otherwise it will return false.
The difference between async and defer is that the async attribute allows the script to run as soon as it is loaded, without blocking the other elements on the web page. On the other hand, the defer attribute allows the script to execute only after the page has finished loading.
Syntax
<script async></script>
Applies On
Below listed element allow using of the HTML async attribute.
Element | Description |
---|---|
<script> | HTML <script> tag is used to add javascript code to HTML document. |
Examples of HTML async Attribute
Following codes demonstrate the usages of async attribute.
Async attribute with script Tag
When we execute the below script, it will generate an output displaying the alert as soon as the page load. when the user clicks the ok it will displays a text.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML 'async' attribute</title> </head> <body> <!--HTML 'async' attribute--> <h3>Example of the HTML 'async' attribute</h3> <p>This is demo of the HTML 'async' attribute.</p> <!--use within the 'script' element--> <script src="index.js" async></script> </body> </html>
index.js
alert("Alert message...")
Check async is present in current script
Considering the another scenario, where we are going to run the script to check whether the attribute present in the script tag or not.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML 'async' attribute</title> <style> button { padding: 10px; width: 100px; cursor: pointer; background-color: blueviolet; color: white; } </style> </head> <body> <!--HTML 'async' attribute--> <h3>Example of the HTML 'async' attribute</h3> <p>This is demo of the HTML 'async' attribute.</p> <p> Click on the below button to check the 'async' attribute is present within the 'script' element or not. </p> <button onclick="func()">Check</button> <!--use within the 'script' element--> <script src="index.js" id="demo" async></script> <script> function func() { let value = document.querySelector("#demo").async; alert("Is 'async' is present or not? " + value); } </script> </body> </html>
Supported Browsers
Attribute | |||||
---|---|---|---|---|---|
async | Yes | Yes 10.0 | Yes 3.6 | Yes | Yes |
To Continue Learning Please Login
Login with Google