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
Solve the problem of insufficient docker disk space
After the server where Docker is located has been...
Learn the common methods and techniques in JS arrays and become a master
Table of contents splice() Method join() Method r...
Detailed explanation of the role of the default database after MySQL installation
When you learn MySQL, you will find that it comes...
Detailed explanation of basic concepts of HTML
What is HTML? HTML is a language used to describe...
Summary of synchronization and mutual exclusion knowledge points between Linux threads
When threads execute concurrently, we need to ens...
Vue2.x responsiveness simple explanation and examples
1. Review Vue responsive usage Vue responsivenes...
Vue3 (V) Details of integrating HTTP library axios
Table of contents 1. Install axios 2. Use of axio...
Solution to web page confusion caused by web page FOUC problem
FOUC is Flash of Unstyled Content, abbreviated as ...
CentOS7 deployment Flask (Apache, mod_wsgi, Python36, venv)
1. Install Apache # yum install -y httpd httpd-de...
Detailed explanation of how to deploy programs on Alibaba Cloud Server and access them directly using domain names
I had nothing to do, so I bought the cheapest Ali...
Axios project with 77.9K GitHub repository: What are the things worth learning?
Table of contents Preface 1. Introduction to Axio...
How to set up ssh password-free login to Linux server
Every time you log in to the test server, you alw...
Detailed analysis of MySQL master-slave replication
Preface: In MySQL, the master-slave architecture ...
How to use Docker to build a tomcat cluster using nginx (with pictures and text)
First, create a tomcat folder. To facilitate the ...
Some summary of MySQL's fuzzy query like
1. Common usage: (1) Use with % % represents a wi...