When should `

Cases for visibility

There exist specific circumstances where visible <script> tags prove beneficial, including education, data storage, debugging, and templating.

Code samples in tutorials

When creating a tutorial or documentation, visible <script> tags can be functional:

<script type="text/plain" style="display: block;">
  // "Hello, World" in JavaScript
  console.log("Hello, Stackoverflow!"); // Friendly greeting to SO folks
</script>


These tags need to display as blocks and the characters < and > don't have to be escaped.

Data blocks in HTML

You can utilize the <script> tag to contain data blocks within your HTML:

<script type="application/json" id="myData">
  // This is not the data you're looking for
  {
    "joke": "Why don't programmers like nature? It has too many bugs."
  }
</script>


This method provides an effective approach to store raw data, especially when JSON is involved.

Debugging

Visibility of <script> tags can also aid the process of debugging. Displaying a script[src]:before can reveal the script's source link, which improves transparency when debugging.

Templating

Additionally, <script> tags can double as containers for HTML templates:

<script type="text/template" id="profile-template">
  <div class="profile">
    <!-- Selfie placeholder -->
    <img src="" alt="Profile picture">
    <h3></h3>
    <!-- Other exciting bits -->
  </div>
</script>


Fetching the innerHTML of this script tag with JavaScript gives you a string version of the HTML ready for use!

Enhancing the user experience

Visible script tags help you create interactive documentation or tutorial tools. Displaying script[src]:before helps designers understand which scripts are being used on a page, greatly enhancing the debugging process.

script[src]:before {
  content: attr(src);
  /* CSS goes brrr */
  display: block;
}


This transparency also improves the overall user experience.

Security considerations

As with anything web-related, security is key. Be careful not to expose sensitive data or script paths, which could be utilized by potential attackers.

How about styles?

Overriding client-side stylesheets to make your <script> tag visible is perfectly legal and sometimes encouraged. Just make sure it doesn't become a visual spoiler for your end users!

Aftermath of script execution

Now, you might be wondering, what happens if we remove the script tag after its execution? The simple answer is - nothing changes. The effects of executed scripts persist even after their <script> tag is removed. The visible nature of a <script> tag, therefore, has no bearing on script execution.