<!-->
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article> (HTML5)
<aside>(HTML5)
<audio> (HTML5)
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas> (HTML5)
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command> (HTML5)
<datalist> (HTML5)
<dd>
<del>
<details> (HTML5)
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed> (HTML5)
<fieldset>
<figcaption> (HTML5)
<figure> (HTML5)
<font>
<footer> (HTML5)
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header> (HTML5)
<hgroup> (HTML5)
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen> (HTML5)
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark> (HTML5)
<menu>
<meta>
<meter> (HTML5)
<nav> (HTML5)
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output> (HTML5)
<p>
<param>
<pre>
<progress> (HTML5)
<q>
<rp> (HTML5)
<rt> (HTML5)
<ruby> (HTML5)
<s>
<samp>
<script>
<section> (HTML5)
<select>
<small>
<source> (HTML5)
<span>
<strike>
<strong>
<style>
<sub>
<summary> (HTML5)
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time> (HTML5)
<title>
<tr>
<tt>
<u>
<ul>
<var>
<video> (HTML5)
<wbr> (HTML5)
<!DOCTYPE>
<a>
<abbr>
<acronym>
<address>
<applet>
<area>
<article> (HTML5)
<aside>(HTML5)
<audio> (HTML5)
<b>
<base>
<basefont>
<bdo>
<big>
<blockquote>
<body>
<br>
<button>
<canvas> (HTML5)
<caption>
<center>
<cite>
<code>
<col>
<colgroup>
<command> (HTML5)
<datalist> (HTML5)
<dd>
<del>
<details> (HTML5)
<dfn>
<dir>
<div>
<dl>
<dt>
<em>
<embed> (HTML5)
<fieldset>
<figcaption> (HTML5)
<figure> (HTML5)
<font>
<footer> (HTML5)
<form>
<frame>
<frameset>
<h1> - <h6>
<head>
<header> (HTML5)
<hgroup> (HTML5)
<hr>
<html>
<i>
<iframe>
<img>
<input>
<ins>
<keygen> (HTML5)
<kbd>
<label>
<legend>
<li>
<link>
<map>
<mark> (HTML5)
<menu>
<meta>
<meter> (HTML5)
<nav> (HTML5)
<noframes>
<noscript>
<object>
<ol>
<optgroup>
<option>
<output> (HTML5)
<p>
<param>
<pre>
<progress> (HTML5)
<q>
<rp> (HTML5)
<rt> (HTML5)
<ruby> (HTML5)
<s>
<samp>
<script>
<section> (HTML5)
<select>
<small>
<source> (HTML5)
<span>
<strike>
<strong>
<style>
<sub>
<summary> (HTML5)
<sup>
<table>
<tbody>
<td>
<textarea>
<tfoot>
<th>
<thead>
<time> (HTML5)
<title>
<tr>
<tt>
<u>
<ul>
<var>
<video> (HTML5)
<wbr> (HTML5)
Η ετικέτα <a>
Ορισμός και χρήση
Με την ετικέτα <a> δημιουργούμε εναν σύνδεσμο (link) προς μια άλλη σελίδα
χρησιμοποιώντας την ιδιότητα href. Οι ιδιότητες hreflang, media, ping, rel, target και type, δεν μπορούν να χρησιμοποιηθούν όταν υπάρχει η ιδιότητα href.
Οι πιο σημαντικές ιδιότητες της ετικέτας είναι η href η οποία ορίζει το URL του συνδέσμου και η target η οποία ορίζει που θα ανοίξει το URL (στο ίδιο tab ή σε νέο tab).
Ετικέτα τέλους: </a>
Διαβάστε περισσότερα για τους Συνδέσμους
Οι πιο σημαντικές ιδιότητες της ετικέτας είναι η href η οποία ορίζει το URL του συνδέσμου και η target η οποία ορίζει που θα ανοίξει το URL (στο ίδιο tab ή σε νέο tab).
Ετικέτα τέλους: </a>
Διαβάστε περισσότερα για τους Συνδέσμους
Παράδειγμα
| Πηγαίος Κώδικας | Αποτέλεσμα στον browser |
|---|---|
| Σύνδεσμος προς το WLearn.gr: <br /> <a href="http://www.wlearn.gr" target="_blank" >WLearn Link</a> |
Σύνδεσμος προς το WLearn.gr: WLearn Link |
Διαφορές στην χρήση μεταξύ της HTML4.01 και την HTML5
Στην HTML 4.01 η ετικέτα <a> μπορούσε να ήταν και σύνδεσμος (link) και δεσμός (anchor), ανάλογα με το αν υπήρχε ή όχι η ιδιότητα href. Στην HTML5 η ετικέτα <a> είναι πάντα σύνδεσμος.
Ιδιότητες
| Ιδιότητα | Τιμή | Περιγραφή |
|---|---|---|
| charset | character_encoding | ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το σετ των χαρακτήρων που χρησιμοποιείται στην σελίδα που δείχνει η ιδιότητα href |
| coords | - Αν shape="rect" τότε cords="αριστερά,πάνω,δεξιά,κάτω" - Αν shape="circ" τότε cords="κέντρο κύκλου Χ, κέντρο κύκλου Υ,ακτίνα κύκλου" - Αν shape="poly" τότε cords="σημείοΧ,σημείοΥ, σημείοΧ1,σημείοΥ1,..., σημείοN,σημείοN" |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει μια περιοχή επάνω σε μια εικόνα ως σύνδεσμο. Η ιδιότητα shape ορίζει το σχήμα της περιοχής: shape="rect" Η περιοχή έχει σχήμα ορθογωνίου shape="circ" Η περιοχή έχει σχήμα κύκλου shape="poly" Η περιοχή έχει σχήμα πολύγωνου |
| href | URL | Ορίζει το URL του συνδέσμου |
| hreflang | κωδικός γλώσσας (GR για τα ελληνικά, EN για τα αγγλικά, κτλ) | Ορίζει την γλώσσα που χρησιμοποιείται στην σελίδα που δείχνει η ιδιότητα href |
| name | ονομα ενότητας | ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ονομάζει μια ενότητα. Χρησιμοποιείται για να δημιουργήσουμε δεσμούς - αναφορές σε συγκεκριμένα σημεία της σελίδας |
| rel | alternate archives author bookmark contact external first help icon index last license next nofollow noreferrer pingback prefetch prev search stylesheet sidebar tag up |
Ορίζει την σχέση μεταξύ της τρέχουσας σελίδας και της σελίδας που δείχνει το URL της ιδιότητας href. Χρησιμοποιείται μόνο όταν δεν υπάρχει η ιδιότητα href |
| rev | alternate designates stylesheet start next prev contents index glossary copyright chapter section subsection appendix help bookmark |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει την σχέση μεταξύ της σελίδας που δείχνει το URL της ιδιότητας href και της τρέχουσας σελίδας |
| shape | default rect circle poly |
ΔΕΝ ΣΥΜΠΕΡΙΛΑΜΒΑΝΕΤΑΙ ΣΤΗΝ HTML5 Ορίζει το σχήμα που θα έχει η περιοχή link σε μια εικόνα |
| target | _blank _parent _self _top |
Ορίζει το παράθυρο που θα ανοίξει ο σύνδεσμος. Χρησιμοποιείται μόνο όταν υπάρχει η ιδιότητα
href
|
| type (HTML5) | τύπος αρχείου | Ορίζει τον τύπο του περιεχομένου του εγγράφου που δείχνει το URL της ιδιότητας href |
Κοινές (standard) ιδιότητες που μπορεί να πάρει η ετικέτα:
Η ετικέτα <a> υποστηρίζει τις standard ιδιότητες της HTML5
HTML Γεγονότα που μπορεί να πάρει η ετικέτα:
Η ετικέτα <a> υποστηρίζει τις ιδιότητες events της HTML5
Δοκίμασε το
Απλοί Σύνδεσμοι
Πώς να δημιουργήσουμε Σύνδεσμους
Πώς να δημιουργήσουμε Σύνδεσμους
Σύνδεσμοι και η ιδιότητα target
Ανοιγμα συνδέσμων στο ίδιο ή σε νέο παράθυρο browser
Ανοιγμα συνδέσμων στο ίδιο ή σε νέο παράθυρο browser
Δημιουργία δεσμών
Δημιουργία δεσμών με την ιδιότητα name
Δημιουργία δεσμών με την ιδιότητα name
Δημιουργία email συνδέσμων Η σελίδα οδηγεί σε μια ενότητα του Αφιερώματος email
Πατώντας έναν τέτοιον σύνδεσμο ανοίγει το παραθυρο του προγράμματος email που χρησιμοποιούμε
Πατώντας έναν τέτοιον σύνδεσμο ανοίγει το παραθυρο του προγράμματος email που χρησιμοποιούμε
