HTML Basics For The New Blogger – Part 3

Hyperlinks

Hyperlinks are the foundation of web page navigation on the Internet. They allow us to move from page to page by simply clicking on the highlighted text or image. Hyperlinks are usually underlined and cause your mouse cursor to change to the “hand” when you move your mouse over them.

Hyperlinks are also useful for allowing your readers to jump to a specific section of your page via a bookmark, rather than jumping to a completely different page. Try these bookmarks: Top of Page and Bottom of Page

Anchor (Hyperlink)

Tag: <A>
End Tag Required: Yes

Example:
Visit NewBlogger.net to learn <a href=”http://newblogger.net”>how to start a blog</a>.

Results:
Visit NewBlogger.net to learn how to start a blog.

A link to another web page always has at least two parts: the URL and anchor text. The URL (Uniform Resource Locator) is the address to documents or other resources on the World Wide Web. Anchor text is the word or phrase which is enclosed by the anchor tag, <a>. You can also place a link on an image in instead of using anchor text.

URL: HREF Attribute

Usage: href="insert an address here"

The href attribute tells the browser which address to navigate to when the link is clicked. The address value can be either an absolute or relative link. Here are the differences between relative and absolute links.

Anchor Text

Usage: <a href="contact.html">insert anchor text here</a>

The anchor text is inserted between the opening and closing tags of the anchor element, just like you would use a paragraph tag.

You should pay attention to the words or phrases you enclose within your anchor tags because search engines value quality anchor text. Try to use words and phrases that will help drive organic search traffic to your site.

For example:

Advice and resources for new bloggers.

is better than:

Click here for advice and resources for new bloggers.

Do you see the difference? The first link will help “new bloggers” find this site much more easily than “click here“.

Linking Images

You can add hyperlinks to images in the same way you use keywords in your anchor text. You simply replace the anchor text with an image inside the <a> tag. Here’s an example:

<a href="http://en.wikipedia.org/wiki/Don't_Worry,_Be_Happy"><img border="0" src="smiley.jpg" /></a>

One thing to note regarding links on images: Make sure you add the border="0" attribute on your <img> tag or the image will have an ugly border around it, like this:

Optional Anchor Tag Attributes

Title Attribute

Usage: title="insert link title or description here"

The title attribute allows you to display alternate text when a visitor moves their mouse over the link without clicking it. Using the title attribute has two huge benefits:

1. Titles provide additional feedback to the visitor. The title tag should include a more detailed (yet brief) description of the link. This gives your visitor more information to decide if they want to click the link or not.

2. Search engines love link titles. Using a title on your link provides more context to the anchor text. This helps search engines classify the keywords in your anchor text to the appropriate subject matter. As a result, your keyword density increases and it will be easier for the search engines to return more relevant results to people searching for your keywords.

Move your mouse over this example of anchor text with a title.

<a href="http://newblogger.net" title="Helping New Bloggers Succeed">anchor text</a>

Target Attribute

Usage: target="insert a defined target value here"

The target attribute tells the browser which frame target it should use to open the link. This attribute is particularly important if your web site uses frames, but most sites do not: it’s just not a good design practice. The most common use for the target attribute is telling the browser to open the link in a new window.

If you do not include the target attribute with your anchor tag, the browser will open the link in the current browser window. These are the acceptable values for the target:

• _blank – opens the link in a new window
• _self – opens the link in the current frame (if your site uses frames)
• _parent – opens the link in the immediate parent frame (frames)
• _top – opens the link in the full unframed window (frames)

Open the New Blogger home page in a new window.

<a href="http://newblogger.net" target="_blank">New Blogger</a>

No Follow Attribute

Usage: rel="nofollow"

In an effort to prevent comment spam, Google implemented the nofollow attribute which tells the search engine spider not to give the site the link refers to any credit in the search rankings. I’ll let you decide the philosophical question of whether to follow or not to follow, but I’ll show you how to implement the nofollow attribute either way.

To mark a hyperlink as nofollow, you use the rel="nofollow" attribute in your anchor tag, like this:

John Cow is off his rocker but can teach you how to make money online.

<a href=”http://www.johncow.com” rel=”nofollow”>John Cow</a> is off his rocker but can teach you how to <a href=”http://www.johncow.com”>make money online</a>.

Bookmarks

Bookmarks allow your visitors to jump from one section of a document to another without leaving the current page. These are really useful if your page is lengthy for contains discernible sections like chapters.

There are two parts to a bookmark: The bookmark and the navigation link.

Bookmark Link

The bookmark link is a named location on your page and does not require a URL or anchor text. You must use the name attribute to specify a bookmark location on your page.

Name Attribute

Usage: name=”insert bookmark name here”

The name attribute tells the browser to scroll the page to the line the anchor resides, if it is off the screen.

Here is an example:

<a name=”top”>

If you insert this anchor at the top of your page, your visitors will be able to jump to the anchor’s location when they click the navigation link.

Navigation Link

The bookmark navigation link is the same as any other link to a different page, with one exception: The href attribute should point to the bookmark name instead of an address. The bookmark name should be prefixed with the pound symbol (#) to tell the browser to look for the bookmark on the current page.

Here is an example:

<a href="#top">Top of Page</a>

Here are some more bookmarks for you to play with:

• Hyperlinks
  • HREF Attribute
  • Anchor Text
  • Linking Images
  • Title Attribute
  • Target Attribute
  • No Follow Attribute
• Bookmarks
  • Bookmark Link
  • Navigation Link

Top of Page

The next part in this series will cover images and lists.

Part 1 – Intro and Basic HTML Text Formatting
Part 2 – Paragraphs and Line Breaks, Text Alignment, and Headings
Part 3 – Hyperlinks and Bookmarks
Part 4 – Images and Lists

If you enjoyed this post, make sure you subscribe to my RSS feed!