Il tag head

Proseguiamo il nostro viaggio nel mondo del linguaggio HTML. Nell’articolo precedente abbiamo gettato le basi per comprendere com’è strutturato un documento HTML. E’ giunto il momento di entrare nello specifico di uno dei tag fondamentali per la creazione di una pagina web: il tag <head>.

<head> si trova all’interno del tag <html> e racchiude le informazioni base della pagina a livello di metadati, che non saranno pertanto visibili nel sito. Contiene ad esempio: i tag relativi al titolo della pagina, la descrizione per i motori di ricerca, le keyword e i link verso pagine esterne collegate al documento come i fogli di stile e gli script lato client.

Vediamo insieme quali sono i tag che possono essere inseriti nella sezione <head> e a cosa servono.

<title>

Il tag <title> definisce il titolo della pagina che potrà essere visualizzato:

All’interno del tab (nella barra in alto della scheda del browser);
Come nome della pagina quando viene salvata nei “preferiti”;
Nella pagina di risultati dei motori di ricerca

E’ molto importante inserire il tag <title> in tutte le pagine del vostro sito per indicare agli utenti e ai motori di ricerca la tematica che affronterete nella pagina. Inoltre un sito web formato da pagine senza titolo risulta essere poco professionale e per nulla efficiente.

<html>
    <head>
        <title>Benvenuti in XODUS blog!</title>
    </head>
    <body>
    </body>
</html>

<link>

Il tag <link> crea un collegamento tra la pagina web e una risorsa esterna. Viene utilizzato principalmente per collegare uno o più fogli di stile (CSS).

<html>
    <head>
       <title>Benvenuti in XODUS blog!</title>
        <link rel="stylesheet" type="text/css" href="mystyle.css">
    </head>
    <body>
   </body>
</html>

Attributi del tag <link>

Attributi	Valori	Descrizioni
rel	alternate author bookmark help license next nofollow search tag prev prefetch noreferrer	Specifica la relazione tra il documento corrente e il documento esterno
type	button checkbox color datetime email file hidden image month number password time submit reset tel	Definisce il formato del documento esterno
href	url	Serve a indicare l'URL dov'è collocato il documento da collegare

Attributi

Valori

Descrizioni

rel

alternate

author

bookmark

help

license

nofollow

tag

prefetch

noreferrer

Specifica la relazione tra il documento corrente e il documento esterno

type

button

checkbox

color

datetime

file

hidden

image

month

number

password

time

submit

reset

tel

Definisce il formato del documento esterno

href

url

Serve a indicare l'URL dov'è collocato il documento da collegare

Ricordatevi di inserire sempre il formato del documento dopo in nome del file, preceduto da un punto (in questo caso è “.css”) altrimenti il browser non sarà in grado di interpretare il documento.

<style>

Questo tag definisce gli stili grafici CSS del documento HTML e ogni documento può contenere più tag <style>. Viene utilizzato per incorporare i CSS direttamente nel documento, senza dover collegare un foglio di stile esterno. Nonostante possa sembrare una soluzione comoda, è consigliabile utilizzare i fogli di stile esterni per centralizzare le modifiche e garantire il disaccoppiamento tra contenuto ed estetica.

<html>
 <head>
    <title>Benvenuti in XODUS blog!</title>
    <style type="text/css">
   p {color:blue; font-size: 12px;}
   h1 {color:yellow;}
   </style>
 </head>
 <body>
 </body>
</html>

<meta>

I tag <meta> vengono usati per istruire i browser e i motori di ricerca tramite metadati.

Nello specifico i meta tag possono essere usati per indicare le parole chiave (keywords) per i motori di ricerca, l’autore della pagina web, l’ultima data di modifica dei contenuti e molto altro.

Vediamo come utilizzare il tag meta:

<html>
  <head>
     <title>Benvenuti in XODUS blog!</title>
      <meta name=”proprietà” content=”valore”>
  </head>
  <body>
  </body>
</html>

Attributi del tag <meta>

Attributi	Valori	Descrizioni
name	application-name author description generator keywords	Indica il nome del metadato
content	text	Serve ad assegnare il valore associato al metadato

Attributi

Valori

Descrizioni

name

application-name

author

description

generator

keywords

Indica il nome del metadato

content

text

Serve ad assegnare il valore associato al metadato

Alcuni esempi di metatag

keywords	Es: <meta name="keywords" content="title, base, link, style, script">
author	Es: <meta name="author" content="Nome Autore">

<script>

Il tag <script> viene utilizzato per inserire dinamicità e risposte intelligenti all’interno di una pagina web. Gli script possono essere incorporati nel documento HTML (inline) ma la scelta migliore è creare un file esterno. Inserire il codice inline infatti può risultare immediato ma in realtà diventa scarsamente mantenibile.<script>

Vediamo insieme come inserire un codice inline:

<html>
    <head>
       <title>Benvenuti in XODUS blog!</title>
        <script type=”text/javascript”>
          //<![CDATA[
          var i=10;
          if (i<5)
          {
           // some code
           }
         //]]>
       </script>
    </head>
    <body>
    </body>
</html>

Se volete usare un file esterno dovete invece inserire nel tag <script> l'URL del documento da collegare tramite l'attributo "src":

<script type="text/javascript" src="miojavascript.js"></script>

Attributi del tag <script>

Attributi	Valori	Descrizioni
type	MIME-type	Specifica il tipo di linguaggio utilizzato dallo script
src	url	Indica il file esterno in cui è definito il codice da eseguire

Anche il secondo articolo sui principi del linguaggio HTML è giunto al termine. La prossima settimana affronteremo i tag contenuti nella sezione <body>. Continuateci a seguire, inviateci i vostri commenti sulla nostra pagina facebook e se avete qualche suggerimento, qualsiasi domanda o curiosità non esitate a contattarci.

Valentina Lagorio