fatti trovare dai tuoi clienti
Corso SEO & HTML: #03 Tag Head e Body
il tag Head è la prima cosa che si incontra in un file HTML, poi viene il Body. Il tag Head è invisibile all'utente, serve solo a dare istruzioni al bro...
« Corso SEO & HTML: #02 Struttura del file
- Come è fatto un file HTML?
- Quali sono i tag HTML che devi sempre usare?
- Conosci i tag <html>, <head> e <body> ?
In questa rubrica sulla SEO dedicata alla scrittura di codice HTML ti spiego con parole semplici quali sono i tag HTML fondamentali di ogni pagina web per farti capire come è fatto un sito web in modo da sfruttare al meglio le conoscenze sulla SEO ed essere in prima pagina su Google, senza farti necessariamente diventare un webmaster o un hacker!
Tag <html>
L'elemento che racchiude tutte le cose
Nella scorsa lezione sul linguaggio HTML abbiamo visto la struttura del file HTML e abbiamo visto a grandi linee cosa sono i tag HTML.
Oggi per la prima volta entriamo nello specifico e ti spiego come i tag HTML possono essere annidati — cioè messi uno dentro l'altro come una bambolina matrioska — in modo da poter formare qualsiasi pagina web.
Il primo tag che incontriamo è composto da un inizio <html> e una fine </html>, che ha al suo interno sempre e solo due tag:
- il tag <head> per primo
- il tag <body> per ultimo
A dire il vero i browser sono tolleranti agli errori di battitura e possono visualizzare anche file HTML privi di questi tag, ma ti suggerisco di essere formale il più possibile: ai motori di ricerca piacciono molto di più le pagine web ben scritte!
Ti faccio subito un esempio di pagina HTML minimale ma completa:
(esempio.html scritto con blocco note di windows)
(stesso file esempio.html scritto con notepad++)
Come vedi, scrivendo su blocco note il testo è tutto marcato allo stesso modo, mentre usando un programma più evoluto come notepad++ vengono colorate in modo diverso le varie parti del file html.
Tu non devi (e non puoi) modificare il testo in grassetto o cambiare i colori, perché i file i testo contengono solo i caratteri che compongono le scritte, a inserire le colorazioni ai vari elementi e i grassetti, ci pensa il programma di scrittura. Notepad++ interpreta il contenuto del tuo file di testo ed evidenzia le varie parti per renderle più leggibili.
Se scrivi queste poche righe in un editor di testo (come ad esempio blocco note, notepad++, brackets, visual studio code) e poi salvi il file con nome esempio.html, quando aprirai il file con il tuo browser vedrai qualcosa del genere:
A volte i programmi di scrittura aggiungono una estensione .txt ai file, fai attenzione che il file termini con estensione .html
In pratica possiamo vedere la struttura di un file HTML anche in questo altro modo:
Ora ti spiego come vengono interpretati i tag HTML dal browser.
Tag <head>
Il tag html invisibile agli utenti ma utilissimo al browser
Il tag head (in inglese significa "testa"), potremmo chiamarlo "intestazione", ha una importanza enorme e serve a spiegare al browser come deve interpretare la pagina HTML.
Ti faccio un breve un elenco di alcune cose che puoi trovare all'interno del tag <head>:
- <title> : il tag che assegna un titolo alla pagina web e che puoi visualizzare sulla barra in alto (come vedi dalla figura poco sopra);
- <meta> : istruzioni specifiche per il browser e dunque per il dispositivo che deve mostrare la pagina web all'utente, ma anche per i crawler dei motori di ricerca (importantissimo ai fini della SEO);
- <link> : collegamento a file esterni come ad esempio la favicon, i font per la scrittura e i fogli di stile CSS che definiscono l'aspetto estetico della pagina web (che vedremo in seguito in questa rubrica sulla SEO);
- <style> : indicazioni sullo stile CSS della pagina direttamente nel file HTML piuttosto che in un file esterno;
- <script> e <noscript> : programmi da eseguire all'interno della pagina web, tipicamente scritti in linguaggio Javascript, utili per automatizzare e rendere più interattiva la pagina web.
Nel corso di questa rubrica sulla SEO entreremo nel dettaglio di ogni singolo tag HTML, nell'ottica di comprendere la loro importanza ai fini del raggiungimento della prima posizione sui motori di ricerca!
Hai capito che il tag <head> non viene direttamente mostrato all'utente finale, bensì serve a dare istruzioni al browser. Come avrai dunque immaginato, tutto quello che devi mostrare all'utente della pagina web deve essere messo dentro al tag <body>.
Tag <body>
Tutto quello che vuoi mostrare all'utente va messo nel corpo
Il <body> (in inglese significa proprio "corpo") rappresenta il corpo della pagina web, ovvero il contenuto, tutto ciò che si deve vedere.
Salvo diverse indicazioni (e vedremo in seguito come si fa con i fogli di stile CSS) tutto quello che scrivi dentro al tag <body> viene mostrato nella pagina web a partire dall'angolo in alto a sinistra, procedendo verso destra e andando a capo ogni volta che si raggiunge l'estrema destra dell'interfaccia.
Se un blocco è più largo dell'area visibile, la parte in eccesso scompare dalla vista.
Anche all'interno del tag <body> continua a funzionare il concetto della bambolina a matrioska, nel senso che all'interno di ogni elemento è possibile "annidare" altri elementi.
Ogni volta che un elemento racchiude in sè altri elementi, questi si posizionano al suo interno con la stessa logica che abbiamo spiegato per il tag <body>: dall'angolo in alto a sinistra di quel blocco, verso destra fino al margine del blocco e poi a capo, salvo diverse indicazioni descritte nei fogli di stile CSS.
In origine era possibile specificare alcuni attributi degli elementi costituenti del corpo della pagina, direttamente nel codice html, come ad esempio la larghezza (width) l'altezza (height) l'allineamento del testo (align).
Esempio: <p witdh="100" height="50" align="center">...</p>
A dire il vero è possibile farlo ancora oggi con lo standard HTML5, ma è fortemente sconsigliato questo approccio, favorendo l'uso dei fogli di stile in file style.css separati dall'html e adesso ti spiego perché.
Oggi più che mai, le pagine web possono essere aperte da un computer con schermo 26" wide screen 16:9 ma anche da un telefonino (smartphone) con schermo verticale da 5" in 9:16!
Se noi inserissimo le misure dei blocchi all'interno del HTML, non sarebbe possibile avere una differenziazione tra i vari dispositivi. Quando una pagina HTML modifica il suo aspetto in modo da adattarsi alle misure e alle proporzioni dello schermo, si dice che quel sito è "responsive".
Nel corso di questa guida HTML con l'occhio rivolto alla SEO, ti spiegherò come creare una ottima pagina web responsive, in modo che i motori di ricerca possano amarla e metterla in prima posizione.
In secondo luogo, tieni presente che le pagine di un sito web sono quasi tutte uguali dal punto di vista estetico, hanno elementi comuni di impaginazione, di schema colori, dimensioni dei caratteri etc, dunque è probabile che le stesse indicazioni vadano bene su tutte le pagine del tuo sito web (o quasi).
Usando un file style.css esterno, quelle indicazioni verranno caricate sul dispositivo una sola volta, risparmiando tempo e risorse. Invece se scrivi le indicazioni per lo stile CSS in ogni pagina HTML usando il tag <style>, ripeterai sempre informazioni inutili che appesantiranno il tuo sito e lo allontaneranno dalla prima pagina nei motori di ricerca.
Scrivere le indicazioni sullo stile direttamente dentro il file html ti impone anche di riportare le eventuali modifiche su tutti i files del tuo sito web, quando devi cambiare qualcosa! Un vero lavoraccio per il webmaster!
I tag che trovi nel <body>
I principali tag che puoi trovare all'interno della sezione body sono:
- <header> : la parte alta detta anche intestazione della pagina;
- <nav> : il menu di navigazione;
- <main> : la sezione principale del corpo, dove ci sono i contenuti principali della pagina;
- <section> : indica una sezione ben precisa della parte principale della pagina web;
- <article> : indica che si tratta di un articolo di Blog;
- <aside> : barra laterale, tipicamente usata per widget e elementi decorativi;
- <footer> : elemento finale a piè di pagina .
A dire il vero, i tag HTML appena menzionati sono stati introdotti con le specifiche HTML5 e non sempre vengono usati nelle pagine web, ma siccome ai motori di ricerca piace particolarmente quando essi sono presenti, ti suggerisco di imparare a inserirli nel tuo HTML.
Segui questa rubrica settimanale e ti spiegherò la loro importanza uno ad uno.
Conclusioni
Hai capito che nelle tue pagine web devi inserire prima le indicazioni per il browser nel tag <head> e poi descrivere il contenuto nel tag <body>. Stai iniziando a padroneggiare il linguaggio HTML, in modo da portare i tuoi siti web in prima pagina su Google.
Ti do appuntamento alla prossima settimana, nel frattempo metti un like se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google.
Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.
Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.