HTML5 : ELEMENTI DEL TAG HEAD


<head> è il tag html che che funge da contenitore per i metadata (dati informativi sul documento html) , che non appaiono nella pagina, ma che fungono da informazioni per gli utenti e per i crawlers.

In parole povere , tutto ciò che è contenuto in questo tag non è visibile all’ occhio umano, I contenuto visibili della nostra pagina html si trovano nel tag body che esaminiamo nel prossimo tutorial.




Gli elementi ammessi all’ interno di questo tag sono i seguenti:

  • <title> 
  • <link> 
  • <meta> 
  • <style>
  • <script> 
  • <base>

1. TITLE

Title è l’ elemento che assegna un titolo alla pagina html , vediamo subito un esempio.

Copiate ed incollate il seguente codice nei vostri editor di testo.

(Noi utilizziamo NOTEPAD ++ scaricabile dal : link al sito ufficiale di NOTEPAD ++).

<!doctype html>
<html lang=”it”>
<head>
<title> titolo della pagina </title>
</head>
</html>

2. LINK

<link> è l’elemento che viene utilizzato per collegare alla pagine principalmente i fogli di stile esterni(css), ma anche favicons personalizzate.

Nell’ esempio appena mostrato , abbiamo aggiunto al documento html un link ad un secondo documento denominato style.css , che conterrà tutte le informazioni sullo styling della pagina.

3. META

<meta> è l’elemento che fornisce metadati relativi al documento html. 

I meta elementi vengono usati per specificare informazioni aggiuntive utili ai motori di ricerca.




Alcuni di questi sono:

  • la descrizione della pagina : <meta name=”description” content=”tutorial head html”>
  • le parole chiave : <meta name=”keywords” content=”HTML, CSS, XML, XHTML, JavaScript”>
  • l’autore del documento : <meta name=”author” content=”Ciò Che So”>
  • robots : <meta name=”robots” content=”index, follow” />

4.STYLE

<style> è il  tag che attribuisce uno stile al nostro documento html.

All’interno dell’elemento <style> si specifica come devono essere visualizzati gli elementi HTML in un browser.

VEDIAMO UN ESEMPIO

<!doctype html>
<html lang=”it”>
<head>
<title> titolo della pagina </title>
<link rel “stylesheet” type = “text/css” href = “style.css”/>
<style>
h1 {
color: red;
}
</style>
</head>
<body>
<h1>questo è il titolo della parte visibile della pagina</h1>
</body>
</html>

5. SCRIPT

<script>  è l’elemento che contiene eventuali istruzioni di scripting.

Nella maggior parte dei casi , si tratta di script Java , che servono a dare dinamicità alla pagina , manipolare le immagini, audio video.

Di seguito un esempio di script che mosta l orario attuale

Sono le ore


6. BASE

<base> è l’elemento che consente di definire un target di base per tutti i link della nostra pagina.




Questo target decide se una pagina si dovrà aprire ad esempio nella medesima finestra o in una nuova scheda.

  • _blank : apertura in una nuova finestra
  • _self: apertura nella stessa finestra ( valore di default )

Vediamo un esempio

<!doctype html>
<html lang=”it”>
<head>
 <base href=”https://www.ciocheso.com” target=”_blank”>
</head>
<body>
<a href=”https://www.ciocheso.com”>CIO’ CHE SO</a>
</body>
<body>
<h1>questo è il titolo della parte visibile della pagina</h1>
</body>
</html>

Nell esempio appena mostrato , il link CIO’ CHE SO , aprirà la pagina in una nuova scheda.


Continua a leggere