ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

A Web Tutorial Series: The HTML Anchor Tag, More on Problem Solving, & Using Browser Development Tools

Updated on March 14, 2014

Review of the Last Tutorial

In our last tutorial, A Web Tutorial Series: Parent/Child Relationships, Images and Additional Body Tags, Comments, & Problem Solving

  • parent/child relationships
  • comments
  • including images in our web pages with the HTML <img> tag.

Comments and using parent/child relationships can be useful in problem solving. Commenting out suspect code and utilizing a "divide and conquer" technique can sometimes help isolate a problem. A good understanding of parent/child relationships and looking at the skeletal outline of the page structure can point out a misplaced tag.

Images are so important to popularizing a web page. Images can be used to get the readers attention.

Using the language of parent/child relationships sets the stage for later making pages dynamic with tools such as JavaScript.


Our New Tag for Today: The HTML Anchor Tag

An anchor tag in HTML creates a mechanism by which you can click on some text in a page and jump to another location. An anchor tag is referred to as a hyperlink. The location "jumped to" can be:

  • a location within the same web page (a labeled section of the page)
  • a page within the web site
  • an external location on the World Wide Web

It is very common to have a link to an external site. This is a great way to incorporate the information you provide in your web page with that of another page with more extensive information on some subject matter. For example, you are the owner of a plumbing supply store. A part manufacturer can give you a link to their web site, so that additional and up-to-date details at their site can be added to the generalized information contained in the web pages on your site.

Anchor tabs within you web site are really your navigation tools. From your home web page you can arrive at different pages within your site, for example a contact page,

An on-line book or manual can make extensive use of anchor tabs. The best example would be using anchor tabs in a table of contents. The tabs could be setup to jump to the various chapters within the document.


Anchor Tab Implementation

Anchor tab syntax for the hyperlink is really quite simple, but there are a few rules which must be followed. The basic syntax is:

<a href=destination>Text to activate the link</a>


Several simple examples of linking to an external site would be:

<a href="htttp://www.hubpages.com">Go see what's happening at Hubpages!</a>

Clicking on the text Go see what's happening at Hubpages! would cause the page at www.hubpages.com to be displayed.

The displayed content could be even more specific than that. For example if we knew that there was a section call revenue at the site www.xyz.com we could go to that particular section within the page by setting an anchor point as follows:

<a href="http://www.xyz.com#revenue">Go see the revenue results for XYZ Company</a>

Linking within a web site (assuming all pages at the same subdirectory level would be very similar:

<a href="staff.html">Staff Directory</a>

and if the staff.html page had sections for say Administration, Finance and Sales Departments and these sections were marked we might have something like:

<a href=""staff.html#administration">Staff Directory - Administration</a> for example.

How do we create these sections?

The sections are really bookmarks.

To bookmark a section you would use an anchor tab as follows:

<a id="administration">Staff Directory - Administration</a> and specify it at the beginning of the administration staff listings on the page.

The things to remember are the hyperlink uses the attribute href to refer to the destination. The section jumped to uses the attribute id to specify the bookmarked location.

Tips:

Be careful when naming bookmarks. Bookmark names within the same page cannot have the same name. Names must be unique.

Other attributes may be specified you may want to consider might be a style or tile attribute. Don't overdo it as it may confuse a user.

As mentioned above images can be used in place of text for the text field.

When specifying a href field be sure to add a trailing slash for subfolder access, otherwise two requests are issued to the server. The first one adds the slash, then a new request is issued on your behalf.

Blank characters are not permitted in id field names.


Simple Examples of Using Anchor Tabs

Some simple examples of links and a bookmark within the page. The text field can be anything that is legal. text size can be modified. The Text field need not be text, images can be used as well.
Some simple examples of links and a bookmark within the page. The text field can be anything that is legal. text size can be modified. The Text field need not be text, images can be used as well.
The results of running the code.
The results of running the code.

Other Things to Note About Using Anchor Tags

There are a number of other things which should be noted about anchor tags.

Hyperlink Display

By default:

  • A unvisited link is underlined in blue
  • A visited link is underlined in purple
  • An active link is underlined in red

What is an "active" link?


A link need not open in the current window. There is an additional attribute the target attribute which indicates where the link should be opened:

<a target="_blank|_self|_parent|_top|framename">

The four options are:

_blank - open the link in a new tab. There are reasons why you would want to do this. If it was likely the user would want to have access to some information on the current window while access the link. This should be used judiciously.

_self - is the default, Open the link in the current window.

_parent - open the document in the parent window.

_top - use the entire width of the window

framename - specify a named tab.

Looking at Browser Developer Tools: Google Chrome

In this tutorial we will look at the developer tools for Google Chrome. First open the Google Chrome browser. For the latest set of tools Google strongly suggest that you download the latest version of Google Canary. For our purposes at present, this is unnecessary, but be aware that browsers are always being updated with fixes and new releases.

To access the tools, open Google Chrome. Now there are two ways to get to the tools:

  • in the upper right hand corner of the screen there is (what I refer to as pancake stack) which is what Google officially calls the Chrome menu, or
  • right click your mouse and choose select inspect element

In either case, you will be presented the screen as indicated in the snapshots which follow this section .

For this tutorial we will just get familiar with the tool bar. The options are:

Elements - shows you the entire tree, the DOM, Document Object Model, associated with the page

Resources - allows you to look at resources loaded

Network - has information about requested and downloaded resources

Sources - identify sources of the current application

Timeline -provides information on where time is spent in loading and using your pages

Profiles - provides information on time spent execution time and memory usage. You can start a profile for your application

Storage - insights into storage utilization

Audits - can help identify areas for improving page download time

Console - the console serves two purposes: logging diagnostics and a shell prompt for interacting with the document.

Much of this becomes important later as you develop applications which may be accessed by a large community. One suggestion however would be take a web page you might be currently working on and familiarize yourself in just inspecting the code as well as looking at things like file path names for accuracy. This way when it may become necessary to debug JavaScript, for example, you will al least be somewhat familiar as to where certain options are found. Checking the sources is a great way of verifying the information you thought you loaded is really what is being run. Verification of running code is in part a way of problem solving

Two Ways of Getting to the Google Chrome Developer Tools

Accessing the Google Chrome Tools through the
Accessing the Google Chrome Tools through the
The second way is to right click anywhere within the menu and select inspect element.
The second way is to right click anywhere within the menu and select inspect element.
This tutorial looked at Google Chrome development tools.
This tutorial looked at Google Chrome development tools.

Apprise Us of the Relevance of this Tutorial to You

Cast your vote for Was this tutorial informative?

Comments

    0 of 8192 characters used
    Post Comment

    • Mike Summers profile image

      Mike Summers 

      3 years ago

      Any ideas on how to add anchor tags to Hubpages? I can't seem to get the editor to accept the code. That would be very useful.

    working

    This website uses cookies

    As a user in the EEA, your approval is needed on a few things. To provide a better website experience, hubpages.com uses cookies (and other similar technologies) and may collect, process, and share personal data. Please choose which areas of our service you consent to our doing so.

    For more information on managing or withdrawing consents and how we handle data, visit our Privacy Policy at: https://hubpages.com/privacy-policy#gdpr

    Show Details
    Necessary
    HubPages Device IDThis is used to identify particular browsers or devices when the access the service, and is used for security reasons.
    LoginThis is necessary to sign in to the HubPages Service.
    Google RecaptchaThis is used to prevent bots and spam. (Privacy Policy)
    AkismetThis is used to detect comment spam. (Privacy Policy)
    HubPages Google AnalyticsThis is used to provide data on traffic to our website, all personally identifyable data is anonymized. (Privacy Policy)
    HubPages Traffic PixelThis is used to collect data on traffic to articles and other pages on our site. Unless you are signed in to a HubPages account, all personally identifiable information is anonymized.
    Amazon Web ServicesThis is a cloud services platform that we used to host our service. (Privacy Policy)
    CloudflareThis is a cloud CDN service that we use to efficiently deliver files required for our service to operate such as javascript, cascading style sheets, images, and videos. (Privacy Policy)
    Google Hosted LibrariesJavascript software libraries such as jQuery are loaded at endpoints on the googleapis.com or gstatic.com domains, for performance and efficiency reasons. (Privacy Policy)
    Features
    Google Custom SearchThis is feature allows you to search the site. (Privacy Policy)
    Google MapsSome articles have Google Maps embedded in them. (Privacy Policy)
    Google ChartsThis is used to display charts and graphs on articles and the author center. (Privacy Policy)
    Google AdSense Host APIThis service allows you to sign up for or associate a Google AdSense account with HubPages, so that you can earn money from ads on your articles. No data is shared unless you engage with this feature. (Privacy Policy)
    Google YouTubeSome articles have YouTube videos embedded in them. (Privacy Policy)
    VimeoSome articles have Vimeo videos embedded in them. (Privacy Policy)
    PaypalThis is used for a registered author who enrolls in the HubPages Earnings program and requests to be paid via PayPal. No data is shared with Paypal unless you engage with this feature. (Privacy Policy)
    Facebook LoginYou can use this to streamline signing up for, or signing in to your Hubpages account. No data is shared with Facebook unless you engage with this feature. (Privacy Policy)
    MavenThis supports the Maven widget and search functionality. (Privacy Policy)
    Marketing
    Google AdSenseThis is an ad network. (Privacy Policy)
    Google DoubleClickGoogle provides ad serving technology and runs an ad network. (Privacy Policy)
    Index ExchangeThis is an ad network. (Privacy Policy)
    SovrnThis is an ad network. (Privacy Policy)
    Facebook AdsThis is an ad network. (Privacy Policy)
    Amazon Unified Ad MarketplaceThis is an ad network. (Privacy Policy)
    AppNexusThis is an ad network. (Privacy Policy)
    OpenxThis is an ad network. (Privacy Policy)
    Rubicon ProjectThis is an ad network. (Privacy Policy)
    TripleLiftThis is an ad network. (Privacy Policy)
    Say MediaWe partner with Say Media to deliver ad campaigns on our sites. (Privacy Policy)
    Remarketing PixelsWe may use remarketing pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to advertise the HubPages Service to people that have visited our sites.
    Conversion Tracking PixelsWe may use conversion tracking pixels from advertising networks such as Google AdWords, Bing Ads, and Facebook in order to identify when an advertisement has successfully resulted in the desired action, such as signing up for the HubPages Service or publishing an article on the HubPages Service.
    Statistics
    Author Google AnalyticsThis is used to provide traffic data and reports to the authors of articles on the HubPages Service. (Privacy Policy)
    ComscoreComScore is a media measurement and analytics company providing marketing data and analytics to enterprises, media and advertising agencies, and publishers. Non-consent will result in ComScore only processing obfuscated personal data. (Privacy Policy)
    Amazon Tracking PixelSome articles display amazon products as part of the Amazon Affiliate program, this pixel provides traffic statistics for those products (Privacy Policy)