Sari direct la conținut »

HTML pentru începători: Block vs inline, link-uri și semantica textului

Curs gratuit de Front End Development în Română - HTML, CSS și JavaScript pentru începători

Discutăm despre unele din cele mai importante și des folosite elemente din HTML. Link-urile, titlurile și elemente care formatează textul. În plus, îți explic și diferența dintre elemente block-level și elemente inline. Ești gata? Hai să-ncepem!

Curs gratuit de Front End Development în Română - HTML, CSS și JavaScript pentru începători
Video-ul de YouTube legat de elemente de HTML block versus inline, link-uri și formatarea textului.

Fluxul de date într-un document HTML

Ca să poți înțelege conceptele în care vom intra imediat, trebuie să înțelegi cum funcționează fluxul de informații într-un document HTML.

Dacă ne imaginăm un tabel cu informații, ca în Microsoft Excel sau Google Sheets, și facem o analogie cu layout-ul unui HTML („layout” venind din engleză și însemnând „flux de informații, structură, aspect, amplasare, schemă, plan general, compoziție”), vom observa o analogie simplă.

Până când va intra în normă să folosim modele de reprezentare tridimensionale sau chiar multi-dimensionale ale informației, cu ajutorul căștilor cu realitate virtuală sau a altor dispozitive similare (cum sunt hologramele volumetrice în jocuri și filme), informațiile digitale sunt prezentate pe un ecran, care prin definiție este bidimensional. Adică are două dimensiuni: lățime și înălțime. În engleză: „width” și „height”.

Bun, și de ce ne afectează nouă discuția această informație?

Pentru că datorită faptului că informația e prezentată pe un ecran (și nu numai, ăsta e doar un motiv contextual relevant), fiecare tabel are aceleași două axe principale care definesc fluxul de informații. La fel ca o pagină web scrisă în HTML. Lățimea e reprezentată în tabele de celulele de pe un rând, adică de coloanele de pe un rând, în care informația „curge” pe axa orizontală. Înălțimea e reprezentată în tabele de grupurile de celule și coloane de pe fiecare rând, deci chiar de rânduri în sine, progresul prin fiecare rând făcând ca informația să „curgă” pe axa verticală.

Și așa cum în tabele avem coloane și rânduri, așa în HTML avem elemente care afișează informația din interiorul fiecărui rând, ca niște mici coloane – acestea se numesc tag-uri sau elemente „inline” (care vine din engleză și înseamnă „în linie” așa cum și sună), și elemente care afișează informația pe fiecare rând în parte, în plan vertical – acestea se numesc tag-uri sau elemente „block” (care vine din engleză și înseamnă în contextul ăsta exact cum sună, și anume „bloc” sau „calapod”). Ăsta e și un mod ușor să ții minte treaba asta, dacă asociezi elementele de tip block cu un bloc de locuințe care e vertical și cuprinde mai multe apartamente „inline” la fiecare etaj.

Hai să explorăm mai în detaliu…

Tag-uri sau elemente bloc vs inline (div vs span)

Din perspectiva felului în care ocupă și distribuie spațiul din interiorul lor și în cadrul layout-ului paginii, deci, tag-urile sunt de două feluri:

  1. block-level: sunt sunt niște blocuri care ocupă întreaga lățime a containerului în care sunt puse și de obicei încapsulează multe alte tag-uri în interiorul lor, și
  2. inline-level: încapsulează de obicei doar text sau alte tag-uri inline, la fel ca ele, și ocupă doar spațiul pe care-l ocupă textul încapsulat

Proprietatea asta poate fi destul de ușor schimbată din CSS pentru fiecare element în parte, însă e important s-o înțelegi pentru că indiferent cum arată, tag-urile astea sunt folosite pentru scopuri diferite și uneori au și semantică relevantă pentru tipul fiecăruia. De obicei, elementele block-level ajută în layout, în compoziția semantică și în design-ul global al paginii, iar tag-urile inline sunt modificatori de sens (și prezentare, dar asta e ceva secundar) ai unor fragmente mici de text și atât.

Hai să vedem un exemplu simplu, pe care l-am mai văzut în acest curs:

<p>Acest text este pus <strong>direct</strong> în interiorul unui paragraf.</p>

Elementul care încapsulează un paragraf, <p>, este block-level, pentru că un paragraf este un bloc de text independent, care poate fi spațiat pe verticală de alte paragrafe și care n-ar avea sens dacă ar sta lângă altceva, pe aceeași linie, din perspectiva arhitecturii informaționale. Practic, paragrafele se succed pe verticală unul după altul, asta le face de tip block.

Elementul care încapsulează un cuvânt din acel paragraf – care e așezat și are sens lângă alte cuvinte din jur ca să formeze o propoziție coerentă, în cazul nostru tag-ul <strong>, este de tip inline. Asta pentru că nu sparge paragraful în mai multe segmente de tip bloc, ci marchează doar cuvintele încapsulate cu un sens special, în cazul ăsta cuvântul direct este mai important decât restul cuvintelor din acest paragraf.

Cele mai populare și des folosite tag-uri HTML block level, respectiv inline, sunt <div> și <span>. Ele sunt exemplul clasic de tag-uri care ilustrează diferența dintre block și inline, însă au și ceva în comun.

Ele sunt mai speciale și sunt caracterizate de ceva ce le diferențiază față de orice alte tag-uri din HTML: nici <div> și nici <span> nu au valoare semantică. Adică dacă <p> are valoare de paragraf, iar <strong> are valoare de lucru important dintr-un context textual anume, <div> și <span> sunt generice. Ele nu însemnă efectiv… nimic. Nu schimbă valoarea textului pe care-l încapsulează, sunt folosite doar ca sisteme de încapsulare generice, ca separatori de layout și respectiv text.

În schimb, la felul cum se comportă în pagină, sunt diametral opuse. Cum ziceam și mai devreme, <div> este un element block-level. El ocupă toată lățimea fluxului de date curent în HTML și se comportă ca un delimitator de layout în structura unei pagini. Numele lui vine efectiv din engleză de la cuvântul „divider” care înseamnă „separator, delimitator”.

De cealaltă parte, <span> înseamnă ”lungime, deschidere, anvergură, secțiune, sau scurt răstimp” în engleză, și este prin natura sa un element inline. El încapsulează exclusiv textul dintr-un anume context, de obicei pentru ca tu ca front end developer să-l referențiezi cumva sau să-i dai o anumită notă diferențiativă, cum ar fi o clasă specială, sau o altă proprietate HTML utilă în context, cum e title.

Proprietatea title care poate afișa text explicativ atunci când utilizatorul de pe un dispozitiv desktop de obicei, care are cursor (adică mouse sau stylus), stă cu respectivul cursor deasupra elementului în cauză. El se poate aplica și pe elemente block-level, dar se folosește cel mai des când vrei să afișezi text adițional, explicativ pentru utilizatorii desktop, pe elemente de text inline. Discutăm mai pe larg despre title puțin mai târziu.

Revenind la <div> și <span>, ele nu ar trebui folosite dacă în locul lor se pot găsi delimitatoare de text care să aibă sensul dorit. Fiind generice, ele nu îmbogățesc deloc conținutul cu sens, așa că sunt ultima opțiune când vine vorba de a compune un document corect. Ar trebui să treci prin toate elementele block-level și să descoperi că sensul fiecăruia nu se potrivește în context până să fii forțat să alegi <div>. La fel și pentru <span> în contextul textelor. Chiar azi vom explora destul de multe tag-uri mai bune decât <span> pentru că au sens semantic. Dar în unele situații chiar nu ai alt element HTML generic care să te ajute la încapsulare, așa că ești forțat sau forțată să folosești unul din elementele astea. Iată un exemplu banal de folosire:

<div>Exemplu de folosire a tag-ului <span>cu numele span</span> în interiorul unui tag de tip div.</div>

Ca exemple de abuz al HTML-ului, există site-uri care nu au alt fel de elemente decât <div> și <span>. Sau, aproape la fel de rău, există exemple de site-uri care folosesc, cu ajutorul CSS-ului, <div>-ul pe post de element inline sau <span>-ul pe post de element block-level. Doar că, așa cum v-am tot zis până acum, cursul ăsta vă învață regulile de scriere a HTML-ului valid și semantic, bazat pe standarde. Și standardele dictează să folosim tag-urile astea doar dacă n-avem altele mai bune și mai pline de sens, și să le folosim în contexte corecte (block-level pentru <div>, inline pentru <span>).

Lucrurile se mai pot complica puțin dacă menționez că elementele pot fi folosite și unele în altele: cele inline atât în cadrul altor elemente inline cât și în cadrul unor elemente block, iar cele block exclusiv în cadrul altor elemente block. Dar vorbim despre asta mai în detaliu când ajungem la niște capitole viitoare.

Acum că știi diferența dintre block și inline, e timpul să trecem la titluri.

Titluri în HTML

Dacă îți amintești, până acum am discutat deja de titlul principal al paginii, care ar trebui să fie unic în pagină, pe numele său <h1>.

Cifra aia de după litera h (de la „heading” în engleză) reprezintă importanța titlului în contextul paginii curente. Și respectiva cifră poate să fie mai mare decât 1. Asta înseamnă că, în ordinea importanței, există în HTML 6 tipuri de titluri:

<h1>Titlul principal și unic al paginii</h1>

<h2>Titlu secundar</h2>

<h3>Titlu de nivel 3</h3>

<h4>Titlu de nivel 4</h4>

<h5>Titlu de nivel 5</h5>

<h6>Titlu de nivel 6</h6>

Așa cum ziceam, <h1> e cel mai important și unic în pagină. <h2> e ceva mai puțin important ca titlu în pagină, și de obicei e folosit pentru delimitarea secțiunilor mari de conținut în interiorul articolului principal (dacă pagina e de tip articol) sau a widget-urilor mari de layout în general. Însă <h2> e mai important și mai rar în pagină decât <h3>, care e titlul de nivel 3, și care separă de obicei sub-secțiunile de conținut sau widget-urile mai mici, și așa mai departe.

Există doar 6 niveluri de titluri în HTML pentru că rareori se întâlnește cazul în care ai nevoie de mai mult de 3 sau 4 niveluri de titluri într-o pagină HTML de orice fel. Regula generală aici e să încerci să te gândești la structura documentului ca fiind o ierarhie de headere. Când finalizezi o pagină cu totul, dacă te uiți la această ierarhie, ideal ar fi ca orice grupare de 1 sau mai multe heading-uri <h6> să aibă măcar un <h5> ca „părinte” logic, orice grupare de 1 sau mai multe heading-uri <h5> să aibă măcar un <h4> ca „părinte” logic, și așa mai departe până la <h2>-uri, care ar trebui toate să aibă sens sub acel <h1> unic. Există unelte care testează ierarhia asta logică a heading-urilor din orice pagină: Logical Content Flow e unul din ele, iar https://www.accessi.org/ include ca parte a testelor de accesibilitate și o secțiune numită „Info and Relationships” care validează fluxul logic al headerelor în pagină.

Vom explora împreună pe măsură ce avansăm în acest curs (plus în 🔴LIVE-uri când codez laolaltă cu voi) secretele și logica exactă a distribuției titlurilor corect în HTML.

Paragrafe în HTML

Cu paragrafele ne-am mai întâlnit. Acum aflăm însă că ele sunt tag-uri de tip block level, care încapsulează textul din interiorul unui paragraf, care în interiorul lui conține o structură logică cu sens. Ce vreau să spun cu asta? Că dacă avem textul împărțit în mai multe rânduri, are mai mult sens să folosim mai multe paragrafe separate atunci când fiecare rând în parte are sens de sine stătător și poate fi citit ca o propoziție sau ca un lucru cu sens intrinsec, iar când acest lucru nu e viabil (cum a fost exemplul cu versurile dintr-o strofă de poezie, care sunt rânduri separate dar nu au neapărat sens decât în contextul strofei cu totul) putem folosi tag-ul <br /> (care e tot block-level, e un soi de pauză în blocul curent, din englezul „break”) ca să generăm „pauze orizontale” în interiorul paragrafului, care duc textul pe rândul următor:

<p>So far it is athwart the blue<br />
To where yon star appears,<br />
That for its light to reach our view<br />
Has needed thousand years.</p>

Link-uri în HTML

Lăsând paragrafele la o parte, care până acum par destul de clare ca elemente HTML, e momentul să discutăm despre unul din cele mai importante tag-uri din standardul HTML, tag-ul care face efectiv legătura între pagini sau elemente ale paginilor. Tag care în engleză se numește „anchor” de la „ancoră” pentru că e un fel de ancorare a unei alte pagini cu totul (sau a unei alte bucăți din pagina curentă) în interiorul unui paragraf sau text. Tag-ul <a> semnifică practic generarea unui link, a unei legături între documentul curent sau secțiunea curentă și ceva din afara contextului vizibil al utilizatorului. Ancora e fundamentală în definiția HyperText-ului, pentru că prin ancore se obține interconectivitatea specifică acestui termen atât de esențial din ansamblul limbajului HTML.

Unde mai pui că tag-ul ăsta poate fi cât se poate de simplu la nivel de parametrii sau proprietăți, dar poate avea și complexitate mai mare dacă e nevoie. Haideți să explorăm împreună posibilitățile:

<a href="https://www.google.com">Link către Google</a>

Aceasta este cel mai banal exemplu de link, de ancoră. Conținutul tag-ului, și anume textul „Link către Google” devine în acest moment clickabil, iar în momentul în care cineva dă click sau tap pe acest text, este dus de browser exact în conținutul sau valoarea parametrului href, care vine din engleză de la „HTML Reference” sau „H Ref”, care înseamnă ad literam „referință HTML”.

Tag-ul este prin definiție inline (deși mulți aleg să-l transforme prin CSS în block pentru a maximiza suprafața clickabilă), și se folosește foarte des în interiorul paragrafelor, încapsulând diverse bucăți de text care au referințe HTML spre alte pagini sau zone din pagina curentă.

E foarte important să fii atent sau atentă când scrii valoarea dintre ghilimele a proprietății href, pentru că ea este tratată de browser ca destinație exactă în momentul când utilizatorul site-ului făcut de tine dă click pe ancoră.

Un alt fel de a scrie aceste referințe, dacă tu ca front end developer dai link către o pagină din același site, este să omiți protocolul și domeniul (și să presupui că prin definiție baza sau „base”-ul link-urilor scrise fără protocol și domeniu este implicit site-ul curent, lucru care se poate schimba printr-un meta tag numit <base>, dar explorăm asta ceva mai târziu).

Dacă în exemplul de mai sus am scris explicit https:// adică protocolul de comunicații (despre care am vorbit cu câteva cursuri în urmă, dacă mai țineți minte), apoi domeniul www.google.com – înseamnă că am folosit tipul de scriere a href-ului în formă absolută. Scrierea absolută presupune să folosești de fiecare dată protocol://domeniu/URL-de-pagină când scrii proprietatea href a ancorelor. La polul opus, cum începusem să spun adineauri, există opțiunea să omiți protocolul și domeniul și să începi de la primul slash – / – de după domeniu al URL-ului. Asta presupune că descrii un href, sau un link, către o pagină internă site-ului curent, și folosești scrierea relativă. Relativă la ce? La baza, la <base>-ul de care ziceam mai devreme.

<p>Dacă vrei, poți căuta pe <a href="https://www.google.com/">Google</a> textul pe care vrei să-l găsești, dar mai ai posibilitatea să găsești și pe pagina noastră de <a href="/cautare">căutare în site</a> rezultate satisfăcătoare!</p>

În exemplul de mai sus, dacă utilizatorul este, spre exemplu, pe site-ul https://www.viorelmocanu.ro/ primul link duce către https://www.google.com/ iar al doilea link duce către https://www.viorelmocanu.ro/cautare pentru că protocolul și domeniul sunt considerate implicit cele ale site-ului pe care ești deja, dacă nu schimbi lucrul ăsta.

Am tot folosit exprimarea că „ancorele duc vizitatorii către alte pagini sau secțiuni de pagină”. La pagini e clară situația: descrii URL-ul complet sau relativ și gata. Pentru secțiuni de pagină, însă, e nevoie ca secțiunea către care vrei să dai link să aibă un identificator. Acesta se obține adăugând parametrul id (care îți reamintesc că e unic în pagină) pe orice element, sau parametrul name pe o altă ancoră din secțiunea către care vrei să trimiți. Ca să referențiezi secțiunea respectivă și să trimiți vizitatorul la ea atunci când dă click pe ancoră, pe link, e suficient ca în valoarea parametrului href să scrii prefixul # și apoi, legat, valoarea parametrului id sau name de care ziceam adineauri. Iată un exemplu:

<h1 id="zona-1">Aici începe zona 1</h1>
<p><a href="#zona-2">Acest link e la începutul zonei 1 și te va duce în zona 2</a></p>
<p>Aici e un paragraf de text folosit ca spațiator.</p>
<h2 id="zona-2">Aici începe zona 2</h2>
<p><a href="#zona-3">Acest link e la începutul zonei 2 și te va duce în zona 3</a></p>
<p>Aici e un paragraf de text folosit ca spațiator.</p>
<p><a name="zona-3" href="#zona-1">Acest link reprezintă zona 3 și te va duce înapoi în zona 1</a></p>

Un singur lucru mai am de zis despre ancore: atunci când reprezintă acțiuni importante dintr-o pagină de site (numite în engleză „call to action” sau „chemare la acțiune”), sugestia mea pentru tine e să le mai adaugi un parametru opțional, dar puternic și util: title. Am mai discutat despre title când analizam tag-ul <span> mai devreme, și în principiu își dovedește utilitatea cu vârf și îndesat de fiecare dată când există un așa numit „call to action” în joc. Așa cum am mai văzut, title afișează o mini explicație text pentru acțiunea pe care urmează s-o întreprindă vizitatorul în momentul în care dă click pe o ancoră, și dacă vrei să convingi pe cineva să dea click pe acel link e foarte bine să ai argumente adiționale pentru care să o facă. Spre exemplu, dacă promovezi un eveniment, ai putea pune numărul de bilete disponibile pentru eveniment în title, iar persoana care zăbovește cu mouse-ul deasupra butonului nefiind sigură dacă să dea sau nu click va vedea titlul și vor crește șansele să se „convertească” în vizitatorul paginii către care trimite acel link.

<a href="/bilete" title="Acest eveniment mai are disponibile doar 57 bilete acum, pe 31 martie 2023 la ora 17:53">Cumpără bilete acum &rarr;</a>

Și ca ultimă mențiune interesantă înainte să trecem la formatarea textului în HTML, cred c-ai observat deja o anomalie în exemplul scris mai sus. &rarr; vine de la „right arrow” și reprezintă ceva ce se cheamă Entitate HTML (sau HTML Entity). Toate entitățile HTML sunt codări ușor de scris ale unor simboluri des întâlnite în scrierea textului în format HTML. Ele încep cu simbolul & și neapărat se și termină cu simbolul ;

&entitate;

Sunt sute de astfel de simboluri gata de folosit în HTML, pentru a reprezenta simboluri din standardul ASCII sau chiar UTF-8 care altfel ar trebui scrise folosind codul lor intrinsec (care e mai greu de ținut minte). Așadar, ele nu sunt altceva decât alias-uri ușor de memorat ale unor caractere speciale pe care de obicei nu e bine să le scrii în clar în HTML. Săgeata dreaptă din exemplul anterior reprezintă o formă de a îmbia vizitatorul să dea click pe link, fiind un „simbol de acțiune”. Și nu e singurul. Te voi lăsa pe tine să explorezi librăria de entități HTML de link-ul de aici.

Formatare de text semantică prin tag-uri HTML

Ei bine, dragii mei, aici începe distracția. Am ajuns în punctul în care să discutăm despre diversitatea tag-urilor HTML și valoarea lor semantică diferită în fiecare context de folosire. Voi scrie câte un exemplu pentru fiecare tag, și vom aprofunda pe măsură ce trecem prin restul lecțiilor, folosind tag-urile în mod corect de la o lecție la alta.

Tag-urile de care discutăm acum sunt în preponderență de tip inline, pentru că se adresează încapsulării unor cuvinte sau propoziții, nu unor secțiuni mari de text, care ar putea fi block-level.

Așadar, cred că vă este deja familiar tag-ul <strong> care e echivalent cu a face textul bold. Efectul scontat în cazul ăsta e ca textul respectiv să pară mai important decât altele din același context (fie el un paragraf sau altă zonă dintr-un layout).

<p>Din acest paragraf, <strong>cuvintele astea</strong> sunt bold, deci sunt implicit mai importante.</p>

Un alt exemplu similar cu <strong> este tag-ul <em> care vine din engleză de la „empasis” care înseamnă „emfază, accent, accentuare, subliniere, intensitate”. Tag-ul ăsta face textul italic. Deci e un alt fel de a scoate un text în evidență, care e ceva mai subtil decât <strong> dar e aproape la fel de important.

Vă voi da două exemple aici, unul corect și unul greșit, ca să avem ocazia să discutăm despre o regulă importantă a scrierii HTML-ului.

<p>Din acest paragraf, <em>cuvintele astea</em> sunt italic, deci sunt implicit mai importante.</p>
<p>În acest paragraf, <strong>cuvintele <em>astea</strong> sunt</em> scoase în evidență, dar HTML-ul este greșit scris.</p>

Observăm că înainte ca tag-ul <strong> să se închidă, am deschis un alt tag de tip <em>, ceea ce în principiu nu e nicio problemă. Însă faptul că tag-ul <strong> se închide fără ca <em>-ul din interiorul său nu se închide acolo, ci mai târziu, e o greșeală destul de comună pentru începătorii în HTML, numită intercalare. Tag-urile <strong> și <em> se intercalează pentru că <em> nu se închide înainte de </strong>. Un mod corect de a scrie bucata asta este:

<p>În acest paragraf, <strong>cuvintele <em>astea</em></strong> <em>sunt</em> scoase în evidență, dar HTML-ul este greșit scris.</p>

Deci înainte de închiderea oricărui tag în care se deschid altele, toate tag-urile deschise în interior trebuiesc și închise înainte de închiderea tag-ului părinte. În felul ăsta, în orice tag părinte există exclusiv tag-uri copii „compleți”. Imaginați-vă ce traumatizant e un divorț pentru un copil care trebuie să aleagă în ce tabără să se împartă. Aici problema e similară, și din fericire, HTML-ul e suficient de flexibil încât să putem împărți tag-ul <em> în două tag-uri <em>, unul care aparține părintelui <strong> și unul care aparține părintelui <p>.

Bun, închidem paranteza și mergem mai departe: în versiunile anterioare de HTML, exista un tag care era folosit pentru aceeași funcție ca <strong>: să facă textul bold. Doar că acel tag avea o problemă: nu avea o semantică anume, era pur și simplu <b> de la bold. Lucrul ăsta contrazicea mantra HTML-ului că ar trebui să aibă un minim de tag-uri lipsite de sens intrinsec (cum am zis că sunt <div> și <span>). Așa că pentru că oricum era folosit în nenumărate site-uri scrise în formatul mai vechi de HTML, creatorii și modelatorii HTML-ului au decis să-l păstreze, dar să-i adauge un sens altul decât „bold”, și anume „bring attention to”. Știu că seamănă mult cu ideea din spatele <strong> care e să atragă atenția asupra unui cuvânt anume, însă <strong> (așa cum deducem și din nume) e mai „puternic” ca sens. Cuvintele încapsulate de <strong> versus cele încapsulate de <b> deși în primă instanță arată la fel (adică bold), au mai mare „greutate” în contextul textului, e mai important, mai relevant. În ierarhia de importanță pe care o putem da unor cuvinte dintr-un text, <strong> e în top, apoi vine <em>, apoi un element de care n-am vorbit încă: <mark> și abia apoi <b>. E important de reținut că HTML-ul decide sensul și structura conținutului, nu și design-ul lui. Unii front end developeri sau UX designeri pot decide ca în limbajul vizual al unui site să pună tag-ul <b> pe un nivel inferior de importanță inclusiv schimbându-i design-ul tag-ului <b> (să nu mai fie bold, ci semi-bold) sau invers, crescând în importanță <strong>-ul (făcându-l black și păstrând <b>-ul bold), sau dând o culoare mai contrastantă <strong>-ului față de <b>, care de când a apărut HTML5 nu prea mai e folosit oricum în proiecte reale, pentru evitarea confuziilor.

<p><strong>Poetul Mihai Eminescu</strong> e unul din poeții <b>importanți</b> ai României.</p>

Și ca să închidem seria tag-urilor care marchează importanța textului, să analizăm puțin și <mark> care vine din engleză de la verbul „to mark” care înseamnă „a marca” și nu face altceva decât să sublinieze o bucată de text. E ca și cum ai folosi un marker galben (sau verde sau orice culoare contrastantă cu textul) pe ecran. În realitate, tag-ul <mark> e folosit foarte des pe paginile cu rezultatele unei căutări într-un site. Tag-ul marchează locațiile exacte unde se regăsesc cuvintele căutate în rezultatele căutării.

<p>Propoziția asta conține cuvântul <mark>idiom</mark>, care e cuvântul căutat de tine.</p>

O relație similară între tag-urile <strong> și <b> există și între tag-urile <em> și <i> care în variantele anterioare de HTML însemna „italic” ad literam, însă acum înseamnă „idiomatic text”, adică efectiv text care se referă la un idiom sau o expresie. E o modalitate de a scoate un text referențiat sau citat în evidență în mod subtil, fără a-i da vreo importanță anume în context. Câteva exemple elocvente:

<p>În momentul ăla mi-am zis că <i>Așa ceva nu se poate!</i></p>
<p>Termenul <i>idiomatic</i> denumește un cuvânt sau expresie care aparține unui <i>idiom</i> care e o unitate lingvistică independentă (limbă, dialect, limbaj de specialitate, <i lang="la">et cetera</i>).</p>

Din câte vedeți, tag-ul e folosit și ca să schimbi „vocea” cu care vorbești sau tonul vocii (inclusiv când reprezinți gânduri sau schimbări de atitudine) și să reprezinți asta în text, dar și să subliniezi un text fără să-i dai vreo importanță anume (text care e o taxonomie sau categorie de lucruri – spre exemplu „Homo sapiens”, text care e o frază folosită des – spre exemplu „et cetera”, termeni tehnici, nume proprii folosite fără accent neapărat pe ele în frază, și așa mai departe).

În exemplul de mai sus o să vedeți și atributul lang folosit cu valoarea „la” care vine de la limba latină. Dacă vă amintiți, noi am folosit atributul lang pentru întreg documentul HTML, pe tag-ul <html>, însă el se poate folosi de fiecare dată când folosești în pagină un text sau un cuvânt în altă limbă.

Mai avem câteva tag-uri relevante pentru semantica textului nostru. Unul din ele este tag-ul <s> care vine din engleză de la „strikethrough”, care înseamnă „text tăiat”. Se folosește, așa cum te-ai aștepta, să tai un text care nu mai e valabil, o informație care a expirat (și e relevant să rămână încă prezentă în HTML).

<p>Biletele <s>sunt disponibile pe site</s> s-au terminat!</p>

Un lucru la care ar trebui să fiți atenți e că <s> are aceeași prezentare vizuală ca un alt tag, denumit <del> (de la „delete” care înseamnă „ștergere” în engleză) care reprezintă în mod explicit un text șters, corectat, care în combinație cu tag-ul <ins> (de la „insert” care înseamnă „inserare” în engleză) sunt folosite ca să prezinte elementele editate (șterse și adăugate) dintr-un document în lucru. Deci diferența dintre <s> și <del> e că <s> reprezintă informații expirate, iar <del> reprezintă informații corectate de cineva. Haideți să vedem un exemplu relevant pentru <del> și <ins>:

<p>Mai avem <del>decât</del> <ins>doar</ins> trei tag-uri de care să discutăm.</p>

Un alt element care în versiunile anterioare de HTML avea alt sens este: <u> care pe vremuri însemna pur și simplu „underline” – adică „text subliniat”. E ușor de observat că HTML-ul a evoluat din a declara elemente pur decorative și de design în codul HTML spre a separa complet felul cum arată lucrurile de semnificația, semantica lor, concentrându-se pe sens și lăsând design-ul pentru CSS. Și în cazul ăsta, tag-ul <u> a evoluat să însemne acum „unarticulated annotation”, adică „adnotare nearticulată”, care pe scurt înseamnă subliniere contextuală fără sens adăugat (cum este sublinierea textului greșit dintr-un paragraf de către un sistem care validează greșelile).

<p>Mai avem <u>decât</u> trei tag-uri de care să discutăm.</p>

Bun, mai departe: tag-ul <small> înseamnă ad literam „mic” în engleză. Spre deosebire de lucrul la care te-ai putea aștepta că se folosește acest tag, tocmai am discutat despre tag-uri care NU definesc aspectul vizual al elementelor încapsulate, ci sensul, semantica lor. Tag-ul <small> e folosit la marcarea textului legal pus de obicei la finalul contractelor și a altor mențiuni legale. În HTML-urile mai vechi exista și <big> care să reprezinte text „mare”, însă a devenit „deprecated”, adică efectiv făcut irelevant, scos din definiția HTML-ului. Noua semnificație reală a <small>-ului este de „small print” care în engleză înseamnă text legal, copyright, comentarii legale care n-ar trebui să fie luate în calcul în fluxul uzual al documentului ci doar ca referință legală, indiferent de prezentarea vizuală aleasă de obicei prin CSS.

<p>Acest tutorial video este oferit gratuit pe YouTube și pe GitHub.</p>
<p><small>Conținutul e licențiat sub licența generică Creative Commons Attribution-ShareAlike 2.5 respectiv MIT.</small></p>

Mai discutăm doar de 2 tag-uri astăzi. Ele sunt foarte similare pentru că ajută la scrierea unor lucruri din același registru: textul folosit ca indice, în engleză „subscript” (cum e numărul de atomi în moleculele chimice, e.g. C8H10N4O2 – asta e formula cafeinei) și textul folosit ca putere, în engleză „superscript” (cum sunt puterile din teoria lui Pitagora => a2 + b2 = c2 ). Tag-urile în cauză sunt <sub> și <sup> – de la subscript și superscript.

<p>Dacă bei puțină cafea (care conține cafeină, care are formula chimică C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>), vei putea studia și înțelege ce înseamnă un Googolplex, care e practic 10<sup>googol</sup>, sau în scrierea echivalentă 10<sup>10<sup>100</sup></sup> sau 10<sup>10 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000 000</sup></p>

Acestea fiind zise, am terminat lista de tag-uri pe care le vom explora astăzi.

Recapitulare și temă

Felicitări, ai mai parcurs un video din curs! Azi am învățat despre unele din cele mai importante elemente ale HTML-ului: tag-uri block și inline, div și span, titluri, paragrafe, link-uri și câteva metode de a da sens textului.

Ăsta e momentul perfect să îți dau o temă pentru acasă.

  • Folosind structura HTML (și chiar și fișierul HTML din tema precedentă) discutată video-ul anterior și o parte din tag-urile analizate astăzi, creează o listă de 5 poezii preferate – în aceeași pagină – asigurându-te că există o modalitate de a ajunge de la o poezie la alta folosind ancore puse și la începutul paginii (un fel de sumar care să aibă link-uri către toate poeziile) și între poezii (cu link către poezia precedentă și poezia următoare).
  • Apoi, dacă stăpânești GIT-ul bine, adaugă sau updatează acest fișier HTML în repository-ul tău de GitHub și dă-mi în comentarii numele repository-ului folosind regula discutată în video-ul trecut: fără protocol și domeniu, adică fără https://github.com/ (YouTube n-o să te lase să pui link-ul integral în comentarii).

Concluzii

Tocmai am terminat a zecea lecție din cursul de Front End Development în Română. Dacă sunt lucruri pe care nu le-ai înțeles și vrei să îmi adresezi o întrebare, scrie mai jos în comentarii și îți răspund cât pot de repede!

În cazul în care ți-a plăcut acest articol, dă-i un Share tuturor prietenilor tăi care ar putea învăța ceva nou din lecția de azi. Dacă nu ești încă abonat la noutăți, completează formularul de înscriere la newsletter și lasă-mi în comentarii mai jos ce crezi despre articolul ăsta.

Resurse adiționale

Dacă vrei să aprofundezi noțiunile prezentate în articolul curent, poți citi următoarele resurse utile (în engleză):

Toate cursurile de Front End Development pentru începători pe care le-am scris până acum

  1. Modulul 1: Noțiuni introductive
  2. Modulul 2: HTML pentru începători
  3. Modulul 3: CSS pentru începători
    • În curând…
  4. Modulul 4: HTML pentru avansați
    • În curând…
  5. Modulul 5: CSS pentru avansați
    • În curând…
  6. Modulul 6: JavaScript pentru începători
    • În curând…
  7. Modulul 7: Alte noțiuni utile
    • În curând…

Scrie-mi mai jos în comentarii cum ți se pare cursul până acum și ce alte module ai vrea să mai adaug pe viitor!

Lasă un răspuns

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

Acest site folosește Akismet pentru a reduce spamul. Află cum sunt procesate datele comentariilor tale.