Search code examples
jquerycsshtmlhrefsemantic-markup

Can I link to internal parts of my HTML page?

One can, of course, place links inside HTML table cells, as I have done here in the first row, using HTML like this:

<th><a href="http://translate.com" target="_blank">translate.com &amp; https://translate.google.com</a></th>
<th><a href="http://www.bing.com/translator/" target="_blank">Bing Translator</a></th>

Is it possible to, instead of linking an href tag to an external web page, link to an internal piece/fragment (I don't know if that's the correct terminology, or if that signifies something else specific).

What I would like to do is have several tables on a page, separated by H1 tags naming the tables, and then, when a link in the "master" table at the top is selected, the page is scrolled down to the location desired.

I'm hoping I can do something like this (pseudo-markup):

<th><a href="MesaTisch">Spanish Table / German Table</a></th>
. . .
<h1 id="MesaTisch">Español Table / Deutsch Table</h1>

Is this possible? If so, am I on the right track? Or would this be better handled with jQuery or CSS?

Solution

  • You're close. When linking to an element by id, prepend #:

    <th><a href="#MesaTisch">Spanish Table / German Table</a></th>
...
<h1 id="MesaTisch">Español Table / Deutsch Table</h1>