loading...

HTML5 – HTML5 Navigation: Using an Anchor Tag for Hypertext

This chapter focuses largely on the anchor (<A> or <a>) tag, which added the differentiating hypertext features to HTML, or Hypertext Markup Language. The anchor tag originally supported URL links, allowing you to go to other websites, called hypertext, as well as anchors or page locators, allowing you to jump to different locations in the same URL (website). HTML5 now only supports URL linking with the <a> tag; however, I cover the legacy parameters for the <a> tag to be complete about this anchor tag element’s coverage.

In this chapter, I go over a dozen parameters supported by HTML’s anchor tag, seven of them are supported in HTML5, and five are also supported versions prior to HTML5.

HTML Anchor Tag Attributes: All Versions

This chapter covers the anchor or <a> tag used for hypertext, or linking across different HTML5 documents and applications, as well as a dozen anchor tag attributes, characteristics, or parameters. It is logical to cover this first, before

we get into the plethora (around a hundred) of tags that are children of the <body> tag, because hypertext differentiates HTML5 and the anchor tag is commonly used to create navigation to other sections of a website. This is typically done by using CSS3 to style links so that they look like buttons. Table 7-1 shows the parameters used with the anchor <a> tag: the first two only work with HTML5, the next five work with all HTML versions, and the last five do not work with HTML5.

Table 7-1. HTML5 <a> Tag Attributes

Supported and Not Supported

Global Parameter

Global Parameter Purpose

download

Specify if an element content is editable or not

media

Specify context menu for the HTML5 element (tag)

href

Specify custom data attributes for your document

hreflang

Specifies if an element is draggable (or is not)

rel

Specifies a drop processing (copy, move or link)

target

Specify visibility (relevancy) for each element

type

Specify spelling and grammar check for elements

charset

Specifies to execute scripts after HTML Parsing

coords

Specify a keystroke shortcut to focus an element

name

Allows in-line CSS style declaration for element

rev

Specifies the tabbing order for that element

shape

Specifies extra information regarding an element

Let’s get into the seven HTML5 global parameters first.

Anchor Tag HTML5 Parameters

: Hypertext’s HREF

The most important parameter for using the anchor <a> tag in HTML5 is the href, or hypertext reference, parameter. It uses a URL, or Uniform Resource Locator, as the parameter value. The URL is a website address that begins with an http:// Hypertext Transfer Protocol (HTTP) header and then the web address. For example, the Apress website is at
http://www.apress.com
.

The following is an example of a hypertext link using the <a> tag with the href parameter:

<a href="http://www.Apress.com">Click here to open the Apress website</a>

As the default, links not yet visited (clicked) are blue, visited links are purple, and active links are red. Links are also underlined by default, although, this can be changed using CSS3, if you want to style a link differently.

Without the href parameter, six of the twelve anchor tag parameters cannot be used. These include download, target, media, rel, type, and hreflang, which we’ll cover next.

The HREFLANG Parameter: Hypertext Link Language Support

The
hreflang

=“language abbreviation” parameter (or attribute) allows you to specify the language used by your hypertext link. We have looked at this before, so I will just reference a quick example, and then we can move on to the other anchor tag parameters. The following is an example of a language specified link using an <a> tag:

<a href="http://www.Apress.com" hreflang="fr">Bonjour! www.Apress.com</a>

Language codes are formally defined via ISO 639, which are found at the following websites:


  • http://www.iso.org/iso/home/standards/language_codes.htm
    (ISO.org)


  • https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
      (Wikipedia)

Next, let’s look at the two tags that are only supported in HTML5: the
download

tag and the media tag.

The DOWNLOAD Parameter: Downloading Files Using the A Tag

When present, the
download

parameter (or attribute) tells the HTML5 parsing engine (browser or operating system) that the file referenced using the href parameter needs to be downloaded, rather than loaded and parsed as an HTML5 document or application.

To download a file, such as the animated MindTaffy logo found on
www.WallaceJackson.com
, you would specify the file name in the href parameter rather than an HTML website. You would also add the download parameter, which acts like a Boolean flag, so the download parameter present means download=“true” and the download parameter absent means download=“false”. To accomplish this, you would modify your HTML5 tag markup to look like this example:

<a href="!http://WallaceJackson.com/MT240.gif" download>Download Logo!</a>

Next, let’s take another brief look at a media parameter.

The MEDIA Parameter: What Media Device Does a Link Support?

The media=“media/device types” parameter

(or attribute) was covered in Chapter 4, so we do not need to cover it here, other than to show an example of its use with the <a> tag. The following is an example a link specifying a device type:

<a href=http://www.iTVset.com" media="screen">iTV Set - Display: Screen</a>

Next, let’s take a look

at how you can use the target parameter to tell the browser how and where to open your new hyperlinked document.

The TARGET Parameter: Where to Open a Hypertext Document

The
target

=“_constant” parameter (or attribute) allows you to specify the location that your HTML5 application opens your URL link in. There are four value options for this parameter, _blank, _self, _ parent, and _top. You can also use a frame name, although since framesets are seldom used anymore, this is quite rare, as are the _parent and _top options. Most developers use _blank to open a new tab in the browser, or _self (which is the default if there is no target parameter specified in the <a> tag), which replaces the current HTML5 content with that specified in the URL from using the href parameter.

To create a new tab for your linked document, you use the target=“_blank” parameter inside your <a> tag, as shown in the following example:

<a href=http://www.iTVset.com" target="_blank">Open iTV Set in a new Tab</a>

To replace the currently displayed HTML content with the linked document, you should use the target=“_self” parameter in your <a> tag, as shown in the following example:

<a href=http://iTVset.com" target="_self">Replace this site with iTV Set</a>

To replace the currently displayed HTML content in the parent frame with your linked document, you’d use the target=“_parent” parameter in your <a> tag, as follows:

<a href=http://iTVset.com" target="_parent">Open iTV Set in Parent Frame</a>

To replace currently displayed HTML5 content at the top of your frameset (which fills an entire tab or window) with your linked document, you use the target=“_top” parameter inside of your <a> tag, as follows:

<a href=http://iTVset.com" target="_top">Open iTV Set in the Full Window</a>

To replace currently displayed HTML content in any named frame within your frameset with your linked document, you would use the target=“frame-name” parameter inside of the <a> tag, as shown in the following HTML5 markup example:

<a href=http://iTVset.com" target="framename">Open iTV Set in this Frame</a>

Next let’s take a look

at how to define the relationship between linked documents in HTML5 by using the rel parameter.

The REL Parameter: Define a Relationship to the Hypertext Link

The

rel=“relationship type” parameter (or attribute) allows you to define the type of relationship that exists between the current HTML5 document and the document specified in your href parameter by using the URL value. There are a dozen possible values that can be used in the <a> tag’s rel attribute, including alternate, author, bookmark, help, license, next, nofollow, noreferrer, prefetch, prev, search, and tag. Some of these are the same as the rel parameter supported by the <link> tag; however, some of them are different parameters for the <a> tag. Table 7-2 lists these parameters along with their purpose.

Table 7-2. HTML5 Anchor Tag rel Attributes

REL Parameter

REL Parameter Purpose

alternate

Specifies an alternate version of HTML5 document

author

Specifies your author profile for HTML5 document

bookmark

Specifies permanent URL to bookmark the document

help

Specifies the URL (a link) to the help document

license

Specifies a URL (a link) to a copyright document

next

Specifies next document in a series of documents

nofollow

Specify spelling and grammar check for elements

noreferrer

Specifies to execute scripts after HTML
parsing

prefetch

Specify a keystroke shortcut to focus an element

prev

Allows in-line CSS style declaration for element

search

Specifies the tabbing order for that element

tag

Specifies extra information regarding an element

To create an alternate version of a linked document, you use a rel=“alternate” parameter inside the <a> tag, as shown in the following HTML5 markup:

<a href=http://www.iTVset.com" rel="alternate">Alternate iTV Version</a>

To reference your Author Profile version for your linked document, you would use this rel=“author” parameter inside your <a> tag, as shown in the following HTML5 markup:

<a href=http://www.WallaceJackson.com" rel="author">Author Website</a>

To create a bookmark link version for a linked document, you use the rel=“bookmark” parameter inside the <a> tag, as shown in the following HTML5 markup:

<a href=http://www.iTVset.com" rel="bookmark">Bookmark for iTV Set Site</a>

To create a help document version for a linked document, you use a rel=“help” parameter inside the <a> tag, as shown in the following HTML5 markup:

<a href=http://www.iTVset.com" rel="help">iTV Set Website Help Document</a>

To create a licensing document for a linked document, you use the rel=“license” parameter inside of an <a> tag, as shown in the following

HTML5 markup:

<a href=http://www.iTVset.com" rel="license">Copyright License Document</a>

To designate the next version for your linked document series, you should use the rel=“next” parameter, inside an <a> tag, as shown in the following example:

<a href=http://www.iTVset.com" rel="next">The Next Document in a Series</a>

To instruct search engine robots not to follow (or rank) a linked document, you should use the rel=“nofollow” parameter, inside of your <a> tag, as shown in the following example:

<a href=http://www.iTVset.com" rel="nofollow">Do Not Follow (Rank) Link</a>

To hide the fact that links to another website came from your website, you would utilize the rel=“noreferrer” parameter, inside of your <a> tag, as shown in the following example:

<a href=http://iTVset.com" rel="noreferrer">No Site Referrer Info Sent</a>

To instruct HTML5 rendering engines to “pre-load,” or to cache a document before it is needed, that is, before your link is clicked by a user, you would use a rel=“prefetch” parameter, inside of your <a> tag, as shown in the following example:

<a href=http://www.iTVset.com" rel="prefetch">Prefetch This Document</a>

To designate a previous version for your linked document series, you should use the rel=“prev” parameter, inside the <a> tag, as shown in the following example:

<a href=http://www.iTVset.com" rel="prev">Previous Document in a Series</a>

If you create a search

tool user interface (application) for the document you can link to this HTML5 search application, and then utilize the rel=“search” parameter inside of your <a> tag, as shown in the following example:

<a href=http://www.iTVset.com" rel="search">Custom Search Utility Link</a>

To quote the W3C directly, regarding this parameter: “The search keyword indicates that the referenced document provides an interface specifically for searching the document and its related resources.” Creating a custom search interface (user interface application) is no easy task, and is somewhat rare across smaller websites, but does exist on larger sites.

To instruct search engine robots that the text used in a <a> tag is a relevant keyword related to the current document’s topic, you should use a rel=“tag” parameter, inside of your <a> tag, as shown in the following example:

<a href=http://iTVset.com/itv-ebooks" rel="tag">Tag the ebooks keyword</a>

Next, let’s take a brief review of your type parameter.

The TYPE Parameter: MIME Types, Media Types, and File Types

We covered the type parameter already, during Chapters 4 and 5, so let’s just suffice it to say here that the anchor <a> tag supports the definition of a MIME (media or file) type with the

type=“file type” parameter. In case you are wondering, MIME stands for Multipurpose Internet Mail Extensions, as it was used originally for e-mail and expanded later to be used for servers, browsers, and applications. Usage of the type parameter in your <a> tag might look like the following HTML5 markup:

<a href=http://iTVset.com" type="text/html">iTV Set: An HTML Website!</a>

Next, let’s cover

non-HTML5 anchor tag parameters, so we have comprehensive coverage of hypertext during this chapter.

Anchor Tag Non-HTML5 Parameters: Legacy Code

Finally, let’s take a quick look at the five anchor tag parameters that do not work in HTML5, but which do work for HTML4 and earlier, just in case you are doing some legacy code maintenance or supporting multiple browser revision numbers.

The CHARSET Parameter: Hypertext Link Character Set Support

We covered the charset parameter in Chapters 4 and 5, so I’ll just reiterate here that your anchor <a> tag supports character

set definition using the charset=“charset” parameter. Most HTML documents or apps use the UTF-8 or ISO-8859-1 preset.

The following is an example of a character set specified link by using an <a> tag and charset parameter:

<a href=http://iTVset.com" charset="UTF-8">iTV Set: A UTF-8 Website!</a>

Next, let’s take a closer look at the coords parameter.

The COORDS Parameter: Define Coordinates for Your Image Map

The
coords

parameter (or attribute) tells the HTML5 parsing engine the coordinates for the file referenced using the href parameter. It is used in conjunction with the shape parameter. It created image maps, which are no longer supported in HTML5.

HTML tag markup looks like this example:

<a href=http://iTVset.com" shape="rect" coords="0,0,240,320">Image Map</a>

Next, let’s take brief

look at the name parameter.

The NAME Parameter: Naming a Link (Supported Prior to HTML5)

Prior to HTML5, the
name

parameter (or attribute) specified the name of the anchor, but it was deprecated (support was discontinued) with the anchor (jump to different part of document) feature. Therefore, I do not need to cover it beyond showing an example of its use with the <a> tag. To simulate this in HTML5, use an id parameter. The following is an example of a named anchor in HTML4 and older versions:

<a href=http://www.iTVset.com" name="anchorname">iTV Set Anchor Name</a>

To create a named link in HTML5, you would use this HTML markup:

<a href=http://www.iTVset.com" >iTV Set Link Name Using ID</a>

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

The REV Parameter: Where to Open a Hypertext Document

The
rev

parameter (or attribute) is the opposite of the rel parameter. It is no longer supported in HTML5.

To create the reverse relationship for a linked document, you use the rev=“constant” parameter

inside your <a> tag, as follows:

<a href=http://www.iTVset.com" rev="alternate">An Opposite of an iTV Set</a>

Next, let’s look at the shape parameter.

The SHAPE Parameter: Define the Shapes for Your Image Maps

The
shape

parameter (or attribute) tells the HTML5 parsing engine the shape (rect or circle) used for the file referenced using an href parameter. It is used in conjunction with the coords parameter. It created image maps, but it is not supported in HTML5.

HTML tag markup looks like this:

<a href=http://iTVset.com" shape="circle" coords="0,0,240,320">Image Map</a>

Now you are ready to move on to the remaining document content design, creation, and publishing tags supported in HTML5. We are making steady progress and we are about to have fun using multimedia design elements in our HTML5 applications!

Summary

This chapter covered hypertext in HTML5 by using the anchor or <a> tag and a dozen of its parameters. You learned about the href parameter and Hypertext Transfer Protocol (HTTP). You also looked at several parameters that work in HTML5, and some that do not.

The next chapter discusses the HTML5 tags that support the addition of new media elements, including imagery, audio, and video. These allow developers to add visual (and aural, with audio) pizazz to their HTML5 website, document, or application.

Comments are closed.

loading...