loading...

HTML5 – HTML5 Referencing: Using External Links and Favicons

Let’s continue by taking a look at the <link> tag. This important tag is used to connect external files, documents, and resources such as HTML5 icons, or favicons (these are used in the browser tabs), to your HTML5 documents and applications. This tag is also found at the HEAD document definition and configuration level, just like the tags covered in the previous chapters.

In this chapter, I also go over the markup (coding) format and syntax for HTML5 document-level <link> tags, including all of the various parameters. We’ll look at how to define your external documents, profiles, and asset links using the <link> tag. We’ll also look at many different types of link relationship data that you provide using the required rel parameter, one of the tag parameters used to reference external resources.

An HTML HEAD Tag to Link External Files

This chapter covers a single, high-level (in document HEAD) tag that is used to define how you want external files to be “linked” into your HTML5 document and its content. I call this “externalizing” HTML5 development assets, such as favicons and style sheets. There’s a distinct advantage to doing this, which I explain in this section before we get into how to use the <link> tag and its parameters to externalize assets. If you externalize an asset as a file in an HTML5 document, it is cached, and therefore, only needs to be loaded once, in your index.html markup. Let’s look at the advantage of this using your cascading style sheet (CSS3) asset

as an example. If you externalize your style definitions for your HTML5 website or application, this code only needs to be loaded once, even though it is referenced using the same <link> tag on every page in your website. If the CSS file is 8KB and you have 101 pages on the website, this saves you 800KB of data transfer overhead!

The LINK Relationship: Types of External Assets

The only required parameter (also called an attribute) in a <link> tag is the
rel or relationship parameter

, which tells the HTML5 parsing (rendering) engine what type of document it links. The two most commonly used are icon and stylesheet, but we go over other rel parameter options during this section of the chapter. Table 4-1 shows the various rel parameter options currently supported for the <link> tag in HTML5.

Table 4-1. Link rel Parameter Value and Purpose

Rel Parameter Value

Rel Parameter Value Purpose

alternate

Link to an alternate version of the document

author

Link to put Author Profile in search results

help

Link to the help document for the HTML document

icon

Link external icon (.ICO) resource for document

license

Link to the copyright information for document

next

Link to next document in a series of documents

prefetch

Link to a target resource that should be cached

prev

Link to a previous document in a series of docs

search

Link to a search tool for the document

stylesheet

Link to an external cascading style sheet (.css)

Let’s take a look at several of these in real-world use, starting with the HTML5 icon, popularly called a favicon. Let’s also look at how to link to your external cascading style sheet and to an author profile URL.

Linking to an Icon: Using a Favicon
in the Document Tab or App

One of the things you always want

to do for an HTML5 website or HTML5 application is to have an icon to use for visual branding purposes. This is especially important for HTML5 iTV Sets, HTML5 tablets, and HTML5 smartphones, as icons launch your app!

An example of a document LINK declaration, for a favicon for the HTML5 document, along with the top-level <head> tag it is 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 to icon resource -->
    </head>
    <body>
     <!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
    </body>
  </html>

As you can see, you also need

to provide a URL with an href parameter. Since the itvclock.ico is in the same folder, I do not need any http, domain, or folder referencing. If I had this itvclock.ico on my iTVdesign.com website instead, this tag would then look like the following HTML5 markup syntax:

<link rel="icon" href="http://www.itvdesign.com/icon-folder/itvclock.ico">

I use GIMP 2.8.16 currently to create favicons using the .ico file name extension. Make sure that the graphic is 64 pixels and square, 8-, 24-, or 32-bit color, and use a File Export As menu sequence to create it. If you need more background on this, see my book Digital Image Compositing Fundamentals (Apress, 2015).

Next, let’s take a look at linking to your external CSS3 style sheet asset so that you can “externalize” your website or application styling into one highly optimized style sheet resource asset. This reduces the amount of code in each of the HTML5 documents (pages) because styling syntax has been removed into an external resource that can simply be linked to using a few characters of markup (in this case 60 characters or bytes).

Link to a Style Sheet: Using an External Style Sheet for CSS3 Style

One of the things you always want to do for an HTML5 website or application is to have a consistent visual appearance, or styling, for your HTML5 user interface design. This is also important for visual branding purposes and is equally important for HD and UHD iTVs, HD and UHD tablets, and HD smartphones.

Your style sheet link not only needs the rel and the href parameters, but also a type parameter, declaring your MIME type for the CSS file, which is text/css, just like it would be on the server-side of the MIME declaration for the CSS file on the server.

An example of a document LINK declaration for style sheet externalization for your HTML5 document, and the top-level tags the <link> tag is nested in looks 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-8">
     <base href="http://www.iTVclock.com">
     <link rel="icon" href="itvclock.ico">
     <link rel="stylesheet" type="text/css" href="itvclock.css">
    </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 several <link> tags nested inside of your <head> tag. If your markup needs to be XHTML (XML) compliant, you add an orderly closing tag by inserting a backslash in front of the closing chevron, as is shown in the following markup syntax:

< link rel="stylesheet" type="text/css" href="itvclock.css" />              

If you wanted to add a style sheet for printed media, you would add the media parameter into the style sheet’s <link> tag to specify printed media (device hardware), as follows:

<link rel="stylesheet" type="text/css" href="itvclock.css" media="print" />                                                                              

The media parameter has nine options, including the default screen option, including the braille or the tty options for the handicapped users, aural option for audio and speech synthesis, and hardware device options, for printer (printers), projection (projectors), tv (iTV) and handheld (smartphone, smartwatch, or tablets). You can also specify more than one media device by using Boolean operators AND (and), NOT (not), and OR (comma). If you want to specify values for the device, there are parameters to specify width, height, orientation, resolution, aspect-ratio, color, color-index, monochrome, and scan or grid values.

Next, let’s take a look at your rel=“author” parameter, and its option for linking to an external author profile.

Linking to an Author Profile: Putting a Face on a Search Listing

One of the more recent

things that you are now able to do using the <link> tag for an HTML5 website or application is to have an author profile referenced via your HTML5 markup for personal branding purposes. This is especially important if you want your picture to appear in the search engine listing. I show you how to do this in this chapter with the <link> tag, as well as in Chapter 6 via the <a> (anchor) tag because the optimal way to implement it is using both a <head><link rel=”author”></head> and <body><a rel=”author”></body> markup structure (syntax) within your HTML5 document markup.

The following is an example of a document LINK declaration, for an author profile link:

<!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">
    </head>
    <body>
     <!-- iTV Clock's HTML5 Document Body Content (Tags) Will Go In Here -->
    </body>
  </html>

Notice that three key parameters were used: the required rel=“author”, an href URL for the Google+ account, and the title parameter containing the author name value.

Also, note how I spaced (formatted) the tag for enhanced readability, as extra white space (tabs and spaces) is allowed and is not processed by the HTML5 markup syntax parsing engine.

To do this thoroughly also requires an anchor tag with a rel parameter, which is covered in Chapter 6.

Next, let’s look at the other nine parameters that the <link> tag supports, six of which work in HTML5 and three of which work in HTML4 and earlier.

The LINK Tag: The Optional Link Tag Parameters

The <link> tag has

a number of optional parameters in addition to a required rel parameter. The most important is the href parameter, which allows you to specify a URL location for the external asset that is being linked to. You have seen this in use in the several <link> tag examples in this chapter, and the media parameter as well, so I will focus on the other four parameters supported in HTML5 during this section of the chapter. Other supported parameters for the <link> tag are seen in Table 4-2.

Table 4-2. Link Tag Parameters

Parameter Name

HTML5 Support

Parameter Purpose or Usage

href

Yes

Location (URL) for the linked asset

hreflang

Yes

The language used in a linked asset

rel

Yes

Relationship (type) of linked asset

media

Yes

Device type needed for linked asset

type

Yes

Media type used by the linked asset

sizes

Yes

Pixel size of a linked icon resource

crossorigin

Yes

Specify cross-origin request handling

rev

No

Relationship between linked documents

charset

No

Character encoding of a linked asset

target

No

Where a linked asset is to be loaded

The hreflang parameter specifies a language used by the externally linked asset or document. This <link> tag parameter is not as frequently implemented with HTML5 unless multiple language versions of an HTML5 document or an application have been created, and then it is needed.

The type parameter specifies what type of a file (asset) is being provided to the <link> tag. This is often called a MIME type, especially on the server-side for files supported by the server definition

syntax.

A sizes parameter specifies the icon’s dimensions in pixels (picture elements). It is often unutilized because icons are most often provided at 64 × 64 pixels.

The crossorigin parameter allows access to images, scripts, or styles that are on another server using the CORS (cross-origin resource sharing) standard. Setting this new parameter to anonymous restricts cross-sharing access between a server, and setting it to use-credentials sets the credentials flag to “true.” User credentials can be shared using cookies, HTTP authentication, or client-side SSL certificates. It can be used with the <script> tag and with the <img> (image) tag, where it is more often utilized than with the <link> tag.

Next, let’s look at the rest of the tags supported inside the <head> tag, and then we can look at hypertext (anchor tags).

Summary

This chapter talked about the HTML5 document <link> tag for linking external documents, profiles, and assets, which is also contained in the <head> tag. You looked at the required rel parameter, its values, and several examples. The rest of the optional parameters that apply to HTML5 markup, documents, and applications were also discussed.

In the next chapter, you look at the remaining <head> child tags, including the style, script, or noscript tags that influence linking to external JavaScript assets and apply exceptions to your externalized cascading style sheets.

Comments are closed.

loading...