HTML <a> Tag

Definition och användning

<a> Taggen definierar en hyperlänk som används för att länka från en sida till en annan.

<a> Det viktigaste attributet för ett element är href-egenskapendet indikerar länkens destination.

Som standard visas länkar så här i alla webbläsare:

  • Obesökta länkar är med understrykning och blå färg
  • Besökta länkar är med understrykning och lila färg
  • Länken du besöker är med understrykning och röd färg

Tip:Du kanske har lagt märke till att länkarnas utseende på CodeW3C.com-webbplatsen skiljer sig mycket från det standardutseendet. Du kan använda CSS pseudoklasser Lägg till komplexa och varierade stilar till textlänkar.

Se också:

HTML-tutorial:HTML länkar

HTML DOM-referencehandbok:Ankkare-objekt

CSS-tutorial:Länkstil

Terminologi

Vad är hyper文本?

Exempel

Exempel 1

Skapa en länk till codew3c.com:

<a href="https://www.codew3c.com">Öppna codew3c.com!</a>

Try it yourself

Exempel 2

Hur använder du ett bildobjekt som en länk:

<a href="https://www.codew3c.com">
<img border="0" alt="W3School" src="w3logo.png" width="400" height="225">
</a>

Try it yourself

Exempel 3

Hur öppnar du en länk i ett nytt webbläsarfönster:

<a href="https://www.codew3c.com" target="_blank">Öppna codew3c.com!</a>

Try it yourself

Exempel 4

Hur länkar du till en e-postadress:

<a href="mailto:someone@example.com">Skicka e-post</a>

Try it yourself

Exempel 5

Hur länkar du till ett telefonnummer:

<a href="tel:+8613888888888">+86 138 8888 8888</a>

Try it yourself

Example 6

How to link to another part of the same page:

<a href="#section2">Go to Chapter 2</a>

Try it yourself

Example 7

How to link to JavaScript:

<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

Try it yourself

Tips and comments

Tip:If the <a> tag does not have an href attribute, it is just a placeholder for a hyperlink.

Tip:The linked page is usually displayed in the current browser window unless you specify another target (using the target attribute).

Tip:Use CSS settings to set the link style:CSS länkar and CSS knappar.

Attribute

Attribute Value Description
download Filename Specifies what the target will be downloaded when the user clicks on the hyperlink.
href URL Specifies the URL of the page the link points to.
hreflang Language code Specifies the language of the linked document.
media Media query Specifies for which media/device the linked document is optimized.
ping URL list Specifies a space-separated list of URLs. When the link is accessed, the browser will send a POST request with a ping payload (sent in the background). Usually used for tracking.
referrerpolicy
  • no-referrer
  • no-referrer-when-downgrade
  • origin
  • origin-when-cross-origin
  • same-origin
  • strict-origin-when-cross-origin
  • unsafe-url
Specifies the reference information to be sent with the link.
rel
  • alternate
  • author
  • bookmark
  • external
  • help
  • license
  • next
  • nofollow
  • noreferrer
  • noopener
  • prev
  • search
  • tag
Specifies the relationship between the current document and the linked document.
target
  • _blank
  • _parent
  • _self
  • _top
Specifies where the linked document should be opened.
type Media type Specifies the media type of the linked document.

Global attributes

<a> The tag also supports Global attributes in HTML.

Event attributes

<a> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will display the following default values <a> Element:

a:link, a:visited {
  color: (intern värde);
  text-decoration: underline;
  cursor: auto;
}
a:link:active, a:visited:active {
  color: (intern värde);
}

Webbläsarstöd

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd