ancore HTML: Iată cum se creează linkuri pentru navigare rapidă

dezvăluire: suportul dvs. vă ajută să mențineți site-ul în funcțiune! Câștigăm o taxă de recomandare pentru unele dintre serviciile pe care le recomandăm pe această pagină. Aflați mai multe

elementul ancoră este utilizat pentru a crea hyperlink-uri între o ancoră sursă și o ancoră destinație. Sursa este textul, imaginea sau butonul care se leagă de o altă resursă, iar destinația este resursa la care se leagă ancora sursă.,

Hyperlink-urile sunt una dintre tehnologiile fundamentale care fac web-ul autostrada informațională, iar înțelegerea modului de utilizare a elementelor de ancorare este unul dintre primele lucruri pe care trebuie să le stăpânești atunci când înveți HTML.

elementul de ancorare

eticheta elementului de ancorare este litera „a” înconjurată de paranteze unghiulare astfel:<a>. Sunt necesare atât atributele de deschidere, cât și cele de închidere și tot conținutul dintre etichete constituie sursa de ancorare.,

deși exemplele de mai sus vor produce elemente de ancorare, acestea nu sunt de mare folos, deoarece nu am inclus instrucțiuni suplimentare. Chiar acum aceste elemente de ancorare se leagă de nimic. Pentru a conecta o ancoră sursă la o ancoră de destinație, trebuie să aplicăm câteva atribute suplimentare elementului ancoră.

în acest scurt tutorial vom acoperi atributele pe care le puteți utiliza pentru a adăuga o ancoră de destinație la hyperlink-urile dvs., pentru a spune browserului ce să facă cu linkul și pentru a adăuga semnificație semantică elementelor de ancorare pe care să le folosească browserele și crawlerele web.,

cele mai importante atribute de ancorare

există trei atribute de ancorare pe care trebuie să le cunoașteți pentru a crea hyperlink-uri funcționale. Aceste atribute sunt href, target și download.

specificați o țintă Hyperlink: href

referința hipertext, sau href, atributul este utilizat pentru a specifica o țintă sau o destinație pentru elementul de ancorare. Acesta este cel mai frecvent utilizat pentru a defini o adresă URL în cazul în care elementul de ancorare ar trebui să se conecteze la.,


In this example, the <a href="http://example.com">anchored text</a>links to the URL <em>www.example.com</em>.

unhref poate face mult mai mult decât un link către un alt site web.

  • acesta poate fi folosit pentru a lega direct la orice element de pe o pagină web care a fost atribuit un id.
  • acesta poate fi folosit pentru a lega la o resursă folosind un alt protocol decât http.
  • acesta poate fi folosit pentru a rula un script.

următorul HTML include exemple ale tuturor celor trei acțiuni:

în caseta de mai jos veți vedea acel HTML așa cum se redă în browser. Încercați fiecare link pentru a vedea ce se întâmplă.,

Acest prim element ancoră se leagă înapoi la titlul acestei secțiuni a tutorialului prin conectarea la un id pe care l-am atribuit acelui element de titlu.

putem folosi protocolulmailto pentru a crea un link care va încerca să lanseze programul de e-mail implicit pe computer. Să încercăm! Ne-ar plăcea să luați legătura cu noi!în cele din urmă, dacă faceți clic pe linkul de mai jos va apărea o fereastră de alertă JavaScript gratuită. Faceți clic pe link pentru a vedea ce se întâmplă.,

href element este destul de ușor de utilizat, dar putem obține un kilometraj mult mai mult de ancora noastră elemente de noțiuni de bază să știu target atribut.

specificați o locație pentru a deschide linkul: țintă

să ne uităm înapoi la linkul mailto pe care l-am creat în exemplul anterior. Iată din nou acel cod:


We'd love for you to <a href="mailto:">get in touch</a> with us!

deși linkul este util, modul în care se deschide nu este ideal., În funcție de modul în care sunt configurate computerul și browserul dvs., este posibil ca făcând clic pe linkul creat de acel text să redirecționeze fereastra browserului dvs. departe de acest site web către o aplicație de e-mail bazată pe web, cum ar fi Gmail sau Yahoo! Poșta. În timp ce cu siguranță dorim să încurajăm vizitatorii noștri să ne contacteze, nu vrem să facem acest lucru în detrimentul trimiterii vizitatorilor de pe site-ul nostru.

răspunsul la această enigmă este target atribut asociat cu _blank valoare.,


We'd love for you to <a href="mailto:" target="_blank" rel="noopener">get in touch</a> with us!

atunci Când am adăuga target atribut și _blank atribut pentru link-ul nostru ne spune vizitatorii browser pentru a deschide link-ul într-un nou (gol) filă de browser sau o fereastră. Dacă redăm acel cod în browser, atunci când un vizitator face clic pe link se va deschide într-o filă nouă.

ne-ar plăcea să luați legătura cu noi!

specificați o resursă de descărcat: descărcați

linkurile sunt de asemenea folosite pentru a indica unui browser să înceapă descărcarea unui fișier., download atribut este folosit pentru a identifica un link care ar trebui să inițieze o descărcați și valoarea atribuită download atribut este numele de fișier pentru a fi descărcate.

atributulhref intră, de asemenea, în joc atunci când configurați un element de ancorare care inițiază o descărcare. În timp ce atributul download numește fișierul, atributul href indică locația în care este găzduit fișierul.,

Aici e un exemplu de cum un download-inițierea element de ancorare ar arata:

href în exemplul de mai sus a indicat un dosar, atunci când descărcarea este completă fișierul descărcat va fi numit Example_File.ext unde .ext ar fi formatul fișierului descărcat. Nu este necesar să includeți extensia tipului de fișier în valoarea atribuită atributului download. Extensia de fișier va fi identificată automat atunci când browserul descarcă fișierul și va fi adăugată automat la numele fișierului descărcat.,

legături interne și externe

există două tipuri de resurse la care ne putem conecta folosind elementul a: intern și extern. Link-urile interne sunt cele care indică alte pagini ale site-ului nostru. Link-urile externe indică pagini web care nu fac parte din site-ul nostru.legăturile interne sunt utilizate pentru a crea meniuri de navigare care ajută vizitatorii site-ului să navigheze pe site-ul nostru.

  • link-urile interne sunt utilizate în textul conținutului site-ului pentru a ajuta vizitatorii site-ului să localizeze conținut similar.,
  • linkurile interne sunt, de asemenea, utilizate de crawlerele web ale motoarelor de căutare pentru a localiza paginile unui site web și pentru a partaja Autoritatea (cunoscută și sub numele de link juice) cu celelalte pagini ale unui site web.
  • când scrieți link-uri interne, asigurați-vă că nu exagerați. Sucul link-ul de orice pagină web dat este partajat între link-urile de pe pagina. Deci, mai multe link-uri pe care le pune pe o pagină, cu atât mai diluat sucul trecut la fiecare link devine. O regulă bună este să nu aveți mai mult de 100 de link-uri pe pagină, deși există excepții în cazul site-urilor web extrem de mari și complexe.,link-urile externe sunt de asemenea importante din câteva motive diferite: link-urile externe pot fi recomandate, necesare sau doar cele mai bune practici pentru a oferi atribuirea corectă sursei unei idei sau a unei resurse.

  • link-urile externe ne permit să referim vizitatorii site-ului web la conținut similar util.
  • când alte site-uri Postează link-uri externe care indică site-ul nostru, aceste link-uri cunoscute sub numele de backlink permit sucului de link să curgă către site-ul nostru și să îmbunătățească poziția site-ului nostru pe paginile cu rezultatele motorului de căutare (SERP).,
  • când scrieți link-uri externe, încercați să evitați conectarea la concurenții direcți. Nu doriți să ajutați clasamentul SERP pentru termenii de căutare pe care îi vizați pentru propriul dvs. site web. De asemenea, este o idee bună să utilizați atributul target="_blank" atunci când scrieți Legături externe. Prin deschiderea link-uri externe într-o filă nouă vă păstrați vizitatori pe site-ul dvs. pentru mai mult timp.,cu siguranță ați văzut și poate chiar ați creat link-uri care arată cam așa:

    To learn more <a href="http://example.com">click here</a>!

    există cel puțin trei motive întemeiate pentru care utilizarea textului generic al elementului ancoră, cum ar fi „Click aici”, este o practică teribilă.

    • vizitatorii site-ului care depind de tehnologii de asistență, cum ar fi cititoarele de ecran, vor avea dificultăți în a descifra semnificația legăturilor care folosesc textul generic de link, cum ar fi „Faceți clic aici”.,
    • vizitatorii site-ului care scanează o pagină vor trebui să ia câteva secunde suplimentare pentru a investiga textul din jurul linkului pentru a avea o idee despre ce leagă ancora.
    • crawlerele web ale motorului de căutare asociază textul elementului de ancorare cu adresa URL a link-ului. Textul elementului de ancorare selectat corect ajută motoarele de căutare să determine relevanța unei pagini web pentru anumite cuvinte cheie. Textul Generic spune motoarelor de căutare nimic despre pagina web legată.textul elementului de ancorare Ideal este succint și identifică un cuvânt cheie sau cuvinte cheie relevante pentru pagina web., Iată o propoziție care include două exemple de text de legătură selectat corect:

      primul link spune crawlerelor web și vizitatorilor site-ului web că site-ul web are ceva de-a face cu cuvintele cheie „motoare de căutare”. Al doilea spune vizitatorilor și motoarelor de căutare că pagina găsită la adresa URL relativă /seo/ este legată de cuvintele cheie „tutorial SEO”.

      Absolută față de Url-uri Relative

      au fost două link-uri în ultimul nostru exemplu: și /seo/. Primul este un exemplu de URL absolut., Adresele URL Absolute sunt cele care includ o descriere completă (absolută) a destinației linkului. URL-urile Absolute includ protocolul (http) și numele complet de domeniu și calea de fișier necesare pentru a ajunge la ancora de destinație.

      al doilea este un exemplu de URL relativ. URL-uri Relative link către o pagină web prin descrierea poziției paginii în raport cu poziția paginii curente. Când scriem link-uri interne care indică alte pagini ale aceluiași site web, avem opțiunea de a scrie URL-uri relative, mai degrabă decât URL-uri absolute.,

      De exemplu, dacă suntem la aceasta adresa: și vrem să link-ul de la albastru la pagina de produs, putem folosi oricare dintre următoarele elemente de ancorare:

      <a href="/products/blue-product/">Go check out the blue product!</a><a href="../blue-product/">Go check out the blue product!</a>

      Ce prima sintaxă spune este: „uită-te la cel mai scăzut nivel de directorul de fișiere pentru fișierul produse, si uita-te pentru blue produse în acel dosar”. Ce de-a doua sintaxa spune este: „uită-te în folderul părinte al red-product director pentru un director cu numele blue-product., Ambele elemente – ancoră indică URL-ul:

      să spunem că vrem să ne conectăm la Despre noi-o pagină care există ca descendent direct al paginii de pornire. Iată cum am putea face asta:

      <a href="/about-us/">Learn more about us.</a>

      sintaxa spune „du-te înapoi la cel mai mic nivel de directorul de fișiere copac și apoi uita-te pentru un director intitulat despre-noi”.

      Ca un exemplu final, să spunem că sunt la această adresă din nou: , și că vrem să link-ul de la un subcategoria pagini care există în cadrul /red-products/ categorie.,

      <a href="large.php">See all Red Products available in Large!</a>

      Ce URL relativ va face este de a spune browser-ul să se uite în folderul curent pentru un fișier numit large.php si se va rezolva de la acest URL:

      To summarize, when we write relative URLs we have three options:

      • When we start a relative URL with „/” we tell the browser to look for the specified file or folder in the lowest level of the file directory.
      • If we start a relative URL with „../” we tell the browser back up in the directory tree one level.
      • If we start a relative URL with a file or folder name we tell the browser to look for the specified resources in the current file.

      Why Are Relative URLs Used?

      Relative URLs are very popular with web developers. It is common for websites to be developed on a staging server with a domain name that is not the same as the eventual permanent domain name. If relative URLs are used, when the site is transferred from the staging server to being live on the web all of the relative URLs will continue to work just fine. However, if absolute URLs are used the development team will have to go through the site fixing all of the URLs.

      While the benefit of using relative URLs during the development of a site on a staging server not inconsiderable, it comes at a cost.

      While you should know how relative URLs work, many experienced developers and SEO experts recommend sticking to absolute URLs as much as possible.

      Other Useful Anchor Attributes

      With just the three attributes we’ve covered so far, you can complete every hyperlinking task you will encounter on the web. However, there are additional attributes that can be used to tell a visitor’s web browser and search engines that index our website something about the meaning of the hyperlinks.

      Specify the Language of the Anchor Destination: hreflang

      This is optional tag can be used to tell a web browser the language of the document to which the anchor is linked. For example, if we were linking to a URL and wanted to tell the browser that the destination anchor was in Spanish we would use the appropriate language code in ISO 639-1 format as the value of the hreflang atribut.

      Specifica Relația Dintre Sursă și Destinație: rel

      relația, sau rel, atribut este folosit pentru a descrie relația dintre ancora sursă și destinație ancora. De exemplu, am putea folosi următorul cod pentru a identifica destinația ca fiind o resursă despre autorul documentului.,


      This artile was written by <a href="https://plus.google.com/+AuthorName" rel="author">Great Author</a>.

      există mai multe valori diferite care pot fi utilizate pentru a descrie relația dintre link-ul sursă și link-ul de destinație. Iată câteva dintre cele mai frecvente:

      • rel="nofollow": utilizați acest atribut dacă vă conectați la o resursă la care nu doriți să împrumutați reputația site-ului dvs. De exemplu, dacă vă conectați la un site spam ca exemplu de ce să nu faceți, ați dori să utilizați această valoare pentru a nu contribui la vizibilitatea motorului de căutare al site-ului.,
      • rel="alternate": Dacă site-ul are mai mult de o versiune, cum ar fi o traducere într-o altă limbă – utilizați această valoare pentru a identifica legate de resurse ca o versiune alternativă a paginii curente.
      • rel="bookmark": această valoare este utilizată pentru a identifica o formulă URL care este permanentă și poate fi utilizată pentru marcare.
      • rel="help": identificați o resursă legată ca fișier de ajutor pentru pagina curentă cu această valoare.
      • rel="license": utilizați acest atribut atunci când vă conectați la o licență recunoscută de drepturi de autor.,
      • rel="next": Dacă documentul curent există într-o serie de documente, utilizați această valoare atunci când conectarea la următorul document în serie.
      • rel="prev": dacă documentul curent există într-o serie de documente, utilizați această valoare atunci când vă conectați la documentul anterior din serie.
      • rel="noreferrer": Dacă doriți să link-ul de la un site web extern, dar evitați permițându-ul de destinație știu cine referrer este, utilizați această valoare.,

      specificați tipul de suport Internet: tip

      atributultype este un atribut opțional care poate fi utilizat pentru a identifica tipul de suport Internet sau tipul MIME al documentului de destinație. De exemplu, dacă vă conectați la un site web redat în HTML, puteți adăuga atributul type="text/html" pentru a spune browserului unui vizitator că linkul indică un document HTML.,

      chiar acum acest atribut nu face mare lucru, dar gândirea este că, în viitor, informațiile conținute în acest atribut ar putea fi folosite pentru a comunica cumva unui vizitator al site-ului Tipul de conținut la care urmează să fie legat înainte de a face clic pe link.

      valoarea type trebuie să fie un tip de suport Iana valid. Unele dintre cele mai frecvent utilizate valori sunt: text/html, text/css, application/javascript și multipart/form-data.,World Wide Web este cel mai bine descris ca o bibliotecă masivă de documente hiperlinkate în care elementele de ancorare sunt utilizate pentru a crea punți între documentele conexe. În această definiție, elementele de ancorare ocupă locul lor de drept ca liantul care leagă web-ul împreună și punțile care permit utilizatorilor web să treacă de la un document la un document conex.

      un mod comun pentru link-uri pentru a fi utilizate este de a construi un meniu de navigare care stabilește structura logică, ierarhică a unui site web., Dacă doriți să aflați cum să construiți meniuri de navigare eficiente, citiți tutorialul nostru pe acest subiect.

      Jon este un scriitor independent, pasionat de călătorii, soț și tată. El scrie despre tehnologii web precum WordPress, HTML și CSS.

    Lasă un răspuns

    Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *