Il linguaggio Html

Oggi vi presento una mini-guida sul linguaggio HTML.

Il linguaggio HTML è un linguaggio molto semplice che permette di creare pagine web.

É stato sviluppato da Tim Berners Lee verso la fine degli anni ’80, ma ebbe la sua piena diffusione negli anni ’90, quando si diffuse un utilizzo commerciale del web.

Html sta per HyperText Markup Language ovvero tradotto letteralmente vuol dire linguaggio a marcatori per ipertesti. Gli ipertesti sono le pagine web che sono fruibili non sequenzialmente ma attraverso i link che sono contenuti in esse. Ed è questa la grande potenzialità degli ipertesti.

Linguaggio a marcatori vuol dire che è un linguaggio che fa uso di tag per descrivere i dati, andando avanti nella guida vi spiegherò quali utilizzare.

Il linguaggio HTML non è l’unico linguaggio di markup, ad esempio più avanti vi parlerò dell’XML, utilissimo per creare le app su Android e non solo, infatti la potenzialità dell’XML assieme ad altri linguaggi come ad esempio l’RDF permette di proiettarci verso un web semantico. Ma vedremo tutto ciò più avanti.

Anche se oggi ci sono tanti CMS gratuiti che consentono di creare siti web, tante volte bisogna comunque mettere mano al codice e intervenire su vari punti se si vogliono ottenere i risultati sperati.

Struttura di un file in linguaggio HTML

Un file HTML utilizza i tag ed ha una struttura tipo questa:

<!DOCTYPE html>

<html lang=”it”>

<head><title> Titolo della pagina </title></head>

<body>

Corpo della pagina

</body>

</html>

Questa è la struttura base della pagina HTML che si apre con il il tag <html> e si chiude con il tag </html>.

In genere è buona norma inserire nel tag html la proprietà lang ed impostarla con la lingua che si usa per lo sviluppo del sito web.

Ad esempio, nel mio caso ho inserito: <html lang=”it”>. Per la versione in inglese del sito potrei utilizzare invece <html lang=”en”>.

Avete sicuramente notato che sopra il tag html c’è la scritta <!DOCTYPE html>. Questa dicitura non è fondamentale, ma serve al browser a capire di che tipo di documento si tratta, in questo caso proprio di un file html.

Potete sicuramente esservi imbattuti in altre diciture inerenti il doctype, io vi ho illustrato la più recente che si riferisce all’HTML 5, ovvero l’ultima versione del linguaggio fino ad ora.

Le sezioni principali del documento html sono dunque due: la testa (head) e il corpo (body).


Tag head

All’interno della sezione head va il tag title ma più avanti vedremo che in questa sezione si inseriranno anche i collegamenti ai fogli di stile, i meta tag, ecc…

Tag title

Il tag title serve ad inserire il titolo della pagina ed è un tag importantissimo per poter indicizzare un sito web. Infatti, se andiamo nei motori di ricerca compare proprio la dicitura del titolo.

Ad esempio se inserisco su google la parola chiave: frazioni con scratch, mi compaiono subito alcuni risultati.

indicizzazione coding creativo

Come potete notare l’articolo di coding creativo, sebbene sia stato creato solo 4 giorni fa, compare più in alto degli altri.

Il merito è dovuto ad alcune tecniche SEO, che vi spiegherò più avanti e una di queste (ce ne sono molte atre, credetemi!) consiste proprio nel costruire un titolo ad hoc.

Notate adesso il testo che compare su google ovvero ‘Frazioni con scratch, frazioni proprie, improprie e apparenti con scratch ‘. É proprio il testo contenuto nel tag title. Vi allego infatti cosa ho inserito nel codice:
<title>Frazioni con scratch, frazioni proprie, improprie e apparenti con scratch</title>

Proprio quello che visualizzo su google!

Ci sono alcune regole da seguire per il tag title, una di queste è la lunghezza. Non bisogna eccedere i 70 caratteri, in quanto google taglierebbe gli eccedenti. In realtà in questo caso specifico non è successo anche se i caratteri (compresi gli spazi vuoti) sono 73.

Il mio consiglio comunque è, se possibile, cercare di mantenersi tra i 60-70 caratteri circa.

Il tag title è importantissimo anche per la condivisione sui social.

Infatti, se vedete la figura in basso, quando si condivide un articolo si legge il titolo della pagina sotto la figura.

social coding creativo

Quindi occhio a questo tag! É importantissimo saper impostare le parole chiavi giuste per essere trovati nei motori di ricerca.

Un’altra accortezza è quella di impostare un title diverso per ciascuna pagina del sito web.
Ad esempio se il sito è composto da 5 pagine utilizzate per ciascuna un title diverso. Occhio perchè se non lo fate l’algoritmo di google se ne accorgerà e vi penalizzerà.

Comunque più avanti vi dirò quali strumenti utilizzare per vedere se avete commesso degli errori nei tag title del vostro sito e come correggerli.

Presto creeremo un esempio di pagina web, seguite i miei articoli per scoprire come fare!

Alcuni link utili:

Tag semantici

Form in html

Tag strong ed em

Collegamenti interni ad una pagina web

Collegamenti ipertestuali

Inserire immagini in una pagina web

Paragrafi in html

Tabelle in html

Elenchi in html

Tag dei titoli

Il linguaggio html

Come trovare immagini per il sito web

Quali colori scegliere per un sito web

Quali font scegliere per un sito web

Autore dell'articolo: cristina

Avatar per Coding Creativo

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *