HTML 5 a Element

Mastering HTML5 - Part 6

Forward: In this part of the series we look at the HTML 5 a element.

By: Chrysanthus Date Published: 22 Jul 2012

Introduction

This is part 6 of my series, Mastering HTML5. I assume you have read the previous parts of the series before reaching here. In this part of the series we look at the HTML 5 a element. The a element is a double-tag element.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent. Etc.), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Main use of the a Element
An example of the a element code is:

    <a href="url">Title of New Page</a>

This tag will open the web page whose URL is the value of the href attribute. The page will open by default in the current tab window replacing the page that had the a element (hyperlink).

The target Attribute
If you want the new web page to open in a new tab window, then use an attribute called, target, as follows:

        target = "_blank"

The value of the attribute, target, is the reserved word, "_blank". For the above a element, to open the new web page in a new tab window, the inclusion of the target attribute will result in,

    <a href="url" target="_blank">Title of New Page</a>

Jumping Down the Page
If there is an HTML element down the page, you can have an a element that the user will click so that the page scrolls up to the element. Assume that you have the following paragraph down the page:

        <p id="C1">
             Details of the Computer: Microprocessor: 4GHz, RAM: 256MB
        </p>

You can have the following a element up in the page:

        <a href="myPage.html #C1">The computer</a>

The paragraph element down the page has an ID attribute and its value. The URL of the href attribute of the a element ends with # and the ID value of the paragraph element. The connection between the a element and the HTML element down the page is from the # and ID value at the end of the URL, and the ID value in the element (paragraph) down the page.

So, everything being equal, if the user clicks the a element (hyperlink), the page will scroll up until the paragraph element will just be below the bars of the browser.

Link to an Image
The a element can be a hyperlink to an image. In this case when you click the a element hyperlink, only the image will appear to replace the previous window (tab) that had the a element. The tag for this is:

    < href="imageURL">Image Title</a>

In the imageURL, the image file name such as pic.jpg would end the URL. The URL can be something like,

    http://www.somesite.com/dir1/dir2/pic.jpg

Downloading a File
When I was learning HTML, many years back, I thought, that having a file downloaded, was a difficult thing. It is not difficult; you just need to know the secret, which I give you now. The file can be an application file, an image file, a video file, or some software. The file should not be an HTML file or a text file or an image file. Any of these three files will simply open in the browser window as if it were an HTML document page.

Assume that you have a file with the name, nam.ppp, in a server and the URL for the file is http://www.somesote.com/dir1/nam.ppp. To have this file downloaded by the user, all you have to do is to place the following a element in an HTML document (body):

   <a href="http://www.somesote.com/dir1/nam.ppp">Download File</a>

When the user opens the page that has this a element, he would see the hyperlink with the content, Download File. If he clicks this link, a dialog box will appear asking him whether he wants to open the file or save it. If he clicks, Save, then the file will be downloaded into his computer hard disk. You can have some other text as content to the a element instead of “Download File”.

There is something you have to know or watch out with the downloading a element: There are certain files, of which, when their names are at the end of the URL, they will open in the browser window to replace the previous page that had the a element. Examples of such files are HTML files, text files and image files. These are files that are executable by the browser. These files are determined by their extensions. The extensions I know for this type of files are: .html, .htm, .txt and image file extensions supported by the browser. So, if in the a element, the file of the URL is not executable by the browser, then it can be downloaded, when the user clicks the hyperlink.

Content of a Element
In theory, the content of an a element can be anything. It can be an image element; it can be a paragraph element; it can be a table element; it can be a section element, etc. The following code samples, show how the a element can be used, where its content is an image or a paragraph.

    <a href="documentURL"><img src="imageURL" alt="Image Title"></a>

The above is for an image as content. Below is for a paragraph as content.

    <a href="documentURL">
        <p>
            text text text text text …
        </p>
    </a>

Here, the a tags for the hyperlink are above and below the paragraph element.

When the content of the a element is some element (e.g. paragraph) other than text, you would see the element as a hyperlink; meaning that when the mouse pointer is placed over it, the mouse pointer would become a hand.

Same Directory
Assume that you have an HTML document in a directory, and you want a hyperlink in that document, such that when the hyperlink is clicked, a new document in that same directory would open. Under this condition, the file name of the new document as value to the href attribute, suffices. Example:

    <a href="file.htm">Document Title</a>

When the user clicks this hyperlink, the file in the same directory as the currently opened document, will open. In this case, you do not need the preceding part of the URL. If you have the preceding part of the URL, there is no problem; however, you do not need that, since the two files are in the same directory.

Sub Directory to Current Directory
Assume that you have an HTML document in the current directory, and you want a hyperlink in that document, such that when the hyperlink is clicked, a new document in a sub directory would open. Under this condition the sub directory name, followed by a forward slash and the file name in the sub directory suffices as value to the href attribute. Example:

    <a href= "subDirName/file.htm">Document Title</a>

In this case, you do not need the preceding part of the URL. If you have the preceding part of the URL, there is no problem; however, you do not need that.

Time to take a break. We stop here and continue in the next part of the series.

Chrys

Broad Network

HTML 5 a Element

Mastering HTML5 - Part 6

Introduction

Related Links

Comments