Linking to another part of the same page is known as within-page linking and uses the same underlying principle as linking to a whole page, except that the points to which to link first have to be identified, after which the anchor element is used to link to them. The points are identified by using the id or name attribute.
1. Using the id Attribute
Figure 4.23 shows how the id attribute is used to link within page, and Figure 4.24 shows the rendered result. The three sections to navigate to are identified as “ instruction_video,” “situation_video,” and “scripted_video.” The <a> element is then used to create links to the three sections from the menu at the top of the page, as well as to the start of the page from each section. Notice that the value of each href attribute starts with a # symbol, followed by the value of the id attribute of the element (i.e., section) to which to link. Using the # symbol alone for the value of the href attribute means to link to the start of the current page. An empty string (e.g., href=““) or just href without any value can also be used.
2. Using the name Attribute
To use the name attribute to link within a page, you use the attribute with the <a> element to create anchors at the points to link to (i.e., the start of the page and the start of each of the three sections). Then, you use the <a> element again with the href attribute to create the necessary hyperlinks, again starting the href attribute’s value with the # symbol, followed by the value of the name attribute of the <a> element (i.e., section) to which to link. This code is shown in Figure 4.25. Notice that no content is placed between the opening and closing tags of the <a> elements used to define the named anchor points to which to link. This is because it is not necessary.
CHALLENGE 4.10
What will happen if the name attributes in the example are on the header elements instead of being on the <a> elements, and what is the problem with this, if any?
3. Within-Page Links in Web Design
The use of within-page links is generally discouraged for various reasons. One, according to the NN Group, is that it violates the mental model that users have of the way a hyperlink should behave, and so, it can confuse them. This model is that a link leads to a new page that is displayed from start, and the Back button takes users to the previous page. However, the use of within-page links can be less confusing if it is made clear to users what to expect when they click them. One way in which this can be done is to have link description say where a link leads, for example, “for more, click to go to the relevant section.” Also, there are situations where within- page links are acceptable, such as when the sections of a page are summarized at the top of the page, with links leading directly to the sections. Examples of these types of situations include when presenting alphabetized lists, frequently asked questions (FAQs), and a page that has a table of contents at its start that leads to sections in the page, such as those shown in Figures 4.23-4.25.
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.