Understanding anchors in html

Pluralsight courses
LinkedIn Premium uses PayScale to estimate job salaries

Premium (Not Free) Video Tutorials

Free Video Tutorials & Free Tools

How to navigate to areas on the same page only ?

Named Anchors – or how to jump within one and the same page

The feature "Named Anchors" can be used to jump around within one and the same page (file) just like you're used to do with regular links.

Using the one can jump to these anchors.

How to use Named Anchors

A life example can be found on several pages on WeetHet. Maybe you can recall page overviews, where you can click an item and have the browser move to a particular location on the page.

Although this is a very elementary feature of HTML, most of use tend to forget how it is done…

First of all we must mark the "Named Anchor". At the target location we enter:

In order to jump to this target location (te namend anchor) we can use the tag. For example:

This is my target

Note the "#"-symbol in front of the name of the anchor. This is done to avoid confusion for your websbrowser. Normally (without the "#"-symbol) the browser would start looking for a file named "MyTarget".

Named anchors can be placed on one page as many as you like.

The tag does not need to be in a particular position related to the Anchor, eithr above or below will work. Your browser will simply start at the top of the HTML-file (page) looking for the first occurance of the named anchor that matches the name it is looking for.

Note: A second named anchor with the same name is useless, since your browser always starts at the top of a webpage. This way it will never reach the second named anchor.

Related posts:

  1. Anchors Example JavaScript (JS): HTML DOM Object Collections – Anchors Example JavaScript (JS) Anchors Example JavaScript (JS): HTML DOM Object Collections - Anchors...
  2. A Tag Example – HTML Syntax – Anchor Examples A Tag Example - HTML Syntax - Anchor Examples...
  3. Anchor Examples: HTML DOM Anchor Object – Properties and Methods – Javascript Anchor Examples Anchor Examples: HTML DOM Anchor Object - Properties and Methods...
  4. String.Anchor Example – JavaScript Syntax – JS String.Anchor Example String.Anchor Example - JavaScript Syntax - JS String.Anchor Example...

Related posts brought to you by Yet Another Related Posts Plugin.

Speak Your Mind

Tell us what you're thinking...
and oh, if you want a pic to show with your comment, go get a gravatar!

Powered by WP Hashcash

This blog uses the cross-linker plugin developed by Web-Developers.Net