HTML Email - How to link to anchors within document

Posted on 2003-11-18
Last Modified: 2010-07-27
I need to set up an html newsletter sent out by email. Within the newsletter I need to have a Contents section at the top that links to anchors within the body of the newsletter. As an HTML web page this isn't a problem and tests through a browser are fine. When I set the document up as stationery and email it, the anchor links simply open a blank page.

The examples I have seen that work have an absolute reference for the link to the anchor that usually takes the form

I believe that this reference is established when the email is opened at the browser rather than coded in the html page.

My question is how can I have my internal links to anchors work the same way for email stationery/newsletters?


Question by:Das246
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4

Expert Comment

ID: 9776863
give the links a relative reference...


<a href="#topic1">Topic 1</a><br>
<a href="#topic2">Topic 2</a><br>
<a href="#topic3">Topic 3</a><br>
<a name="topic1">Topic 1<a>
    The quick brown fox jumps over the lazy dog....
<a name="topic2">Topic 2<a>
    The lazy dog bit the jumping fox.
<a name="topic3">Topic 3<a>
    The fox and the dog had a fight...

Author Comment

ID: 9777004
The links already had a relative reference. When they are part of an email the email client can't work out what to do with the relative links so they are made into absolute links. If the page has a

<base href="">

then the status bar says that the anchor link is ""

If I take the <base> command out, then the link looks for:

"file:///C:/Program Files/Common Files/Microsoft Shared/Stationery/#topic1"

So I either have to manufacture an absolute link for the anchor that the email clients will understand, or I have to find the command that activates the mhtml absolute reference.

Expert Comment

ID: 9777013
what's your email client? are you using outlook express?
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 9777755
Yes. Outlook express.

Expert Comment

ID: 9783654
what you do is you highlight the hyperlink then
go to Insert > Hyperlink, then just remove the extra stuff
leaving just the name of the anchor..

file:///C:/Program Files/Common Files/Microsoft Shared/Stationery/#topic1

remove everything except for #topic1

Author Comment

ID: 9784790
Sorry, must have crossed wires. I'm proofing the end result in Outlook Express but I'm building the page in Dreamweaver MX.

The anchor link is <a name="#topic1">. The absolute link detail is added by Outlook Express after I send the email.

Accepted Solution

monvelasquez earned 30 total points
ID: 9785366
here's what i did.

Open Outlook Express
Create a new message
Click on View then check Source Edit
Select the Source TAB at the bottom of the window.
Paste all your code there

To check if it's working
Click on the Preview TAB

Author Comment

ID: 9787257
Thanks monvelasquez,

I can see what's happening now. Outlook Express places a <BASE href=...> line that needs to be deleted. Once this line is gone it works perfectly.



Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question