Texte

Diana

Acest articol explică modul în care HTML poate fi utilizat pentru a structura o pagină de text prin adăugarea de titluri și paragrafe, accentuarea cuvintelor și multe altele.

#Titluri (Headings)

HTML oferă șase elemente pentru titluri (headings), care pot fi marcate utilizînd tagurile: <h1>, <h2>, <h3>, <h4>, <h5> și <h6>.

<h1> este folosit pentru titlul principal al paginii, următoarele fiind utilizate pentru a marca subtitluri în ordinea importanței lor. Este recomandat să avem un singur <h1> în pagină, pentru a arăta motoarelor de căutare care este subiectul principal al paginii.

<h1> Texte | Lecție HTML </h1>

În principiu <h1> va avea fontul cel mai mare, iar <h6> cel mai mic, deși aceasta nu este neapărat o regulă bătută în cuie.

Fiecare browser vine cu propriile stiluri asupra elementelor de bază, însă mai târziu vom vedea cum putem adăuga propriile stiluri via CSS.

Atunci când realizăm structura unei pagini este bine să luăm în considerare câteva bune practici:

Să ne asiguram că atunci cînd folosim titluri, ținem cont de ordinea lor in ierarhie. Adică, dacă am folosit un h3 ce reprezintă un subtitlu în pagină, nu vom folosi după acesta un h2 să reprezentăm un sub-subtitlu. Nu ar avea nici un sens să facem asta, nu?

Deși avem 6 headings la dispoziție, nu ar trebui să folosim mai mult de 3 per pagină. Dacă totuși simțim nevoia de a folosi mai multe titluri, poate e momentul să facem o nouă pagină?!

#Paragrafe

Elementele de tip paragraf sunt marcate cu ajutorul tag-ului <p>. Vom folosi acest element pentru a insera paragrafe de text fără vreo proprietate sau înțeles special.

<p> Acesta este un paragraf cu câteva cuvinte. </p>

De fiecare dată când va întâlni tag-ul <p>, browser-ul va afișa conținutul acestuia începînd cu o nouă linie (spunem că paragrafele sunt elemente de tip block). Același lucru se întâmplă și cu titlurile, după cum poți vedea în demo-ul de mai jos.

Dacă ai experimentat cu codul până acum, poate ai observat că dând Enter într-un paragraf, nu va afișa textul pe o nouă linie. Ca să obținem asta putem fie să folosim un nou paragraf, fie tag-ul <br>.

<p>
  Azi am codat împreună cu <br>
  Alex, <br>
  Diana și <br>
  Antonia.
</p>

#Elementul <hr>

Elementul <hr> (horizontal line) este un separator între secțiuni/elemente din pagină.

<p> O primă regulă în această casă: Întotdeauna zâmbește! </p>
<hr>
<p> A doua regulă: Vino cu prăjituri! </p>

#Citate

Atunci când vrem să marcăm un text mai lung preluat dintr-o anumită sursă ne vom folosi de tag-ul <blockquote>. Acest tag vine la pachet cu o indentare default.

<blockquote 
  cite="https://en.wikipedia.org/wiki/A_journey_of_a_thousand_miles_begins_with_a_single_step"
>
  <p> Călătoria de 1000 mile începe cu un singur pas. </p>
</blockquote>

Dacă avem nevoie să marcăm un citat mai scurt, vom folosi tag-ul <q> (quote).

<p>
  După cum a spus Roosevelt, 
  <q cite="https://www.goodreads.com/quotes/10002-it-is-hard-to-fail-but-it-is-worse-never">
    It is hard to fail, but it is worse never to have tried to succeed.
  </q>
</p>

După cum poți observa mai sus, ambele elemente au atributul cite pe care îl folosim pentru a marca sursa citatului.

#Elementele <em> & <strong>

În limbajul obișnuit, subliniem adesea cuvinte pentru a modifica sensul unei propoziții și dorim să marcăm anumite cuvinte ca fiind importante sau diferite într-un fel.

HTML oferă diverse elemente semantice pentru a ne permite să marcăm conținutul textual cu astfel de efecte. Unul dintre aceste elemente este tag-ul <em>.

<p>
  Sunt <em> foarte bucuros </em> că ai primit jobul!
</p>

Mai avem la dispoziție și tag-ul <strong>, folosit pentru a marca un element ca fiind foarte important. Fiind un element semantic, acesta este recunoscut de cititoarele de ecrane și redat cu o tonalitate diferită a vocii.