loading...

HTML5 – HTML5 Processing: Using CSS and JavaScript

Let’s finish up with the child tags of the parent <head> tag, which is itself a child tag of the <html> tag, by taking a look at the <style> tag for CSS3 document styling and the <script> tag for JavaScript (or JS) document scripting. We will also look at the <noscript> tag. These are the last of the tags contained in the HEAD section of the HTML5 document definition, so after this we focus on tags that are child tags of the BODY or content section. This is getting exciting. We are making excellent progress thus far!

In this chapter, I go over markup format and syntax for HTML5 document-level <style> and <script> tags, including all of their important parameters. We will look at how to define these external JavaScript documents using JS files, and how to use a <style> tag to insert exceptions to your externally linked CSS file for only that HTML5 document page. We also cover the <noscript> tag and how it defines alternate content for users who have disabled scripting languages in their browsers.

HTML HEAD Tags to Add Tag Processing

This chapter covers two high-level (in document HEAD) tags used to define how you want your HTML5 tags (markup) processed further to add desktop publishing like styling, pixel-precise positioning, special effects, animation, interactivity, and other types of “algorithmic” processing. This is done using the <style> tag for CSS3 processing, and the <script> tag for JavaScript processing.

The chapter title is “HTML5 Processing” because CSS and JS can further process HTML5. That said, this is not a book on CSS3 or JavaScript, just HTML5 markup (tags), so if you want to learn CSS3 styling or JS programming, be sure to buy a title from Apress.com that specifically covers those topics.

The SCRIPT Tag

: Using JavaScript Programming

If you want to add advanced features to your HTML5 document, website, or application, you want to use JavaScript, which is actually based on the ECMAScript 262 standard. This is done using the <script> child tag in the <head> parent tag (section) of the HTML5 document. It contains JavaScript code inside of the <script> tag or uses the src parameter and optional (in HTML5, at least) type parameter to externally reference the JavaScript assets using a JS file. JavaScript is often referred to as JS, its abbreviation. I show you how to reference an external JavaScript asset in this chapter, as well as how to put JavaScript inside of your HTML5 document directly. Table 5-1 shows various parameter options, five of which are supported for this <script> tag in HTML5, and one of which is supported only in XHTML and HTML 4.

Table 5-1. Supported <script> Tag Parameters

Script Parameter

Script Parameter Purpose

src

Specify the URL for an external JavaScript file

type

Specify optional media type for external JS file

charset

Specify character encoding for external JS file

defer

Specifies to execute scripts after HTML parsing

async

Specified to execute scripts asynchronously

xml:space

Specifies whether white space in code should be preserved. This is not supported in HTML5.

You may be wondering when you

should use external vs. internal JavaScript code. The rule of thumb is to use external JavaScript assets for global JavaScript code, which is used by every document in an HTML5 website; use internal JavaScript code for localized JavaScript functions, which are only used on that particular HTML5 page, document, or application.

If a function is used more than once, externalize it, so that it can be cached, and does not have to be served by your server more than one time, and can be accessed using your local storage device (cache), whenever it is needed by an HTML5 page.

Let’s look at how I externalized JavaScript code, used in my iTVclock.com website to set the hands of the clocks.

The SRC Parameter

: Externalizing JavaScript Program Assets

You can externalize JavaScript code just as you can with cascading style sheets, except that instead of the <link> tag, you use a <script> tag with its src (source file) parameter. It is important to note that the externalized JavaScript file must not contain the <script> tag, only the JavaScript code that would normally exist inside of the <script> tag were you to use the JavaScript internal to the HTML5 document approach.

An example of an HTML5 document <script> declaration for an external .js asset, along with the top-level <head> tag it’s nested in, looks like

the following HTML5 markup structure:

<!DOCTYPE html>
  <html lang="en">
    <head>
     <title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
     <meta name="description" content="Use your iTV Set as a Clock!">
     <meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
     <meta name="robots" content="index, follow">
     <meta name="copyright" content="Copyright 2014 through 2016">
     <meta name="author" content="Wallace Jackson">
     <meta charset="UTF-8">
     <base href="http://www.iTVclock.com">
     <link rel="icon" href="itvclock.ico">
     <link rel="stylesheet" type="text/css" href="itvclock.css">
     <link rel="author"
           href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
           title="Wallace Jackson">
     <script src="itvclock.js" type="text/javascript">
    </head>
    <body>
     <!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
    </body>
  </html>

As you can see, I’ve provided an optional type parameter so that HTML4 browsers can also use this code. If I wanted this HTML markup to support XHTML, the tag would then look like the following XHTML markup syntax, using a proper closing tag:

< script src="itvclock.js" type="text/javascript" />              

If I am only supporting HTML5 rendering engines, all I’d need to declare this external JavaScript asset is the following HTML5 markup syntax:

<script src="itvclock.js">

Next, let’s look at how

you can synchronize the loading of an external .js JavaScript asset, so that you can control how the JavaScript code is executed relative to the loading and parsing (execution) the HTML5 markup (tags) for your documents.

The ASYNC and DEFER Parameters: JavaScript Asset Execution

There are three ways to control how your JavaScript code is executed relative to the rendering (parsing) of your HTML5 markup (tags). If you don’t specify any parameter to control synchronization, which is the default, the external JavaScript is downloaded and executed immediately, before the HTML5 content markup in the BODY of your document, since the <script> tag is in the <head> of the HTML5 document and thus processed first. There are also parameters to defer (process JavaScript after rendering) or to process asynchronously, at the same time the page is rendering.

Deferring JavaScript Processing: The <defer> Parameter

Let’s look at an example of an HTML5 document <script> declaration for deferring the processing of an external .js asset. This is used if you need your HTML5 markup to be loaded and parsed before the JavaScript code is executed. The <script> tag, with the
defer parameter

enabled, should have the following HTML5 markup structure:

<!DOCTYPE html>
  <html lang="en">
    <head>
     <title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
     <meta name="description" content="Use your iTV Set as a Clock!">
     <meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
     <meta name="robots" content="index, follow">
     <meta name="copyright" content="Copyright 2014 through 2016">
     <meta name="author" content="Wallace Jackson">
     <meta charset="UTF-8">
     <base href="http://www.iTVclock.com">
     <link rel="icon" href="itvclock.ico">
     <link rel="stylesheet" type="text/css" href="itvclock.css">
     <link rel="author"
           href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
           title="Wallace Jackson">
     <script src="itvclock.js" type="text/javascript" defer="defer" >
    </head>                                                                                                              
    <body>
     <!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
    </body>
  </html>

As you can see, I’ve provided an optional type parameter so that HTML4 browsers can also use this code. If I wanted this HTML5 markup to support XHTML1, this <script> tag with the defer parameter enabled looks like the following XHTML markup syntax, which has the proper closing /> tag structure:

<script src="itvclock.js" type="text/javascript" defer="defer" />                

If I am only supporting HTML5 rendering engines, all I’d need to have to declare this external JavaScript asset is the following HTML5 markup syntax with a defer parameter added:

<script src="itvclock.js" defer="defer">

Next, let’s look at how to process the JavaScript code at the same time that your HTML5 markup is parsing.

Parallel JavaScript Processing: The <async> Parameter

Let’s look at an example of an

HTML5 document <script> declaration for paralleling the processing of an external .js asset. This is used if you need your HTML5 markup to be loaded and parsed in parallel with, or at the same time that your JavaScript code is executed. The <script> tag, along with the parent <head> tag that it is nested in, looks like the following HTML5 markup structure using the
async parameter

:

<!DOCTYPE html>
  <html lang="en">
    <head>
     <title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
     <meta name="description" content="Use your iTV Set as a Clock!">
     <meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
     <meta name="robots" content="index, follow">
     <meta name="copyright" content="Copyright 2014 through 2016">
     <meta name="author" content="Wallace Jackson">
     <meta charset="UTF-8">
     <base href="http://www.iTVclock.com">
     <link rel="icon" href="itvclock.ico">
     <link rel="stylesheet" type="text/css" href="itvclock.css">
     <link rel="author"
           href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
           title="Wallace Jackson">
     <script src="itvclock.js" type="text/javascript" async="async" >
    </head>
    <body>
     <!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
    </body>
  </html>

As you can see, I’ve provided an optional type parameter so that HTML4 browsers can also use this code. If I wanted this HTML markup to support XHTML, the tag would then look like the following XHTML markup syntax, using a proper tag closing:

< script src="itvclock.js" type="text/javascript" async="async" />                

If I am only supporting HTML5 rendering engines, all I’d need to have to declare this external JavaScript asset is the following HTML5 markup syntax, adding the async parameter:

<script src="itvclock.js" async="async">

Next, let’s take a look at using the charset parameter.

The CHARSET Parameter: Using a Different JS Character Set

The <script> tag charset parameter

specifies the character set that is being utilized in an external JavaScript asset. It is important to note that this only needs to be used if the character set for the external .js file is different from the character set used for the HTML5 markup syntax in your HTML5 document. Your <script> markup should look like this:

<!DOCTYPE html>
  <html lang="en">
    <head>
     <title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
     <meta name="description" content="Use your iTV Set as a Clock!">
     <meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
     <meta name="robots" content="index, follow">
     <meta name="copyright" content="Copyright 2014 through 2016">
     <meta name="author" content="Wallace Jackson">
     <meta charset="UTF-16"> <!-- Document using UTF-16 Character Set -->
     <base href="http://www.iTVclock.com">
     <link rel="icon" href="itvclock.ico">
     <link rel="stylesheet" type="text/css" href="itvclock.css">
     <link rel="author"
           href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
           title="Wallace Jackson">
     <script src="itvclock.js" type="text/javascript" charset="UTF-8" />
    </head>
    <body>
     <!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
    </body>
  </html>

Next, let’s take a quick look at an

HTML <noscript> tag.

The NOSCRIPT Tag Advises Users: No JS Support

The <noscript> tag should always be implemented if you are using the <script>

tag, but unfortunately, it is rarely used. It would come under the heading of “user error trapping,” in my opinion, as some users turn JavaScript off in the browser or device, and need to be advised to turn the JavaScript capability back on for the application.

The following is an example of a document NOSCRIPT declaration for use of JavaScript assets, whether internalized or externalized:

<!DOCTYPE html>
  <html lang="en">
    <head>
     <title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
     <meta name="description" content="Use your iTV Set as a Clock!">
     <meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
     <meta name="robots" content="index, follow">
     <meta name="copyright" content="Copyright 2014 through 2016">
     <meta name="author" content="Wallace Jackson">
     <meta charset="UTF-8">
     <base href="http://www.iTVclock.com">
     <link rel="icon" href="itvclock.ico">
     <link rel="stylesheet" type="text/css" href="itvclock.css">
     <link rel="author"
           href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
           title="Wallace Jackson">
     <script src="itvclock.js" type="text/javascript" />
     <noscript>No JavaScript Support; Please Enable JavaScript!</noscript>            
    </head>
    <body>
     <!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
    </body>
  </html>

As you can see, it is common to have this tag after your <script> tag. Since it uses a proper closing tag, the markup is XHTML (XML) compliant.

Using SCRIPT Tags Internally: JavaScript Coding

It is also possible

to include your JavaScript code alongside your HTML5 markup by surrounding it with <script> and </script> tags. You can also use comments to “hide” the JS code from the parsing engine, but the JavaScript rendering engine still sees the JavaScript code correctly. This is shown in the following example, where a simple Hello World JS app is in the comments inside the open and closing <script> tags (instead of the externalized .JS script loader):

<!DOCTYPE html>
  <html lang="en">
    <head>
     <title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
     <meta name="description" content="Use your iTV Set as a Clock!">
     <meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
     <meta name="robots" content="index, follow">
     <meta name="copyright" content="Copyright 2014 through 2016">
     <meta name="author" content="Wallace Jackson">
     <meta charset="UTF-8">
     <base href="http://www.iTVclock.com">
     <link rel="icon" href="itvclock.ico">
     <link rel="stylesheet" type="text/css" href="itvclock.css">
     <link rel="author"
           href="https://plus.google.com/u/0/+WallaceJackson/about/p/pub"
           title="Wallace Jackson">
     <script>            
     <!--
       Document.getElementById("JSapp".innerHTML="Hello World JavaScript";
     -->
     </script>            
     <noscript>No JavaScript Support; Please Enable JavaScript!</noscript>
    </head>
    <body>
     <!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
    </body>                                                                      
  </html>

You should use this localized JavaScript approach with your JS functions, which exist only on that one HTML5 document, page, or application. Next, let’s look at the CSS <style> tag.

The STYLE Tag
: Styling HTML5 Markup Using CSS

The <style> tag has a fewer parameters, but includes the media and type parameters, and a new scoped parameter. The supported parameters are shown in Table 5-2.

Table 5-2. Style Tag Parameters

Parameter Name

New in HTML5?

Parameter Purpose or Usage

scoped

Yes

Style is locally scoped (to parent and children only)

media

No

Media/device style is targeted at

type

No

Media type specification of style tag

The scoped parameter specifies application only to the element (tag) being styled or “cascading” down to child tag elements, which is why it’s called cascading style sheet (CSS). This parameter is not frequently implemented because most styles in HTML5 are applied globally
across all pages in the document.

Here is an example of a <style> tag being used to apply a variation or exception from a global stylesheet externalized using the <link> tag.

<style> type=text/css><!-- #b (background-image:url(b.png);) --></style>

This HTML5 markup replaces the #b style for background-image styling with local styling that provides the current (proper) background image for this particular iTV Clock face. Doing this allows you to have a global style for background imagery and still replace a local background image style in any document that you want to vary from the global CSS style defined for the background image.

Notice that I use the comment trick (the same one used with JavaScript) to hide the CSS3 code from parsing engines, which would not understand it and would throw an error code. I do not cover CSS syntax in this book on HTML5 markup, but Apress has several titles on CSS.

<!DOCTYPE html>
 <html lang="en">
   <head>
    <title>iTV Clocks for iTV Sets | 3D Watch Faces for iTV Sets</title>
    <meta name="description" content="Use your iTV Set as a Clock!">
    <meta name="keywords" content=" iTV Clock, iTV Set, Watch Faces">
    <meta name="robots" content="index, follow">
    <meta name="copyright" content="Copyright 2014 through 2016">
    <meta name="author" content="Wallace Jackson">
    <meta charset="UTF-8">
    <base href="http://www.iTVclock.com">
    <link rel="icon" href="itvclock.ico">
    <link rel="stylesheet" type="text/css" href="itvclock.css">
    <link rel="author" title="Wallace Jackson"
          href=https://plus.google.com/u/0/+WallaceJackson/about/p/pub />
    <script><!--
     Document.getElementById("JSapp".innerHTML="Hello World JavaScript"; -->
    </script>
    <noscript>No JavaScript Support; Please Enable JavaScript!</noscript>
    <style> type=text/css><!-- #b (background-image:url(b.png);) --></style>            
   </head>
   <body>
    <!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
   </body>
  </html>

Next, let’s look at the parameters that can be used by all HTML5 tags, and then we look at anchor tags, which are contained in the <head> (content) section of HTML5 document and application markup.

Summary

In this chapter, you learned about HTML5 document processing using JavaScript (JS) and cascading style sheets (CSS) with the <script> tag and <style> tag. You also looked at the <noscript> tag, which works in conjunction with the <script> tag. You saw how to use <script> internally in the HTML5 document, and how to use the <script> tag to override externalized CSS assets for localized style sheet changes.

In the next chapter, you learn about HTML5 global parameters.

Comments are closed.

loading...