如何使用href在HTML(+例子)

What would the web be without links? Well, not much of a web at all.Mozilla defines the World Wide Webas:

“An interconnected system of public web pages accessible through the Internet.”

And how are those pages connected? Hyperlinks, or links from one document to another, usually appearing as hypertext. In fact, the “H” in HTTP/HTTPS stands “HyperText”. Simply put, there’s no web without links.

We all know hyperlinks when we see them, whether we’re perusing an online store or going down a Wikipedia rabbit hole. In essence, browsing the web is just clicking link after link.

So, in this guide, we’ll be peeking under the hood to see what these links look like in HTML. To write links into your web pages, you’ll need theelement, paired with thehrefattribute — let’s learn how to use both.

You’ve already met one instance ofhrefin the above introduction when I linked to the definition of the World Wide Web. The HTML for that hyperlink looks like this:

Mozilla defines the World Wide Web

There are several things to note here, all important for the link to work:

• The link text is wrapped in an openingtag and a closingtag. All text between these tags is selectable and receives link styling.
• Thehrefattribute, and its accompanying attributes, are placed inside the openingtag.
• The attribute value ofhref(inside the quotation marks) is a URL that tells the browser where to go when the link is selected.
• Note the additional attributestarget=“_blank”andrel=“noopener”— these tell the browser to open the web page in a new tab. Unlikehref, these attributes are not necessary.

To be more precise, the link above uses anabsolute URLto specify a destination on a different website. However,hrefcan take on other values too, as we’ll see next.

a href Values

You’ll most often see thehrefattribute used to link to another web page on the same domain or a different domain.hrefcan also be used for other things, like linking to a different part of the same page, or serving a different web protocol than HTTPS. Let’s review each of these possible values with examples.

Absolute URL

As discussed above, an absolute URL points to a file on another website. In other words, it’s a URL that contains a different domain name from the current page’s URL (e.g. hubspot.com to mozilla.org).

Here’s another example:Go to Google search.

This hyperlink also contains an absolute URL:

Here’s another example: Go to Google search.

It doesn’t matter where this link is used — it always points to the same place, the Google homepage. That’s why it’s called an “absolute” URL.

Bonus tip: Notice how the link text describes what the link does. Thismakes your site more accessible to those using assistive technologies.

Relative URL

A relative URL references a file on the same website. For example, here’s a link to ourUltimate Guide to HTML.

And here’s what the code for that looks like:

A relative URL references a file on the same website. For example, here’s a link to our Ultimate Guide to HTML.

See how thehrefvalue looks different? It doesn’t include the protocol HTTPS or the domain name. When this part of the URL is left out, the browser assumes that the specified file is located on the same domain as the current page (in this case, hubspot.com).

We call these URLs “relative” because the destination of the link is specifiedrelativeto the current web page. If we pasted the HTML above on a page on a different website, it wouldn’t work.

Why use relative URLs in lieu of absolute URLs? The answer is that relative URLs come in handy if the file path of the linked file changes, such as in the case of a website restructuring or a domain change. If this happens, the relative URL will still work, since it only contains the name of the linked resource and not the entire file path.

URI Fragment

Use a URI fragment to link to a different part of the same web page. URI fragments begin with the hash (#) symbol, followed by the id of the desired page element.

For example,this link directs you to the H3 above this one.

For example, this link directs you to the H3 above this one.

You can also use the value#topto send visitors back to the top of the page.

You can also use the value #top to send visitors back to the top of the page.

URI fragments are useful for chapter links, or any instance in which users can jump to an earlier/later section of a page.

Additional Protocols

The absolute URLs and relative URLs we’ve seen so far use the HTTP/HTTPS protocol, which serves pages on the World Wide Web. However, we can use other protocols withhreftoo, like mailto: and file:.

For example, click this link to send an email toexample@gmail.com(though we can’t guarantee you’ll hear back).

For example, click this link to send an email to example@gmail.com (though we can’t guarantee you’ll hear back).

A Script

Lastly, you can create a link to trigger JavaScript code.

Click here for a nice greeting.

href: Creating Links on the Web

If you’re anything like me, you spend all day clicking various links to get around the web. And if you’re just learning HTML, theelement and its accompanyinghrefattribute are central to understanding how web pages are tied together. By learning these concepts and how to write them, you’re a step closer to building websites on your own.