Dreamweaver Workbook
Anchor

Part A | Part B | Part C

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

  1. To create a link to another document, by using the href attribute : <a href="document.html"></a>
  2. To create a bookmark inside a document, by using the name attribute : <a name="top" id="top"></a>

The a element is usually referred to as a link or a hyperlink.
The most important attribute of the a element is the href attribute, which indicates the link’s destination.

Attributes for A and Link
The following sections describe the attributes appropriate to either Anchor or LINK elements.
  1. HREF (link to object)
  2. NAME (link from object)
  3. REL (relationship between objects)

By default, links 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 can customize your own colors for your links, hover links, active links, and visited links.

Tips
  • The attributes: hreflang, media, rel, target, and type attributes cannot be present if the href attribute is not present.
  • A linked page is normally displayed in the current browser window, unless you specify another target.
  • Use CSS to style links.
Differences 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 has no 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.

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 following
    • 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

Part A

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.
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.
Note: Anchor names are case sensitive. To link to a named anchor using the point-to-file method.

Part B

  1. Open the document containing the named anchor you want.
    Note: Choose View > Visual Aids > Invisible Elements to make the anchor visible if you don't see it.
  2. In the Document window's Design view, select text or an image you want to link from.
    (If this is another open document, you must switch to it.)
  3. 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.

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

Note: Anchor names are case sensitive. To link to a named anchor using the point-to-file method.



Back to Top
Back to Navigation Page