Taguri HTML pentru text în pagini web (Curs HTML începători, partea 2): Mură-n Gură

Taguri HTML pentru text în pagini web (Curs HTML începători, partea 2)

Taguri HTML pentru text în pagini web (Curs HTML începători, partea 2)

Am învățat în secțiunea anterioară despre structura unei pagini web. Cuprins între tagurile <body></body> este tot codul HTML care compune partea vizibilă a paginii.  

Mai jos, trec în revistă tagurile HTML principale cu care poți adăuga text pe pagina web, într-o formă sau alta. Fiecare tag decorează textul cu un anumit scop – titluri, subtitluri, paragrafe și așa mai departe. 

Titluri și subtitluri cu tagurile <h1> … <h6> 

Cu aceste taguri creezi titluri și subtitluri. Tagurile <h …> (heading) pot avea valori de la 1 la 6. Cu cât numărul este mai mare, cu atât importanța semantică a acelui subtitlu este mai mică.

    
    <h1>Titlul paginii</h1> 

    <h2>Un subtitlu</h2> 

    <h3>Un sub-sub titlu</h3>

    <h4>Un subtitlu de nivelul 4</h4>

    <h5>Subtitlu nivel 5</h5>

    <h6>Subtitlu de nivelul 6</h6>
    

De reținut:

Folosește un singur tag H1 pe o pagină

Poți avea un singur titlu cu h1 pe fiecare pagină. Din punct de vedere al optimizării pentru motoarele de căutare, h1 comunică titlul paginii, informează motorul de căutare despre ce este pagina respectivă.

După tag-ul <title> din secțiunea <head> a paginii, tagul <h1> este cel mai important. Google și alte motoare de căutare folosesc acest tag pentru a determina cu ce cuvinte cheie dorește pagina respectivă să apară în motoarele de căutare. 

Evident, dacă pui cuvinte cheie în acest tag, nu garantează că vei fi poziționat în Google cu acele cuvinte, pe prima pagină, dar Google va folosi fraza și cuvintele cheie din tagul <h1> pentru a judeca restul paginii. 

Tagurile <h2> … </h6> pot fi utilizate pentru a conferi structură paginii și a delimita secțiunile acesteia.

 

Acestea arată cam în felul următor pe pagină:

Exemplu aspect taguri H1 - H6 in HTML

Paragrafe de text cu tagul <p></p> 

Cel mai comun tag pentru text, <p> separă paragrafe de text. Majoritatea paragrafelor de pe această pagină sunt cuprinse în taguri <p>. Implicit, fără formatare, tagul <p></p> adaugă puțin spațiu între liniile de text după el. Acest spațiu poate fi modificat prin CSS. 

Tagul <p></p> poate conține în text și alte taguri de formatare (vezi mai jos) pentru a schimba aspectul și importanța textului – bold, italic, sublinieri și altele. 

Linkuri cu tagul <a> 

Linkurile pot fi de două feluri:

  1. Linkuri spre altă pagină
  2. Linkuri de tip ancoră (spre secțiuni din aceeași pagină).  

Linkurile conferă denumirea de „hyper” în HTML (Hypertext Markup Language). Ele fac textul să fie „dinamic” și să te poarte de la o pagină la alta. Tot linkurile joacă un rol major în înțelegerea pe care o au motoarele de căutare a structurii site-ului, organizării subiectelor și paginilor, precum și „încrederea” acordată site-ului nostru de către alte site-uri. 

Tagul <a> are două componente majore: 

  1. Partea pe care se face click
  2. Destinația linkului 

Pentru a adăuga un link, trebuie să scriem:

    
    <a href="http://... destinatia linkului">textul pe care se face clic.</a>
    

Destinația linkului este în secțiunea href, iar între tagul de deschidere și cel de închidere includem textul (sau imaginea, elementul) pe care dorim să se dea click. 

Iată un exemplu de paragraf de text cu un link în el:

    
<p>Pentru a accesa catalogul de produse, faceți click <a href="/catalog">aici</a>.
    

În acest exemplu, cuvântul ‘aici’ va fi link spre pagina /catalog.

Rezultă:

Exemplu tagul HTML p cu link

Linkuri absolute vs. relative 

Facem o paranteză: observați că linkul din href nu începe cu http:// și nu include adresa site-ului, ci începe doar cu „/”. Asta înseamnă că linkul meu este „relativ la rădăcina site-ului.” 

Dacă linkul ar fi inclus protocolul (http:// sau https://) și domeniul meu (ex. www.siteulmeu.ro), atunci acesta ar fi fost link „absolut”. 

Se recomandă ca atunci când destinația linkului este pe același website, să folosiți linkuri relative, iar pentru linkuri spre alte site-uri (care nu sunt pe același domeniu) să folosiți linkuri absolute.

De ce? Este mult mai ușor să schimbăm mai târziu domeniul site-ului nostru sau să schimbăm protocolul (de ex. să schimbăm site-ul de pe http:// pe https:// fără să fie nevoie să modificăm toate linkurile de pe toate paginile din site. Linkurile relative vor continua să funcționeze, chiar dacă mutăm site-ul pe alt domeniu în întregime.  

Liste numerice cu tagul <ol> 

OL vine de la „ordered list” (listă numerotată), și acest tag crează o listă de texte sau fraze, cu număr și indentare.  

Se folosește tagul <ol> pentru deschiderea listei, taguri <li> pentru fiecare element al listei, și se încheie cu </ol>.  

Iată un exemplu:

    
    <ol> 
        <li>Primul capitol</li>
        <li>Al doilea capitol</li>
        <li>Al treilea capitol</li>
    </ol>
    

Care rezultă în:

Exemplu tag HTML OL ordered list

Observați că nici unul din taguri nu conține vreun număr. Numerele sunt create automat de către browser. Este comod faptul că dacă ulterior avem nevoie să adăugăm alte elemente între cele existente, numerele se modifică și se decalează automat.

Liste cu bulleturi cu tagul <ul> 

Acest tag este similar cu <ol>, dar în loc de numere, crează buline/bulleturi. UL înseamnă „unordered list”: 

    
    <ul>
        <li>Primul element</li>
        <li>Al doilea element</li>
        <li>Al treilea element</li>
    </ul>
    

...care arată cam așa:

HTML exemplu tag UL lista neordonata

Taguri pentru formatarea textului:

Tagurile următoare adaugă mai multe opțiuni de formatare a textului și pot fi utilizate de sine stătător sau în interiorul tuturor tagurilor expuse mai sus:

<b> Text îngroșat (bold).

Exemplu: Textul din paranteză e (<b>bold</b>).
Rezultă: Textul din paranteză e (bold)
<strong>

Text important. Deși arată exact ca textul bold (deasupra), unele motoare de căutare sau browsere consideră textul cu <strong> ușor mai important din punct de vedere semantic, decât textul marcat cu tagul <b> care îi schimbă doar aspectul vizual, nu și importanța.

Exemplu: Textul următor <strong>este important</strong>.
Rezultat: Textul următor este important.

<i>

Text italic.

Exemplu: Textul <i>acesta este italic</i>.
Rezultat: Textul acesta este italic.

<em>

Text evidențiat. La fel ca între tagurile <b> și <strong>, textele cuprinse între tagurile <i> și <em> arată la fel, dar tagul <em> conferă o ușoară creștere în importanță semantică.

Exemplu: Textul <em>acesta este evidențiat</em>.
Rezultat: Textul acesta este evidențiat.

<mark>

Text evidențiat cu fundal colorat (ca la un marker).

Exemplu: <mark>Text colorat.</mark>
Rezultat: Text colorat.

<small> Text micșorat. Se recomandă folosirea doar pentru texte scurte (ex. texte de copyright, note de subsol, mici comentarii).

Exemplu: <small>Aceasta este o notă de subsol.</small>
Rezultat: Aceasta este o notă de subsol.
<del>

Text șters/tăiat/corectat.

Exemplu: Acest text este <del>greșit</del> corect.
Rezultat: Acest text este greșit corect.

<ins>

Marchează text care a fost inserat în document. De obicei browserele subliniază acest text.

Exemplu: Acest text este <ins>inserat</ins>.
Rezultat: Acest text este inserat.

<sub>

Text subscript (indice).

Exemplu: Formula chimică a apei este H<sub>2</sub>O.
Rezultat: Formula chimică a apei este H2O.

<sup>

Text superscript (putere).

Exemplu: 2<sup>3</sup> = 8.
Rezultat: 23 = 8.

 

Cristi Coțovan

Cristi lucrează de peste 15 ani în domeniul web design, dezvoltare, e-commerce și marketing. A construit două platforme CMS de la zero și este pasionat de comerț electronic, automatizări și muzică și artă și altele. Are 15 idei pe secundă și parcă le-ar începe pe toate până la sfârșitul zilei. Uneori vorbește despre el însuși la persoana a treia.

Categories