Above: Markup Language - Phrase Elements
Original source Chapter 7 Anchor point
The correct way to say links in HTML should be called anchors. They not only allow us to point to documents, but also to specific paragraphs in the page, and can also be used as a convenient tool for precise links. Let the link object get closer to the focus. In this chapter, we will see four different anchor practices, explaining the advantages of each method, and also introducing how the title attribute can improve the ease of use of links. In addition, we will also use CSS to design styles for links. When you need to specify a specific part of the page, marking anchors is the best way to do it.
This is a common situation when designing a website. You want to link to a specific part of a certain page, but the user may be reading on another page. Choose any of the four methods discussed next to enable you to achieve your goal.
In the example, suppose we intend to link to a specific title in the same page: Method A: The name of the hole
<p><a href=#oranges>About Oranges</a></p>
...some text...
<a name=oranges></a>
<h2>Oranges Are Tasty</h2>
...More text...
Use an anchor tag with blank content and a name attribute to mark a specific link point. Perhaps this is the method you are familiar with. Put a blank content <a> in front of the title and connect it (using the # symbol, followed by the value of the name attribute), which allows us to connect to a specific part of the page. When the page contains a long list of items that need to be scrolled, we can easily connect to a specific project through this method.
Figure 7-1 shows the result after clicking on the About Oranges link, which means jumping to the place we identify <a name=oranges></a>, which is exactly on the title.
Figure 7-1. Example of clicking to connect to specific anchor link
The effect is good, but wasting a blank tag to identify the link location is a bit inseparable. Method B can improve this. Method B: All within the name
<p><a href=#oranges>About Oranges</a></p>
...some text...
<h2><a name=oranges>Oranges Are Tasty</a></h2>
...More text...
Like method A, we still use the <a> tag with the name attribute, but this time we wrap it outside the title I want to link to. This does look more semantic. In method A, our connection object is... Well, there is nothing, but in method B, we not only explain that this text is part of the title tag, but also one of the connection anchors of this page. Be careful of the global style of <a>
If method B is used, there is a place you must pay attention to. 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 <h2> elements. The reason this happens is that in this example, the <a> tag is a child element located within the <h2> tag that surrounds it.
For example, if you have a statement like this in your CSS:
a{
color:green;
font-weight:bold;
text-decoration:underline;
}
Method B and this CSS will make the title turn green, bold and underlined like the <a> in other pages, perhaps different from the <h2> style you expect.
We can use the :link pseudo-class of <a> to avoid this phenomenon (and also gain other benefits), which will be discussed in detail later in this chapter. More richer name attributes
One of the benefits of using method B (and method A) is that the name attribute can handle more abundant anchor names. Specifically, it is the ability to use symbols within the name
For example, if you use method B, you can do this (here represents the symbol e):
<p><a href=#resumé>My Resumé</a></p>
...some text...
<h2><a name=resumé>Dan's Resumé</a></h2>
...More text...
This function is very important when dealing with characters that do not belong to English letters.
But there are several methods worth mentioning. The following method does not require the use of <a> to set the anchor point. Let's take a look at Method C.
Method C: Discard the name
<p><a href=#oranges>About Oranges</a></p>
...some text...
<h2 id=oranges>Oranges Are Tasty</h2>
...More text...
Ah, the function of the id attribute is like the name attribute, which can also specify anchor points for the page. In addition, method C also eliminates method A and B uses the name attribute as an additional <a> tag. We have reduced the source code, which has always been a good thing.
Since the id attribute can be added to any tag, we can easily add anchors to any element in the page. In this example, we choose to add anchors to the title, but we can also easily add anchors to <div>, <form>, <p>, <ul>... and all other tags. One kill two birds with one bird
In fact, in most cases, we can add styles or scripting to the preexisting id attribute, which is another benefit of method C. Because of this, we don't need to add extra code to just set the anchor.
For example, let's assume that you have a form to leave comments at the bottom of a long page, and you want to add a link to the top of the page. This form has id=comments to specify a unique style. This is how we can directly connect ids as anchors without adding a <a> tag with name attribute.
The code looks like this:
<p><a href=#comments>Add a Comment!</a></p>
...Many text...
<form id=comments action=/path/to/script>
...Form Elements...
</form>
Also, if your page is long, then you add a link to the top anchor at the bottom so that the user can get back to the top.
It is worth mentioning that although it looks very suitable, it is best to avoid using top when specifying anchor names. Some browsers retain this name for special purposes. Using this name may cause inconsistent results. It is best to choose a similar name but does not cause problems. Maybe use #gemesis? Or #utmost? You have your own idea.
Ancient browser with id attributes
When using only the id attribute as an anchor, there is an important disadvantage worth mentioning, that is, some ancient browsers do not support this method. Oh, this is indeed a must-be considered when identifying your own anchor, and it is also an unfortunate example of forward compatibility. Let's look at the last example, method D. method D: Together
<p><a href=#oranges>About Oranges</a></p>
...some text...
<h2><a id=oranges name=oranges>Oranges Are Tasty</a></h2>
...More text...
If you want to achieve forward compatibility and backward compatibility when tagging anchors, you will probably like this method. Both ancient and future browsers can correctly identify named anchor tags, but because W3C does not recommend the name attribute (http://www.w3.org/TR/xhtml1/#C_8) in the XHTML1.0 Recommendation, you also use the id attribute to support future browsers.
Same as method B, we must pay attention to the global style that affects the <a> tag.
Shared name
If you choose to use method D, it is acceptable to choose the same name for the id and name attributes (may be very convenient), but this is only possible if they are on the same tag. In addition, there are only a few specific tags that allow this, which, to be precise, includes <a>, <applet>, <frame>, <img>, <map>. Therefore, we move id=oranges from <h2> to the anchor tag.
Now that we have seen four methods of establishing anchor points, let’s summarize the advantages and disadvantages of each method.
Previous page 1 2 3 Next page Read the full text