Formatarea textului - Notiuni generale
Una dintre principalele sarcini ale HTML este, de a oferi structura textului și semnificația (cunoscută și sub denumirea de semantică), astfel încât un browser să-l poată afișa corect. Va voi explica modul în care HTML poate fi utilizat pentru a structura o pagină de text adăugând titluri și paragrafe, subliniind cuvinte, creând liste și multe altele.
Este momentul sa exploram individual elementele cu ajutorul carora putem formata continutul unui document HTML. Asa cum am precizat deja, HTML este un limbaj de marcare, ceea ce inseamna ca utilizeaza etichete(tag's), pentru a marca(identifica), elementele dintr-un document.
Acum trebuie sa vedem ce eticheta(tag) poate fi folosita pentru a obtine un anumit rezultat si ce alte optiuni exista pentru obtinerea unui rezultat asemanator. In HTML, CSS, Javascript etc., acelasi lucru poate fi facut in moduri diferite. Este important sa alegem cea mai buna metoda, cea mai recomandata metoda, pentru a ajunge la rezultatul dorit. In exemplul urmator vom revedea citeva din lucrurile invatate anterior, precum si citeva notiuni noi:
De ce avem nevoie de semantică?
Semantica este peste tot în jurul nostru - ne bazăm pe experiențe anterioare, de exemplu, știm ca un semafor roșu înseamna „oprire”. Lucrurile se pot complica foarte repede, dacă se aplică o semantică greșită. Exista vreo tara in care culoarea rosie a semaforului inseamna altceva? Sper că nu.
În mod similar, trebuie să ne asigurăm că utilizăm elementele corecte, oferind conținutului nostru semnificația, funcția sau aspectul corect. În acest sens, elementul <h1> este, de asemenea, un element semantic, care oferă textului pe care îl înfășoară, rolul(sau semnificația) de „titlu de nivel superior în pagina”.
<h1>Eu sunt cel mai important titlu din pagina</h1>În mod implicit, browserul îi va oferi o dimensiune mare a fontului pentru ca acesta să arate ca un titlu (deși ai putea să-l faci să arate cum vrei tu folosind CSS). Mai important, valoarea sa semantică, va fi folosită în mai multe moduri, de exemplu de către motoarele de căutare și cititorii de ecran. Pe de altă parte, puteți face ca orice element să arate ca un titlu de nivel superior:
<span style="font-size: 32px; margin: 21px 0; display: block;">Este acesta un titlu H1???</span>Mai sus avem un element <span>. Nu are semantică. Îl folosești pentru a înfășura conținut atunci când vrei să-i aplici CSS (sau să-i faci ceva cu JavaScript), fără să îi dai vreun sens suplimentar (vei afla mai multe despre acestea ulterior în curs). Am aplicat unele proprietati CSS, pentru ca acesta, să pară un titlu de nivel superior, dar, deoarece nu are o valoare semantică, nu va primi nici unul din avantajele descrise mai sus. Este o idee bună să utilizați elementul HTML relevant pentru fiecare situatie concreta.
In continuare vom discuta mai in detaliu despre cele mai importante etichete utilizate in HTML.
Titlurile si paragrafele
Majoritatea textului structurat constă în titluri și paragrafe. Pentru a vizualiza cit mai bine acest lucru, ginditi-va la un articol dintr-un ziar. Acesta are un titlu, urmat de articolul propriu-zis format din subtitluri si o serie intreaga de paragrafe.
Conținutul bine structurat face experiența de citire mai ușoară și mai plăcută.
În HTML, fiecare paragraf este infasurat într-un element <p>, astfel:
<p>Eu sunt un paragraf.</p>Fiecare titlu este infasurat într-un element specific, heading(h1-h6), astfel:
<h1>Eu sunt titlul principal.</h1>
<h2>Eu sunt un subtitlu.</h2>Titlurile - Headings (H1-H6)
Acest grup de elemente, prezinta o importanta deosebita in ceea ce priveste stabilirea ierarhiei din cadrul unui document HTML, dar si din punctul de vedere al optimizarii(on-page) continutului pentru motoarele de cautare.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>Eticheta H1 ar trebui utilizata pentru titlul principal(de preferat, o singura data in fiecare pagina), urmata de eticheta H2 si apoi de eticheta H3 mai putin importanta, etc.. Nu utilizati aceste etichete pentru a face ca textul sa apara mai mare si mai ingrosat. Nu acesta este scopul acestor etichete!
Titlul formatat cu eticheta H1 ar trebui sa contina cuvintele cheie targetate, cit mai relevante pentru continutul paginii. Eticheta H2 functioneaza ca un subtitlu pentru H1 si ar trebui sa contina cam aceleasi cuvinte cheie. Eticheta H3 este un subtitlu pentru eticheta H2 si asa mai departe.
Aceste etichete sunt importante pentru ca ofera motoarelor de cautare informatii esentiale despre continutul paginii, sau cel putin asa ar trebui sa fie. Pentru motoarele de cautare aceste etichete sunt printre cele mai importante si vor fi citite cu prioritate atita timp cit nu sunt folosite abuziv si dezordonat. Evitati folosirea mai multor titluri cu eticheta H1 in aceeasi pagina.
Importanta acestor etichete nu trebuie speculata prin introducerea de text la intimplare, utilizarea de insiruiri de cuvinte cheie fara noima sau formatarea tuturor titlurilor si subtitlurilor dintr-un document cu eticheta H1, doar pentru faptul ca aceasta este foarte relevanta pentru motoarele de cautare. Aceasta practica va atrage penalizari din partea motoarelor de cautare.
In concluzie titlurile si subtitlurile trebuie sa contina cuvinte cheie(keywords) mai scurte(short-tail) si mai lungi(long-tail) cu relevanta cea mai mare la continutul paginii precum si al intreg site-ului, intr-o formulare gramaticala corecta.
Sa ne imaginam ca scriem un articol, in care prezentam modul corect de utilizare a etichetelor de titlu. Acest articol ar putea avea urmatoarele titluri:
(H1) Importanta etichetelor H1, H2, H3 pentru SEO
(H2) De ce sunt importante etichetele h1, h2, si h3 pentru SEO?
(H3) 5 sfaturi pentru utilizarea corecta a etichetelor h1, h2, h3
(H2) Utilizarea incorecta a etichetelor h1, h2, si h3.
(H3) 5 greseli frecvente in utilizarea etichetelor h1, h2, h3☞ Dupa cum puteti observa, in fiecare din titlurile de mai sus, se repeta frecvent o combinatie de cuvinte - etichetelor h1, h2, h3, in contexte diferite. Am facut acest lucru pentru a exemplifica foarte clar, utilizarea corecta si eficienta a cuvintelor cheie in titluri si subtitluri, cuvinte importante si foarte relevante pentru pagina.
Paragraful (p)
Aceasta eticheta este probabil una din cele mai utilizate. Paragrafele sunt de obicei reprezentate de blocuri de text separate de blocurile adiacente prin spatii goale sau indentare. Paragrafele pot "gazdui" si alt tip de continut cum ar fi: imagini, formulare, etc..
Intreruperea unei linii (br)
Acest element produce o rupere de linie in text. Poate fi util atunci cind scrieti o poezie sau o adresa unde divizarea liniilor este importanta.
Totusi, utilizarea acestui element ar trebui evitata, deoarece ridica probleme de accesibilitate. Se poate obtine acelasi rezultat utilizind proprietati CSS.
In editor, incercati sa formatati corect textul, adaugind titluri, paragrafe si ruperi de linie.
Etichetele (i vs em) si (b vs strong)
In mod implicit rezultatul vizual oferit de aceste perechi de etichete este acelasi. Cu toate acestea intelesul semantic este diferit, fiecare eticheta avind un alt inteles si fiind destinata utilizarii intr-un anumit context.
Astfel eticheta "em" se va utiliza atunci cind dorim sa accentuam o portiune de text, in timp ce eticheta "i" se va utiliza pentru a evidentia un cuvint cu caracter fictiv, o definitie, un nume, o parte a textului ce apartine unei schimbari de voce/dispozitie.
- "em" ar putea fi : Fa-o mai repede!
- "i" ar putea fi : A trebuit sa facem ceva.
In mod similar eticheta "strong" va fi utilizata pentru a formata o portiune de text foarte importanta in timp ce eticheta "b", va fi utilizata doar pentru a atrage atentia asupra unui cuvint, pentru a-l evidentia.
- "strong" : Cutitele sunt foarte ascutite. Folositi cutitul cu atentie!
- "b" : In magazin erau si cutite de calitate.
Entitati de caractere
Uneori va fi nevoie sa folosim caractere sau simboluri care nu sunt disponibile direct de la tastatura sau caractere rezervate pentru HTML si pe care nu ar trebui sa le utilizam in mod normal. Utilizarea acestor caractere ar putea chiar sa genereze erori si probleme de validare in respectivul document.
Penru a afisa aceste caractere speciale ca text, va trebui sa apelam la entitati de caractere(Named Character Entities).
O entitate HTML este un fragment de text("string"), care incepe cu un ampersand (&) si se termina cu punct si virgula (;). Entitatile sunt frecvent utilizate pentru a afisa caractere rezervate (care altfel ar fi interpretate ca HTML) si caractere invizibile (cum ar fi spatiile care nu se rup).
De asemenea, entitatile de caractere, se pot folosi in locul acelor caractere care sunt mai greu de tastat.
Unele caractere au entitati usor de memorat (©--©), dar pentru cele mai greu de memorat se pot utiliza tabele de referinta:
Controlul spatiilor libere
Indiferent de cit de mult spatiu adaugati intre diferitele elemente dintr-o pagina HTML, browserele vor lua in considerare doar primul spatiu si vor ignora complet restul spatiului adaugat.
Pentru a adauga mai mult spatiu se poate folosi ocazional entitatea (Non-Breaking Space) .
Totusi, entitatea nu ar trebui utilizata pentru adaugarea unui spatiu suplimentar. Pentru acest lucru se poate utiliza CSS. Entitatea , trebuie utilizata pentru a evita ruperea textului acolo unde nu dorim acest lucru.
Crearea listelor
Listele sunt extrem de folositoare in ceea ce priveste organizarea si gruparea logica a continutului. In HTML putem crea trei tipuri diferite de liste:
- liste neordonate,
- liste ordonate,
- liste descriptive(liste de definitii).
Fiecare tip de lista are un tag parinte, care infasoara lista, urmat de etichetele care creeaza lista propriu-zisa, infasurind separat fiecare element din lista.
Formatarea avansată a textului
Există multe alte elemente în HTML pentru formatarea textului. Elementele descrise în acest articol sunt mai puțin cunoscute, dar totuși sunt utile de știut (și aceasta nu este deloc o listă completă a elementelor HTML).
Citarea
Blockquotes
Dacă o porțiune de conținut este citată din altă parte, ar trebui să o introduceti într-un element <blockquote> pentru a semnala acest lucru și să includeți de asemenea, o adresă URL care indică sursa citatului în interiorul unui atribut de citare
<blockquote cite="http://example.com">
<p>Elementul <strong>HTML <code><blockquote></code></strong> (sau <em>HTML Block
Quotation Element</em>) indică faptul că textul atașat este un citat extins.</p>
</blockquote>si rezultatul este urmatorul:
Elementul HTML
<blockquote>(sau HTML Block Quotation Element) indică faptul că textul atașat este un citat extins.
Stilul implicit al browserului, face acest citat, sa arate ca un paragraf indentat. Exista insa si citeva stiluri suplimentare, adaugate de noi, in fisierul CSS al acestei pagini.
Citatele inline - quote
Citatele în linie funcționează exact în același mod, cu excepția faptului că folosesc elementul <q>,
<p>Elementul <strong>quote</strong> — <code><q></code> — este <q cite="http://example.com">utilizat pentru citate scurte care nu necesita ruperi de linie.</q></p>rezultatul se poate vedea mai jos:
Elementul quote — <q> — este utilizat pentru
citate scurte care nu necesita ruperi de linie.
Abrevierile
Un alt element destul de obișnuit pe care îl veți întâlni in unele pagini web este <abbr> - acesta este folosit pentru a înfășura o prescurtare sau acronim și pentru a oferi o extindere completă a termenului (inclus în atributul unui titlu.) Să ne uităm la un exemplu:
<p>Utilizam <abbr title="Hypertext Markup Language">HTML</abbr> pentru a structura documentele web.</p>Rezultatul se poate vedea mai jos:
Utilizam HTML pentru a structura documentele web.
Extinderea completa a termenului, apare atunci cind indicatorul mouse-ului se afla deasupra acestuia (ca un tooltip).
Marcarea datelor de contact
HTML are un element pentru marcarea detaliilor de contact - <address>.
<address>
<p>
Vasile V. Vasile<br>
Vaslui<br>
Str. Unirii<br>
RO
</p>
<ul>
<li>Tel: 01234 567 890</li>
<li>E-mail: eu@mail.ro</li>
</ul>
</address>Rezultatul se poate vedea mai jos:
Vasile V. Vasile
Vaslui
Str. Unirii
RO
- Tel: 01234 567 890
- E-mail: eu@mail.ro
Superscript si subscript
Ocazional, va trebui să utilizați superscript și subscript atunci când marcați elemente precum date, formule chimice și ecuații matematice, astfel încât să aibă semnificația corectă. Elementele <sup> și <sub> se ocupă de acest lucru:
Formula chimica a cafeinei este C8H10N4O2.
<p>Formula chimica a cafeinei este C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>.</p>Daca x2 este 9, x este egal cu 3 sau -3.
<p>Daca x<sup>2</sup> este 9, x este egal cu 3 sau -3.</p>Reprezentarea codului computerului
Există o serie de elemente disponibile pentru marcarea codului computerului folosind HTML:
- <code>: pentru marcarea unor fragmente generice de cod computer;
- <pre>: pentru păstrarea spațiului alb, spatiu care de altfel ar fi ignorat de browsere;
- <var>: pentru marcarea specifică a numelor de variabile;
- <kbd>: pentru marcarea tastelor și a altor tipuri de intrari de la tastatura;
- <samp>: pentru marcarea unui esantion de ieșire unui program de calculator.
Marcarea timpului și a datei
Cu ajutorul elementului HTML <time>, se poate marca data si ora, într-un format care poate fi citit de computer. De exemplu:
<time datetime="2022-01-20">20 ianuarie 2022</time>De ce este util acest lucru? Ei bine, există multe moduri diferite prin care oamenii scriu datele. Data de mai sus, mai poate fi scrisă si astfel:
- 20 ianuarie 2022
- ianuarie 20 2022
- 20/01/22
- 01/20/22
Aceste moduri diferite de a scrie data, nu pot fi recunoscute cu ușurință de computere. Ce se întâmplă dacă doriți să preluați automat datele tuturor evenimentelor dintr-o pagină și să le introduceți într-un calendar? Elementul <time> vă permite să atașați o dată / dată care nu poate fi ambiguă si care poate fi citită de computere.
Exemplul elementar de mai sus oferă doar o dată simplă, dar există multe alte opțiuni care sunt posibile, de exemplu:
<!‐‐ Doar timp, ore si minute ‐‐>
<time datetime="19:30">19:30</time><!‐‐ Data si timpul ‐‐>
<time datetime="2022-01-20T19:30">19.30, 20 ianuarie 2022</time><!‐‐ Data si timpul cu timezone ‐‐>
<time datetime="2022-01-20T19:30+01:00">19.30, 20 ianuarie 2022 este 20.30 in Franta</time><!‐‐ Apelarea unei săptămâni specifice ‐‐>
<time datetime="2022-W04">A patra saptamina din 2022</time>🧠 Quiz - HTML: Formatarea textului