<script>

Overview

The <script> element is a versatile component of HTML, primarily designed to embed or reference JavaScript code within web documents. Contrary to content-oriented elements, the element doesn't represent content for users but serves as a mechanism to introduce dynamic behaviors or data blocks in web pages.

Examples and Usage

At its core, <script> embeds or references programming scripts within HTML documents. Most often, it's used to include executable JavaScript code. Additionally, it can also contain structured data like JSON, given the correct type attribute value.

Inline JavaScript

Using the <script> tags, you can directly embed JavaScript into an HTML document.

<script>
  function greetUser() {
    alert("Hello, Web Enthusiast!");
  }
</script>

<button onclick="greetUser()">Click Me!</button>

In the example above:

• We've defined a simple JavaScript function greetUser() within a <script> block.

• Included a button that, when clicked, triggers this function and presents an alert to the user.

Typically, such scripts are placed towards the end of the document, just before the closing </body> tag, ensuring they run after all the content has been loaded.

External Script

Using external files for JavaScript is a common practice, especially for larger or shared code. This method not only promotes reusability but also keeps the main HTML content organized.

<script src="path/to/external/script.js"></script>

The src attribute specifies the location of the JavaScript file. When the browser encounters this tag, it fetches the file and processes its content as if embedded within the HTML. The order in which scripts are placed matters; they are executed from top to bottom, influencing the behavior of your webpage.

Asynchronous and Deferred Loading

Performance is a major consideration in web development. By default, the browser will stop parsing the HTML document when it encounters a <script> tag, which can lead to delays in page rendering. The async and defer attributes address this issue:

<!-- Asynchronous script -->
<script async src="path/to/async/script.js"></script>

<!-- Deferred script -->
<script defer src="path/to/deferred/script.js"></script>

• async: This attribute lets the browser continue parsing the HTML as the script downloads in the background. Once the script is ready, it's executed immediately.

• defer: Similar to async, it allows HTML parsing to proceed uninterrupted. The difference lies in execution timing; scripts with defer are executed in order, only after the entire document is parsed.

Additionally, <script> comes with layers of complexity and nuances, especially when diving into the world of modules, MIME types, and content security policies.

Attribute Breakdown

In addition to global attributes, the <script> element comes with a set of specific attributes to customize its behavior.

In addition, there's the blocking attribute which is experimental and indicates that certain operations should be blocked when fetching the script, such as rendering. On the other hand, fetchpriority, also experimental, provides a hint about the relative priority for fetches initiated by the script, which can be high, low, or auto-determined.

More details on the attribute and value nuances can be found in the specification.

Accessibility Aspects

The <script> element doesn't possess specific accessibility considerations. It doesn't correlate with any particular role and doesn't utilize aria-* attributes. In essence, since it doesn't represent content for users, it doesn't have a direct impact on accessibility. However, it's advisable to make sure that any dynamic content or behavior introduced via scripts remains accessible.

Associated Elements

• <noscript>

Additional Notes

• Not every user has JavaScript enabled or they may be using devices or browsers that struggle with JavaScript. The <noscript> element acts as a contingency for such scenarios, allowing developers to offer alternative content or instructions for a better user experience.

• The JavaScript landscape has two primary script types: classic scripts and ES Modules. Classic scripts are the conventional method of incorporating JavaScript, loaded and executed in the order they appear. In contrast, ES Modules allow developers to use modern features like import and export statements. The type attribute with a value of module indicates that the script should be treated as an ES Module.

• Positioning scripts in the <head> of your document and utilizing the defer attribute can drastically improve page load times. By doing so, the script is fetched while the HTML is being parsed but only executed after the parsing completes.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: script

The HTML Living Standard Specification: script