In the introduction to attributes, we shared an example of how attributes are added to the opening tag. The example used the `` tag, but neither the element nor the specific attributes introduced in that example were discussed. ![The opening tag, attributes, and closing tag, labelled on an HTML element.](https://web.dev/static/learn/html/links/image/the-opening-tag-attribut-d88e53073201a.png) The `` anchor tag, along with the `href` attribute, create a hyperlink. Links are the backbone of the internet. The [first web page](http://info.cern.ch/hypertext/WWW/TheProject.html) contained 25 links, reading "Everything there is online about W3 is linked directly or indirectly to this document." In all likelihood, everything there is online about W3 is linked directly or indirectly from this document, too. The power of the web, and the `` tag, have grown immensely since Tim Berners-Lee published this first explanation in August 1991. Links represent a connection between two resources, one of which is the current document. Links can be created by [``](https://developer.mozilla.org/docs/Web/HTML/Element/a), [``](https://developer.mozilla.org/docs/Web/HTML/Element/area), [`
`](https://developer.mozilla.org/docs/Web/HTML/Element/form), and [``](https://developer.mozilla.org/docs/Web/HTML/Element/link). You've learned about [``](https://web.dev/learn/html/document-structure#other_uses_of_the_link_element), and will discover [forms](https://web.dev/learn/html/forms) in a separate section. There is also an entire [form learn section](https://web.dev/learn/forms/form). In this session, you'll find out about the single-letter, not-so-simple `` tag. ## The `href` attribute While not required, the `href` attribute is found in almost all `` tags. Providing the address of the hyperlink is what turns the `` into a link. The `href` attribute is used to create hyperlinks to locations within the current page, other pages within a site, or other sites altogether. It can also be coded to download files or to [send an email](https://developer.mozilla.org/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks#e-mail_links) to a specific address, even including a subject and suggested email body content. Machine Learning Workshop Our teachers MLW teachers Email Hal Call Hal The first link includes an absolute [URL](https://developer.mozilla.org/docs/Learn/Common_questions/What_is_a_URL), which can be used on any site in the world to navigate to the MLW home page. Absolute URLs include a protocol, in this case `https://`, and a domain name. When the protocol is written as `//`, it's an implicit protocol and means "use the same protocol as is actively being used." Relative URLs don't include a protocol or domain name. They are "relative" to the current file. MLW is a single-page site, but this HTML series has several sections. In order to link from this page to the attributes lesson, a relative URL is used `Attributes`. The second link is just a [link fragment identifier](https://web.dev/learn/html/attributes#link_fragment_identifier), and will link to the element with `id="teachers",` if there is one, on the current page. Browsers also support two "top of page" links: clicking on `Top` (case-insensitive) or even just `Top` returns the user to the top of the page, unless there is an element with the ID of `top` set in the same letter casing. MLW is a fairly long document. To save scrolling, you can add a link back to the top from the bottom of the #teachers section: Go to top. The third link combines the two values: it contains an absolute URL followed by a link fragment. This enables linking directly to a section in the defined URL, in this case, the `#teachers` section of the MLW home page. The MLW page loads and the browser scrolls to the teachers section, without sending the fragment in the HTTP request. The `href` attribute can begin with `mailto:` or `tel:` to email or make calls, with the handling of the link depending on the device, operating system, and installed applications. The `mailto` link doesn't need to include an email address, but it can, along with `cc`, `bcc`, `subject`, and `body` text to prepopulate the email. By default, an email client will be opened. You could prepopulate the subject and body of the email with no email address, to allow site visitors to invite their own friends. In our link, in the footer of the document, we include the URL to the registration: Tell a machine The question mark (`?`) separates the `mailto:` and the email address, if any, from the query term. Within the query, ampersands (`&`) separate the fields, and equal signs (=) equate each field name with its value. The entire string is percent-encoded, which is definitely necessary if the `href` value isn't quoted or if the values include quotes. Which app is opened when the user clicks on, taps, or hits Enter on a `tel` link depends on the operating system, installed applications, and settings the user has on their device. An iPhone may open FaceTime, the phone app, or contacts. A Windows desktop might open Skype, if installed. There are several other types of URLs, such as [blobs](https://developer.mozilla.org/docs/Web/API/Blob#creating_a_url_representing_the_contents_of_a_typed_array) and [data URLs](https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URLs) (see examples in the `download` attribute discussion). For secure sites (those served over `https`), it is possible to [create and run app specific protocols](https://web.dev/articles/registering-a-custom-protocol-handler) with [registerProtocolHandler()](https://developer.mozilla.org/docs/Web/API/Navigator/registerProtocolHandler). When including links that are likely to open other installed applications, it's good to let the user know. Make sure the text between the opening and closing tags tells the user what type of link they're about to activate. CSS attribute selectors, such as `[href^="mailto:"]`, `[href^="tel:"]`, and `[href$=".pdf"]` can be used to target styles by application type. ## Downloadable resources The `download` attribute should be included when the `href` points to a downloadable resource. The value of the download attribute is the suggested filename for the resource to be saved in the user's local file system. SVGOMG, the SVG Optimizer, uses the `download` attribute to suggest a filename for the downloadable blob that the optimizer creates. When `hal.svg` is optimized, SVGOMG's download link opening tag is similar to: There's also a demo of a [`` that creates a downloadable PNG data URL](https://developer.mozilla.org/docs/Web/HTML/Element/a#using_the_download_attribute_to_save_a_canvas_as_a_png). To link to a downloadable resource, include the URL of the asset as the value of the `href` attribute and a suggested filename for the user, as the value of the `download` attribute. ## Browsing context The `target` attribute enables the defining of the browsing context for link navigation (and [form submission](https://web.dev/learn/html/forms)). The four case-insensitive, underscore-prefixed keywords were discussed with the [``](https://web.dev/learn/html/document-structure#base) element. This includes: - (Default) `_self`: Open link in the current window. - `_blank`: Open link in a new tab. - `_parent`: Open link in the parent object or iframe. - `_top`: Open link in the top-most ancestor. This is especially useful if the link is deeply nested. If the link isn't nested, `_top` and `_parent` act the same as `_self`. The `target` attribute isn't limited to these four key terms: any term can be used. Every browsing context (or every browser tab) has a browsing context name. Links can open links in the current tab, a new unnamed tab, or a new or existing named tab. By default, the name is the empty string. To open a link in a new tab, the user can right-click and select "Open in a new tab". Developers can force this by including `target="_blank"`. A link with `target="_blank"` opens in a new tab with a null name, opening a new, unnamed tab with every link click. This can create many new tabs. Too many tabs. For example, if the user clicks on `Register Now` 15 times, the registration form will open in 15 separate tabs. This problem can be fixed by providing a tab context name. By including the [`target`attribute](https://html.spec.whatwg.org/#browsing-context-names) with a case-sensitive value, such as `Register Now`, the first click will open the registration form in a new `reg` tab. Clicking on this link 15 more times will reload the registration in the `reg` browsing context, without opening any additional tabs. The `rel` attribute controls what kinds of links the link creates, defining the relationship between the current document and the resource linked to in the hyperlink. The attribute's value must be a space-separated list on one or more of the [score of rel attribute values](https://developer.mozilla.org/docs/Web/HTML/Link_types) supported by the `` tag. The `nofollow` keyword can be included if you don't want spiders to follow the link. The `external` value can be added to indicate that the link directs to an external URL and is not a page within the current domain. The `help` keyword indicates the hyperlink will provide context-sensitive help. Hovering over a link with this `rel` value will show a help cursor rather than the normal pointer cursor. Don't use this value just to get the help cursor; use the CSS [`cursor` property](https://developer.mozilla.org/docs/Web/CSS/cursor) instead. The `prev` and `next` values can be used on links pointing to the previous and next document in a series. Similar to [``](https://web.dev/learn/html/document-structure#alternate_versions_of_the_site), the meaning of `` depends on other attributes. RSS feed alternatives will also include `type="application/rss+xml"` or `type="application/atom+xml`, alternative formats will include the `type` attribute, and translations will include the `hreflang` attribute. If the content between the opening and closing tags is in a language other than the main document language, include the `lang` attribute. If the language of the hyperlinked document is in a different language, include the `hreflang` attribute. In this example, we include the URL of the translated page as the value of the `href`, rel="alternate" to indicate that it's an alternative version of a site; the `hreflang` attribute provides the language of the translations: atelier d'apprentissage mechanique oficina de aprendizado de máquina If the French translation is a PDF, you can provide the type attribute with the PDF MIME type of the linked resource. While the MIME type is purely advisory, informing the user that a link will open a document of a different format is always a good idea. atelier d'apprentissage mechanique (pdf). ## Track link clicks One way to track user interactions is to ping a URL when a link is clicked. The `ping` attribute, if present, includes a space-separated list of secure URLs (which start with `https`) that should be notified, or pinged, if the user activates the hyperlink. The browser sends `POST` requests with the body `PING` to the URLs listed as the value of the `ping` attribute. ### User experience tips - Always consider the user experience when writing HTML. Links should provide enough information about the linked resource so the user knows what they're clicking on. - Within a block of text, the appearance of your links should differ enough from the surrounding text, so users can more easily identify links from other content. Use multiple visual indicators, such as color and an underline. Color alone isn't enough. - Always include focus styles. This helps keyboard navigators to know where they're when tabbing through your content. - The content between the opening `` and closing `` is the link's default accessible name and should inform the user of the link's destination or purpose. If the content of a link is an image, the `alt` description is the accessible name. Link text and `alt` text should be more descriptive than "click here" or "more information". Instead, it should offer the user information about where they go when the link is activated. This is critical for screen reader users and search engine results. - Don't include interactive content, such as a `