Markup Language - Anchor
|
Previous: Markup Language - Phrase Elements Original Source Chapter 7 Anchors The correct term for links in HTML is "anchors". They not only allow us to point to documents, but also to specific paragraphs in a page. They can also be used as a convenient tool for "precise links". Let the link object be close to the focus. In this chapter, we will see four different anchor methods, explain the advantages of each method, and introduce how the title attribute can improve the usability of links. In addition, we will use CSS to style links. When you need to specify a specific part of the page, marking anchors is the best method. This is a common situation when designing a website. You want to link to a specific part of a page, but the user may be reading on another page. Any of the four methods discussed below can help you achieve your goal. In this example, let's say we want to link to a specific title within the same page: Method A: Empty title
Use a blank anchor tag with a name attribute to mark a specific link point. Perhaps you are familiar with this method. Putting a blank <a> before the title and linking to it (using the # symbol followed by the value of the name attribute) will allow us to link to a specific part of the page. When the page contains a long list of items that need to be scrolled, we can use this method to link to a specific item. Figure 7-1 shows the result of clicking the "About Oranges" link, which takes us to the location where we marked <a name="oranges"></a>, just above the title.  Figure 7-1. Clicking on a specific anchor link works well, but it is a bit unsemantic to waste a blank label to mark the link location. Method B can improve this. Method B: All in the name
As with method A, we still use the <a> tag with the name attribute, but this time we wrap it around the title I want to link to. This does seem to be more semantic. In method A, our link object is... well, nothing, but in method B, we not only indicate that this text is part of the title tag, but also one of the link anchors on this page. Be careful with global styles of <a> If you use method B, there is one thing you must be careful about. If you specify global CSS styles for all <a> elements (color, text size, text decoration, etc.), these styles will override the styles you specify for the <h2> element. The reason this happens is that in this example, the <a> tag is a child element of the <h2> tag that surrounds it. For example, if you have a declaration like this in your CSS:
Method B with this CSS will make the title green, bold, and underlined like the other <a> tags on the page, but it may be different from the <h2> style you expect. We can use the :link pseudo-class of <a> to avoid this (and get other benefits as well), as discussed in more detail in "Extended Techniques" later in this chapter. Richer Name Attributes One of the benefits of using Method B (as well as Method A) is that the name attribute can handle richer anchor names, specifically, the ability to use symbols within the name. For example, using Method B, you could do this (where & represents the symbol "e"):
This feature is very important when dealing with characters that are not part of the English alphabet. But there are a few methods worth mentioning. The following method does not require the use of <a> to set the anchor point. Let's look at method C. Method C: Lose the name
Ahaha, the id attribute functions just like the name attribute and can also specify an anchor for a page. In addition, method C eliminates the extra <a> tag that methods A and B needed to use the name attribute. We have reduced the source code, which is always a good thing. Since the id attribute can be added to any tag, we can easily add anchors to any element we need within the page. In this example, we choose to add anchors to the title, but we can just as easily add anchors to <div>, <form>, <p>, <ul>... and all other tags. Killing two birds with one stone The fact that in most cases we can add styles or scripting to pre-existing id attributes is another benefit of method C. For this reason, we don't need to add extra code just to set the anchor. For example, let's say you have a form for leaving comments at the bottom of a long page, and you want to link it to the top of the page. The form has been given an id="comments" for unique styling. This is so we can use the id as an anchor instead of having to add an <a> tag with a name attribute. The code might look something like this:
Also, if your page is long, you might want to include a link at the bottom that links to the top anchor so that users can "get back to the top". It is worth mentioning that although it seems to be very appropriate, it is best to avoid using "top" when specifying the anchor name. Some browsers reserve this name for special purposes, and using this name may cause inconsistent results. It is better to choose a similar name that will not cause problems. Maybe #gemesis? Or #utmost? You make up your mind. Old Browsers and ID Attributes When using only the id attribute as an anchor, there is an important drawback worth mentioning, which is that some old browsers do not support this method. Oops, this is indeed an issue that must be considered when identifying your own anchors, and it is also an unfortunate example of forward compatibility. Let's look at the last example, method D. Method D: Combine into one
If you want to achieve both forward and backward compatibility when marking up your anchors, then you will probably prefer this approach. Named anchor tags will be recognized correctly by both old and new browsers, but since the W3C deprecated the use of the name attribute in the XHTML 1.0 Recommendation ( http://www.w3.org/TR/xhtml1/#C_8 ), you will also need to use the id attribute to support future browsers. As with method B, we must be careful about the global styles that affect the <a> tag. Shared Names If you choose to use method D, it is perfectly acceptable (and probably convenient) to use the same name for both the id and name attributes, but only if they are in the same tag. Furthermore, only a few specific tags allow this, specifically <a>, <applet>, <frame>, <img>, <map>. Therefore, we move id="oranges" from the <h2> into the anchor tag. Previous Page 1 2 3 Next Page Read More |
<<: Docker intranet builds DNS and uses domain name access instead of ip:port operation
>>: An article to deal with Mysql date and time functions
Recommend
In-depth explanation of the maximum value of int in MySQL
Introduction I will write about the problem I saw...
Nginx content cache and common parameter configuration details
Use scenarios: The project's pages need to lo...
MySQL 8.0.12 Installation and Usage Tutorial
Recorded the installation and use tutorial of MyS...
Install multiple versions of PHP for Nginx on Linux
When we install and configure the server LNPM env...
How to use Docker buildx to build multi-platform images and push them to private repositories
Introduction Recently I found that there is an AR...
Detailed explanation of the integer data type tinyint in MySQL
Table of contents 1.1Tinyint Type Description 1.2...
Detailed explanation of redundant and duplicate indexes in MySQL
MySQL allows you to create multiple indexes on th...
Tutorial on building an FTP server in Ubuntu 16.04
Ubuntu 16.04 builds FTP server Install ftp Instal...
Vue implements the sample code of associating the side navigation bar with the Tab page
Table of contents Technology Stack Effect analyze...
Detailed explanation of the underlying encapsulation of Java connection to MySQL
This article shares the Java connection MySQL und...
js to achieve a simple carousel effect
This article shares the specific code of js to ac...
How to use axios to filter multiple repeated requests in a project
Table of contents 1. Introduction: In this case, ...
JavaScript implements the drag slider puzzle verification function (html5, canvas)
introduction: Slider drag verification is now use...
HTML realizes real-time monitoring function of Hikvision camera
Recently the company has arranged to do some CCFA...
MySQL database implements OLTP benchmark test based on sysbench
Sysbench is an excellent benchmark tool that can ...