Loading Scripts with HTML Script Tags

The HTML script tag is used to include and execute JavaScript code. By default, this tag takes an external source attribute, such as scr to load a JavaScript file. However, attempts to include inline JavaScript within the script tag, like this:

Fail silently without throwing errors.

Why Using Inline JavaScript in Script Tag Doesn't Work

The reason for this behavior is that a script element can only load a single source, be it external or inline. When both src and inline content are present, the inline content is ignored. Therefore:

Will not load the specified scripts.

Solution: Using Multiple Script Elements

To load multiple scripts, you need to use separate script elements for each:

Alternatively, you can create a parent script that dynamically loads the necessary scripts:

Additional Notes

While inline JavaScript is ignored in script elements with external sources, the content of the script element remains in the DOM. This has prompted some developers to use it for storing data that is accessed by the external scripts. However, using data-* attributes is generally a more appropriate and cleaner approach for this purpose.