Cursus Aanbeveling:

HTML <a> Tag

HTML <a> href eigenschap

href Definitie en gebruik

href De eigenschap bepaalt de URL van de pagina waar de koppeling naar verwijst. href De waarde van de eigenschap kan een relatieve of absolute URL van een geldig document zijn, inclusief fragmentidentificatoren en JavaScript-codefragmenten. Als de gebruiker de inhoud van de <a> tag selecteert, zal de browser proberen de inhoud te verkrijgen en weer te geven

Als href Als de eigenschap niet bestaat, is de <a> tag geen hyperlink.

Tip:Je kunt een koppeling naar de top van de huidige pagina maken met href="#top" of href="#"!

Maak een tekstkoppeling

Een eenvoudige <a> tag die een andere document verwijst kan in de volgende vorm zijn:

<a href="http://www.codew3c.com/index.html">CodeW3C.com Online Handleiding</a>

Browsers tonen het woord "CodeW3C.com Online Cursus" (meestal in onderstreping en blauw) met speciale effecten, zodat gebruikers weten dat het een hyperlink is die naar een ander document kan leiden. Zoals hier:

CodeW3C.com Online Tutorial

Gebruikers kunnen ook de opties in hun browser gebruiken om zelf de tekstkleur in te stellen, evenals de kleur van de tekst voor en achter de koppeling.

Tip:Je kunt CSS-pseudoklassenVoeg complexe en diverse stijlen toe aan tekstkoppelingen.

Maak een afbeeldingskoppeling

Meer complexe ankers kunnen afbeeldingen bevatten. Hieronder is een LOGO die een afbeeldingskoppeling is; klik op de afbeelding om terug te keren naar de homepage van W3school:

<a href="http://www.codew3c.com/index.html">
<img src="/i/codew3c_logo_white.gif" />
</a>

Het bovenstaande codevoorschrift voegt een koppeling terug naar de homepage van CodeW3C.com toe voor het LOGO:

CodeW3C.com Online Tutorial

De meeste grafische browsers plaatsen een speciale rand rond de afbeelding die deel uitmaakt van de anker. Door de afbeelding van de <img>-tag de rand-eigenschapInstellen op 0 kan de rand van de hyperlink verwijderen. Je kunt ook CSS randeigenschappenom globaal de randstijl van elementen te wijzigen.

Voorbeeld

Voorbeeld 1

De href-eigenschap bepaalt het doel van de koppeling:

<a href="https://www.codew3c.com">Bezoek CodeW3C.com</a>

Try it yourself

Voorbeeld 2

Hoe je een afbeelding gebruikt als koppeling:

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

Try it yourself

Voorbeeld 3

Hoe je een koppeling maakt naar een e-mailadres:

<a href="mailto:someone@example.com">E-mail verzenden</a>

Try it yourself

Voorbeeld 4

Hoe je een koppeling maakt naar een telefoonnummer:

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

Try it yourself

Voorbeeld 5

Hoe je een koppeling maakt naar een ander deel op dezelfde pagina:

<a href="#section2">Ga naar Hoofdstuk 2</a>

Try it yourself

Voorbeeld 6

Hoe je een koppeling naar JavaScript maakt:

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

Try it yourself

Syntax

<a href="URL">

Attribute value

Value Description
URL

The URL of the link.

Possible values:

  • Absolute URL - points to another website (such as href="http://www.example.com/index.html")
  • Relative URL - points to a file within the website (such as href="index.html")
  • Link to an element with a specified id in the page (such as href="#section2")
  • Other protocols (such as https://, ftp://, mailto:, file: etc.)
  • Scripts (such as href="javascript:alert('Hello');")

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support

HTML <a> Tag