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

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

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

Possiamo esserti utili?

Ti è piaciuto questo articolo? Vuoi saperne di più? Non esitare a scriverci!

EMail   *
Nominativo/Azienda   *
Telefono
Messaggio   *
Vuoi iscriverti alla newsletter?
Accettazione Privacy Policy   *

Commenta con Facebook