Scripting and Applications - Web Standards: Mastering HTML5, CSS3, and XML - page 224

There is a practice of commenting out script written in the markup to eliminate rendering element content by
browsers that cannot handle the script element. Advanced rendering engines recognize that scripts in comments
should be executed. This could eliminate the need for comments if external script files are used.
As you learned earlier in the chapter, a properly embedded script does not break page layout or content flow
when JavaScript is not supported. Still, this approach usually cannot provide the same functionality or behavior
as the script would (the provided information should be similar). The importance of alternate content or fallback
mechanism for JavaScript code can be best demonstrated by “dynamic” menus that should not rely on JavaScript
alone, since the functionality of the site will be lost if JavaScript is disabled or the script cannot be loaded.
Let's assume that you have a special Help screen, contained by a layer that is not shown by default (Listing 6-53)
and displayed only when the user clicks the menu “Help”.
Listing 6-53. A Help div Which Is Not Rendered by Default
#help {
display: none;
}
Since the help is displayed using JavaScript (Listing 6-54), it will be not available if JavaScript is disabled or not
supported.
Listing 6-54. The Function That Displays the Hidden div
function display_help() {
document.getElementById("help").style.display = 'block';
}
A good fallback mechanism is to provide a conventional hyperlink—which looks the same as the link calling the
JavaScript code that displays the special Help layer above the page—as an alternate content (Listing 6-55). If the layer
cannot be displayed because of the lack of JavaScript support, the link opens another web document with the same
content the Help div would provide. Although the visual appearance of the “Help screen” and the Help document is
different, the content is the same. One of them is always available.
Listing 6-55. An Advanced Menu Item with Fallback Mechanism
<li>
<script type="text/javascript">
<a href="javascript:display_help();" title="Guide and access keys" accesskey="h" 
tabindex="22">Help</a>
</script>
<noscript>
<a href=" http://example.com/help/ " title="Guide and access keys" accesskey="h" 
tabindex="22">Help</a>
</noscript>
</li>