1

Putting a link to text is really straightforward: <a href=www.link.com> Text </a>, and so is making that link a picture, but what I want to know how to do, and i have not yet found the answer through numerous google searches, is how i would have a table of contents at the top where each item is a clickable link that brings you down further in the page. How does one use internal links for text on the same page?

3 Answers3

2

I believe if you create a <div id="section1">Text </div> and you put a #section1 into the URL the browser will set the page to that section.

You can read more here https://en.wikipedia.org/wiki/URI_fragment

GetFuzzy
  • 2,116
  • 3
  • 26
  • 42
1

It is very simple. You just have to add an id to whatever element you want to link to. For example, <h1 id="Hello"></h1>. Then set your href to a # and then the id, <a href="#Hello">Go to Hello</a>.

bobsfriend12
  • 418
  • 4
  • 8
  • I've given this one the best answer vote because it most concisely answers my question. For a little more in-depth learner, check out the bigger answer. I appreciate anyone who can find the least amount of writing to answer a programming question, all the answers in this thread are correct. Thoughts: there's way too much spaM in HTML. –  Feb 14 '21 at 22:37
0

You can give the text elements id's, and then link to these id's in the href attribute of the links in the table of contents by prefixing the id with a hash sign. Example:

#tableofcontents {
  background-color: #ccc;
}
<div id="tableofcontents">
  <ul>
    <li>
      <a href="#ref1">Reference 1</a>
    </li>
    <li>
      <a href="#ref2">Reference 2</a>
    </li>
    <li>
      <a href="https://en.wikipedia.org/wiki/URI_fragment#Examples">You can even point the link to a specific element on another website</a>
    </li>
  </ul>
</div>
<p id="ref1">A paragraph with much text inside. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy.</p>
<p id="ref2">The second paragraph; it still has much content, but less than the previous one. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam
  spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy. SPAM Spam spam spammy.</p>
TheEagle
  • 5,808
  • 3
  • 11
  • 39