Posted February 25th, 2014 at 11:27am by Dan Birlew in HTML. Comments Off on HTML Links
Chances are that if people made it to your web page, you might want to send them to another. HTML links provide the solution.
HTML links are defined by the <a> tag. The reason for the use of the letter “a” is that in older versions of HTML links were originally called “anchor tags”, but this terminology was never really favored and is now deprecated as of HTML 5. To turn text into a link, simply wrap it in <a> tags:
Text wrapped in <a> tags automatically takes on the following default characteristics:
- The text becomes underlined and colored blue
- Moving the cursor over a link causes the cursor to turn into a pointer
- Clicking a link causes it to turn red while the mouse button is held down (known as the link’s “active” state)
- Links to pages you’ve previously visited turn purple
As with paragraphs and headers, spaces and special characters can be used in links, like so:
<a>Link Text</a> <a>Another-Link</a> <a>::A Funky Link::</a>
Defining the Link Destination
Wrapping text in <a> tags defines a link. However, the link does nothing without further direction. The href attribute tells the link where to direct the user when clicked:
When the browser arrives at the destination above it will look for a file named “index” to display. The file type can be index.htm, index.html, index.php, index.aspx, and so on. Depending on the server configuration and rewrites established, the webmaster may hide the filename in the URL so that it never displays, or displays an error page if typed directly.
To link to a specific page at a site, use the full filename, such as: http://www.google.com/help.html (example, page does not exist).
To link to a page in a subfolder, use forward slashes before and after the subfolder, such as: http://www.google.com/analytics/
Subdomains are linked by replacing the dub-dub (www) with a word, such as http://maps.google.com
All of the above are valid link structures.
Opening a Link in a New Window
When clicked, a link will redirect the browser to a new location, as specified in the href attribute. Setting the target attribute will allow you to open a link in a new window or new browser tab:
<a href=”http://www.google.com” target="_blank">Google</a>
The dubious benefit of this practice is that your site remains open in the user’s browser. The thinking is that when the user is done browsing in the other window they will close it and return to browsing your site. However there is little evidence that this actually works, even within analytics tracking.
Linking to Another Part of a Document
The id attribute can be used to create a bookmark link to another location anywhere in a document. For example, if you give your body tag an id, such as:
Then you may place a link near the bottom containing hashtag link that would allow the user to “jump” back up to the top of the page, such as:
<a href="#body">Jump to Top</a>
To jump to a specific segment in another page, structure the href attribute with a trailing hashtag link, like so:
The “mailto” protocol allows you to create links that when clicked create a new email message with the user’s default email software, such as Windows Mail or Outlook:
<a href="mailto:email@example.com">Send Me an Email</a>
To email several addresses at once, use commas to separate them:
<a href="mailto:firstname.lastname@example.org,email@example.com">Email All Accounts</a>
To CC or BCC an address, put a question mark (query) and cc= or bcc= after the main email address. Use an ampersand for more than one query (ignore line breaks below, should be all one line):
You can also specify a subject line and suggest body text of the message, though the user has the ability to change before sending:
Note the use of the code %20 to preserve spaces in text. Also note that if the user does not have email software installed on their device then email links will not work.
In my next post I’ll explain how to use images on your webpages, and also how to use them as links.