HTML - Elementul Head
Elementul <head> este un container pentru aceste elemente: <title>, <style>, <meta>, <link>, <script> și <base>.
Elementul HTML <head>
Elementul <head> conține metadate (date despre date) și se află între tag-urile <html> și <body>. Metadatele sunt informații despre document și nu sunt afișate pe pagină; de obicei setează titlul, setul de caractere, stilurile, scripturile și alte informații meta.
Elementul HTML <title>
Elementul <title> definește titlul documentului. Trebuie să fie doar text și se afișează în bara de titlu sau fila browserului. Este obligatoriu în fiecare document HTML. Titlul contează mult pentru optimizarea pentru motoarele de căutare (SEO), deoarece motoarele de căutare îl folosesc pentru a ordona paginile în rezultate, deci fă-l precis și cu sens.
Exemplu
Un document cu un titlu cu sens.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Un Titlu de Pagină Semnificativ</title>
</head>
<body>
Conținutul documentului......
</body>
</html>
Elementul HTML <style>
Elementul <style> definește informații de stil pentru o singură pagină.
Exemplu
Stiluri de pagină setate cu un element <style>.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>
</head>
<body>
<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>
</body>
</html>
Elementul HTML <link>
Elementul <link> definește relația dintre pagină și o resursă externă. Este folosit cel mai adesea pentru a lega o foaie de stil externă.
Exemplu
Legarea unei foi de stil externe.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>Acesta este un titlu</h1>
<p>Acesta este un paragraf.</p>
</body>
</html>
Elementul HTML <meta>
Elementul <meta> setează lucruri precum setul de caractere, descrierea paginii, cuvintele cheie, autorul și viewport-ul. Aceste metadate nu sunt afișate pe pagină, dar sunt folosite de browsere, motoare de căutare și alte servicii. De exemplu: <meta charset="UTF-8"> setează setul de caractere, name="keywords" oferă cuvinte cheie pentru căutare, name="description" oferă o descriere a paginii, name="author" numește autorul, iar http-equiv="refresh" poate reîncărca pagina la un anumit interval.
Exemplu
Mai multe tag-uri meta în head.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="Tutoriale web gratuite">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="John Doe">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Toate informațiile meta se află în secțiunea head.</p>
</body>
</html>
Setarea Viewport-ului
Viewport-ul este zona vizibilă a paginii pentru utilizator, mai mică pe un telefon decât pe un calculator. Ar trebui să incluzi un tag <meta> pentru viewport în fiecare pagină. Partea width=device-width face ca lățimea paginii să urmeze lățimea ecranului dispozitivului, iar initial-scale=1.0 setează nivelul inițial de zoom.
Meta tag pentru viewport
Tag-ul meta pentru viewport de inclus în fiecare pagină.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Elementul HTML <script>
Elementul <script> definește JavaScript pe partea de client.
Exemplu
Un script în head care schimbă textul unui element.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Salut JavaScript!";
}
</script>
</head>
<body>
<p id="demo">Un paragraf.</p>
<button type="button" onclick="myFunction()">Încearcă</button>
</body>
</html>
Elementul HTML <base>
Elementul <base> setează URL-ul de bază și/sau ținta pentru toate URL-urile relative dintr-o pagină. Trebuie să aibă un atribut href, un atribut target, sau ambele, și poate exista doar unul pe document.
Exemplu
Un URL și o țintă implicite pentru toate linkurile relative.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="https://prompt-cookbook.com" target="_blank">
</head>
<body>
<img src="images/stickman.gif" width="24" height="39" alt="Omuleț">
<a href="tags/tag_base.asp">Eticheta HTML base</a>
</body>
</html>
Rezumatul Capitolului
Pe scurt: elementul <head> conține metadate și se află între <html> și <body>. <title> este obligatoriu și setează titlul. Elementul <style> setează stiluri pentru o pagină, tag-ul <link> se leagă de foi de stil externe, elementul <meta> setează lucruri precum charset, descriere, cuvinte cheie, autor și viewport, elementul <script> definește JavaScript, iar elementul <base> setează un URL de bază și o țintă.
Elemente HTML head
Tag-urile legate de head sunt: <head> (informații despre document), <title> (titlul documentului), <base> (o adresă sau țintă implicită pentru linkuri), <link> (o legătură către o resursă externă), <meta> (metadate despre document), <script> (un script pe partea de client), și <style> (informații de stil).