Elementul HTML head. Eticheta meta ce descrie metadate. Setarea Viewport.

Susține Lectii-Virtuale!

Elementul HTML <meta>

Elementul <meta> este utilizat pentru a specifica setul de caractere utilizat, descrierea paginii, cuvinte cheie, autor și alte metadate.
Metadatele sunt utilizate de browsere (modul de afișare a conținutului), de motoarele de căutare (cuvinte cheie) și alte servicii web.

Definiți setul de caractere utilizat:

<meta charset="UTF-8">

Definiți o descriere a paginii dvs. web:

<meta name="description" content="Tutoriale web gratuite">

Definirea cuvintelor cheie pentru motoarele de căutare:

<meta name="keywords" content="HTML, CSS, XML, JavaScript">

Definiți autorul unei pagini:

<meta name="author" content="John Doe">

Actualizați documentul la fiecare 30 de secunde:

<meta http-equiv="refresh" content="30">

Exemplu de etichete <meta>:
 

<meta charset="UTF-8">
<meta name="description" content="Tutoriale web gratuite">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="John Doe">

Setarea Viewport

HTML5 a introdus o metodă pentru a permite proiectanților web să preia controlul asupra viewport-ului, prin eticheta <meta>.
Viewport este zona vizibilă a utilizatorului unei pagini web. Aceasta variază în funcție de dispozitiv și va fi mai mică pe un telefon mobil decât pe ecranul computerului.
Ar trebui să includeți următorul element viewport <meta> în toate paginile web:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Un element viewport  <meta> oferă instrucțiuni browserului despre cum să controlați dimensiunile și scalarea paginii.
Partea width=device-width stabilește lățimea paginii pentru a urma lățimea ecranului dispozitivului (care va varia în funcție de dispozitiv).
Partea initial-scale=1.0  setează nivelul inițial de zoom când prima pagină este încărcată de browser. 
Iată un exemplu de pagină web fără eticheta viewport meta, și aceeași pagină web cu eticheta viewport <meta>.

Sfat: Dacă navigați pe această pagină cu un telefon sau o tabletă, puteți face click pe cele două legături de mai jos pentru a vedea diferența.

Exemplu: Fără eticheta viewport meta



Exemplu: Cu eticheta viewport meta