Users might disable JavaScript for a number of reasons. Perhaps there are bandwidth constraints, or if they are primarily using their cell phone, they may need to preserve their battery life. In other instances, there may be reasons for disabling JavaScript for privacy issues. A handful of people even install browser extensions like nonscript to prevent the browser from running JavaScript. If JavaScript is disabled, many websites and apps fail to function; if not completely, then partially.
For this tutorial, you will learn how to easily apply the nonscript HTML tag to ensure that your viewers can see necessary content. This tutorial will take advantage of CSS (Cascading Style Sheets) functions while creating the effect within the HTML (Hypertext Markup Language) page. All you need to start with is a simple code editor such as Notepad ++.
What is the Application of the nonscript HTML Tag?
The <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn’t support script. The <noscript> element can be used in both the <head> element container and inside the <body> tag areas of your HTML page. When used inside <head> element container, the <noscript> element can only contain <link>, <style>, and <meta> elements.
In the following HTML page, notice the content inside the <script> container.
!DOCTYPE html>
<html>
<body>
<h1>The noscript element</h1>
<p>A browser with JavaScript disabled will show the text inside the noscript element ("Hello Udacians!" will not be displayed).</p>
<script>
document.write("Hello Udacians!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>What the browser will show is the following:
The noscript elementA browser with JavaScript disabled will show the text inside the noscript element (“Hello Udacians!” will not be displayed). Hello Udacians! |
Supported Tags
Although nonscript has no tag-specific attributes, it does support all of the global tags. The top two tags that get used often are:
- id
- title
Id
What does id do? Id sets a unique ID for an HTML element.
The HTML page would look as follows:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="scripts.js"> </script> <link rel="stylesheet" href="styles.css"> </head> <body> <noscript id="udacity">Udacity is here for you!</noscript> <p>You can see this Udacity website page because your browser supports JavaScript. If your browser did not support JavaScript, you would be able to see the text in the <noscript> tag.</p> </body> </html>
Title
What does title do? Title defines extra information about an element.
The HTML page would look as follows:
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="scripts.js"> </script> <link rel="stylesheet" href="styles.css"> </head> <body> <noscript title="Learn Online">https://www.udacity.com</noscript> <p>You can see this Udacity website page because your browser supports JavaScript. If your browser did not support JavaScript, you would be able to see the text in the <noscript> tag.</p> </body> </html>
Final Note
Hopefully with this knowledge of the nonscript element, you will be able to apply this effectively in the appropriate settings. Being able to understand the reasons why web users may decide to deactivate their JavaScript is essential towards accommodating all types of users. However, understand that page events requiring scripts to work will obviously fail. Any event attributes like “onfocus” or “onblur” will be useless.
Where to Next?
This “Accommodating Users with the nonscript HTML Tag “tutorial should provide a starting point for further inquiry into website design, layout, and practical applications with HTML and CSS.
Continue to explore other areas of design. The hope for this introduction is that it piques your interest, inspires you to explore further, and dive deeper into the world of web design.
HTML is a great way to start learning code, but the professional world demands more and more. Why not supercharge your skills and options by taking it even further. Enroll in our Intro to Programming Nanodegree program today!
