Anchor

The <a> tag defines a hyperlink, which is used to link from one page to another. An anchor can be used in three ways:

1. To create a link to another document, by using the href attribute : <a href="document.html"></a> [Internal (within site)]
2. To create a bookmark inside a document, by using the href attribute : <a href="top"></a> [Internal (within page)]
3. To create a bookmark inside a document of another website, by using the href attribute</a> [External (outside site)]

Attributes of Ancher Tag:

• href (link to object)
• id (link from object)
• ref (relationship between objects)
• hreflang - specify language of target document
• media - define media
• target

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

By default, hyperlinks will appear as follows in all browsers:

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

You need customize your own colors for your links, hover links, active links, and visited links.

Tips of Using Anchor Tag:

• A linked page is normally displayed in the current browser window, unless you specify another target
• Attributes cannot be present if the href attribute is not present
• Use CSS to style links

Different Ancher Usage Between HTML 4.01 and HTML5

In HTML 4.01, the <a> tag could be either a hyperlink or an anchor. In HTML5, the <a> tag is always a hyperlink, but if it doesn't have href attribute, it is only a placeholder for a hyperlink. HTML5 has some new attributes, and some HTML 4.01 attributes are no longer supported.

Named Anchors in HTML5

The traditional way to create named anchors (bookmarks) on a page was to use <a name="top">Top of page</a>. If you are working in HTML5 you'll find that your html validator will indicate this as an error, although it will still work in current browsers. In an HTML5 document, you need give the anchor/bookmark an ID and target that in your link.

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

Linking to a Specific Place in a Document

You can use the Properties inspector to link to a particular section of a document by first creating named anchors. Named anchors let you set markers in a document, which are often placed at a specific topic or at the top of a document. You can then create links to these named anchors, which quickly take your visitor to the specified position. Creating a link to a named anchor is a two-step process. First, create a named anchor; then create a link to the named anchor.

To Create a Named Anchor:

1. In the Document window's Design view, place the insertion point where you want the named anchor
2. Do one of the followings
   • Choose Insert > Named Anchor
   • Press Control+Alt+A (Windows) or Command+Option+A (Macintosh)
   • Select the Common tab in the Insert bar and click the Named Anchor button

In the Anchor Name field, type a name for the anchor. For more information, see Setting the Named Anchor option.
The anchor marker appears at the insertion point.

Note: If you do not see the anchor marker, choose View > Visual Aids > Invisible Elements.

Part C

To Link to a Named Anchor:

1. In the Document window's Design view, select text or an image to create a link from.
2. In the Link text box of the Property inspector, type a number sign (#) and the name of the anchor. For example:
   • To link to an anchor named "top" in the current document, type #top
   • To link to an anchor named "top" in a different document in the same folder, type filename.html#top
   • Anchor names are case sensitive. To link to a named anchor using the point-to-file methodOpen the document containing the named anchor you want: Choose View > Visual Aids > Invisible Elements to make the anchor visible if you don't see it.
3. In the Document window's Design view, select text or an image you want to link from.
4. Do one of the following:
   • Click the Point-to-File icon to the right of the Link text box in the Property inspector and drag it to the anchor you want to link to: either an anchor within the same document or an anchor in another open document
   • Shift-drag in the Document window from the selected text or image to the anchor you want to link to:
     either an anchor within the same document or an anchor in another open document.
   • In the Anchor Name field, type a name for the anchor. For more information, see Setting the Named Anchor option. The anchor marker appears at the insertion point.

Note: If you do not see the anchor marker, choose:
View > Visual Aids > Invisible Elements.

 

Back to Top
Back to Navigation Page