Skip to content

Anchor Links

An Anchor link is used when you want to link to a specific spot on a page.  For example, if you have a list of questions at the top of the page and the answers at the bottom.  To link the question to the answer, add an id to the answer and then link from the question to the answer.  This can also used as a back to top link.

To create an Anchor id, click on the HTML tab in the Edit Page screen and edit the HTML code.

  • Go to the page you want to link to.
  • Click on the HTML tab.
  • Go to the area on the page where you want to link to.
  • Create an id for the link landing spot (in our example: the answer)
    • Add id=”anchor-name” within either an existing tag such as an h2 tag or add a span tag to surround the spot that is going to be the anchor (where the link will point to).
    • Sample of the anchor tag:<h3 id=”lombard”>Florida High Schools</h3>- if you have heading tags already in place (you are linking to a spot that is already a heading) <span id=”lombard”>Lombardi Scholars:</span>  - adding the <span>  </span> tags if there is not a tag in that spot already.
  • Create the link to the landing spot ( in our example: the question)
    • The actual link will use the # sign in front of the id (name) of that spot. <a href=”#lombard”> Lombardi Scholars </a>  this would be the link if you are linking within the same page.   Or <a href=”http://showcase.sites.medinfo.ufl.edu/fl-graduates-lombardi-stamps/#lombard” </a>   if the link is to a spot on a page other than the page containing the link.

Tabs and accordion menus come equipped with auto-generated IDs of their own that you can link to within the page. You have the ability to change the names of these IDs to something more obvious than the auto-generated long string of numbers and letters if you choose.

Feedback and Knowledge Base