HTML - Notiuni de baza

HTML (HyperText Markup Language) este limbajul în care sunt scrise paginile web. Un fișier HTML este un fișier text cu extensia .html (mai rar .htm), în care conținutul este marcat cu etichete (tag-uri): ele îi spun browserului ce este un titlu, un paragraf, o imagine sau un link. Browserul citește etichetele și afișează rezultatul pe ecran.

Versiunea folosită astăzi este HTML5, întreținută ca „standard viu” (HTML Living Standard) de organizația WHATWG și actualizată permanent. Aspectul paginii (culori, fonturi, așezare) se stabilește separat, cu CSS.

De ce ai nevoie

• un editor de cod sursă, de exemplu Visual Studio Code sau Notepad++, care colorează codul și numerotează liniile, lucru util la găsirea greșelilor (se poate folosi și Notepad);
• un browser (Chrome, Firefox, Edge), în care deschizi fișierul cu dublu clic.

Pentru a crea un fișier HTML, salvezi fișierul din editor cu extensia .html. În Windows este util să ai extensiile fișierelor vizibile: în Windows 11, File Explorer → View (Vizualizare) → Show (Afișare) → File name extensions; în Windows 10, fila View → bifați File name extensions.

Etichete și elemente

O etichetă se scrie între semnele < și >. Cele mai multe etichete sunt pereche: una de deschidere și una de închidere, care are în plus caracterul /. Împreună cu conținutul dintre ele formează un element:

<p>Acesta este un paragraf.</p>

Unele elemente nu au conținut și nici etichetă de închidere, de exemplu <br> (rând nou), <img> (imagine), <meta> sau <link>. În HTML5 se pot scrie și cu / la final (<br />), dar acesta nu are niciun efect.

Elementele se pot pune unele în altele, dar trebuie închise în ordinea inversă deschiderii:

<p>Un cuvânt <strong>important</strong> în text.</p>

HTML nu face diferența între literele mari și mici în numele etichetelor (<P> și <p> sunt echivalente), dar se recomandă folosirea literelor mici.

Atribute

Multe etichete acceptă atribute, care dau informații suplimentare despre element. Ele se scriu în eticheta de deschidere, sub forma nume="valoare":

<a href="https://www.drogoreanu.ro/">Pagina principală</a>
<img src="poza.jpg" alt="Descrierea imaginii" width="400" height="300">

Atributul href indică adresa linkului, src fișierul imaginii, iar alt textul care descrie imaginea pentru cei care nu o pot vedea și pentru motoarele de căutare.

Structura unei pagini HTML

Orice pagină HTML5 are aceeași structură de bază. Exemplu: o pagină cu titlul Exemplu și conținutul Conținut pagină:

<!doctype html>
<html lang="ro">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Exemplu</title>
  <meta name="description" content="O scurtă descriere a paginii">
</head>
<body>
  <h1>Primul meu titlu</h1>
  <p>Conținut pagină</p>
</body>
</html>

• <!doctype html> se scrie pe primul rând și îi spune browserului că pagina folosește HTML5. Declarațiile lungi din versiunile vechi (HTML 4.01, XHTML) nu mai sunt necesare.
• <html lang="ro"> cuprinde toată pagina; atributul lang indică limba conținutului, utilă pentru motoarele de căutare și pentru cititoarele de ecran.
• <head> conține informații despre pagină, care nu se afișează direct.
• <body> conține tot ce se afișează pe ecran: texte, imagini, linkuri, tabele, formulare.

Zona head

• <meta charset="utf-8"> stabilește codarea caracterelor și se pune prima în <head>, ca diacriticele să fie afișate corect.
• <meta name="viewport" …> face ca pagina să se adapteze la ecranul telefoanelor.
• <title> este titlul paginii, afișat în fila browserului și ca titlu în rezultatele Google.
• <meta name="description" …> este descrierea paginii, folosită de motoarele de căutare în rezultate.

Tot în <head> se leagă fișierele externe: foi de stil CSS, scripturi JavaScript și favicon-ul:

<link rel="stylesheet" href="stil.css">
<script src="script.js" defer></script>
<link rel="icon" href="/favicon.ico">

Zona body și elementele semantice

HTML5 are elemente care descriu rolul fiecărei părți din pagină. Ele ajută motoarele de căutare și cititoarele de ecran să înțeleagă structura paginii:

<body>
  <header>antetul și logo-ul site-ului</header>
  <nav>meniul de navigare</nav>
  <main>
    <article>conținutul principal al paginii</article>
  </main>
  <footer>subsolul paginii</footer>
</body>

Fiecare pagină ar trebui să aibă un singur titlu principal <h1>, urmat de subtitluri <h2>–<h6> în ordine logică.

Pagina principală

Pagina principală a unui site sau a unui director este fișierul index.html (sau index.php). Serverul o afișează automat: la vizitarea adresei www.nume.ro este afișată pagina www.nume.ro/index.html.

Comentarii

Comentariile nu sunt afișate de browser și servesc pentru explicații în cod:

<!-- Acesta este un comentariu în HTML -->

Comentariile sunt însă vizibile pentru oricine deschide codul sursă al paginii (Ctrl+U în browser), deci nu se scriu în ele informații confidențiale.

Verificarea codului

Corectitudinea codului se verifică cu validatorul W3C, la validator.w3.org. Detalii în articolul Verificarea paginilor.