Anchors within the same page not working?

Question

I'm trying to link to elements within the HTML of my page, but it's not working and I'm unsure as to why.

Here's the initial link:

<ul>
    <a href="#"><li>About Me</li></a>
    <a href="#"><li>Past</li></a>
    <a href="#Work"><li>Work</li></a>
    <a href="http://blog.tommaxwell.me"><li>Blog</li></a>
</ul>

I'd like all the li's in this list to be links to somewhere else on the page (except the last one).

And at the top of this code is where I'm trying to link to:

    <div id="Work">
    <a name="Work"><h2 id="work-title">Work</h2></a>
        <ul>
            <li>
                <h3>BrainDB</h3>
                <p>BrainDB is a new startup I'm working on with my co-founder, <a href="http://www.twitter.com/masonlong" id="mason">@masonlong</a>. I write everything from Rails to AngularJS and CSS. BrainDB's goal is to augment the mind with useful and inviting services.</p>
            </li>

            <li>
                <h3 id>SummarizeIt</h3>
                <p><a href="http://54.225.211.118/" id="summarize">SummarizeIt</a> is a JavaScript project that I built during a weekend. It utilizes an API for summarizing content, like blog posts, into bit-sized chunks. </p>
            </li>

            <li>
                <h3>Freelance</h3>
                <p>I freelance from time to time. I work with personal clients, as well as through <a href="https://www.elance.com/s/tommaxwell/?utm_medium=social&utm_source=twitter&utm_campaign=free&SiteTarget=share_profile&utm_term=3712117" id="elance">Elance</a>. I'm <a href="mailto:[email protected]" id="email">available</a>.</p>
            </li>
        </ul>
    </div>

Do the areas I link to have to use the section tag? I have multiple of these divs with ul's in them.

Answer 1

It's important. Anchors will not work on all pages, have tag <base> in head (but root page), if href of anchor is page-relative (begins with #).

For example you are on the page:

https://example.com/the/page/

Base tag on page like this:

<base href="https://example.com">

In code of this page there is an anchor:

<a href="#anc">anchor</a>

With base-tag it'll follow to https://example.com/#anc , not what was expected.

To resolve this issue, you can do one of this:

1. Use domain-relative anchor.
2. Overload anchor click with javascript and swap url to domain-relative.
3. Delete base tag - it is often unused.

Answer 2

Hi you have to use 'a id' to be called by 'a href'

Here is the example:

<a href="#Works">My Works</a>

it will call:

<a id="Works">Works</a>

Demo

Answer 3

The anchor needs to have the ID or name of Work but you are using it twice.

HTML Tags - links

<a href="#Anchorname">linked text</a>

(Target point) 
<a name="Anchorname">a named anchor</a>