fatti trovare dai tuoi clienti
Corso SEO & HTML: #02 Struttura del file
I file HTML sono file di testo che al loro interno contengono sia i contenuti da visualizzare a schermo, sia le istruzioni per l'inserimento di elementi...
« Corso SEO & HTML: #01 Introduzione
- Come è fatto un file HTML?
- Cosa c'è scritto dentro un file HTML?
- Come si scrive un file HTML?
In questa rubrica sulla SEO dedicata alla scrittura di codice HTML ti spiego con parole semplici che cos'è l'HTML per farti capire come è fatto un sito internet 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!
HTML
Cosa vuol dire HTML
Guarda la pagina Wikipedia per approfondire su HTML
Partiamo dalla definizione di HTML: HyperText Markup Language
Tradotto letterariamente, HTML è un acronimo che significa Linguaggio basato su "marcatori" per definire un iper-testo.
In informatica un linguaggio è uno standard che viene usato da due interlocutori per capirsi. Nella fattispecie, l'HTML è un linguaggio usato da due macchine per trasmettere un iper-testo, o — come diremmo oggi — una pagina web.
Iper-testo
Differenza tra testo e ipertesto
Abbiamo detto che in origine, internet serviva per far comunicare tra loro dei computer in modalità testuale. Il web che conosciamo noi — ricco di immagini e video — è arrivato molto dopo!
Un ipertesto è un particolare formato di messaggio testuale che contiene al suo interno particolari informazioni che consentono di collegare i contenuti tra loro (🔗link).
Dunque, grazie all'ipertesto, possiamo "navigare" da un documento all'altro, cliccando con il nostro puntatore direttamente sulle parole che costituiscono le frasi.
Nacque così l'esigenza di creare un linguaggio per separare il testo da visualizzare (il contenuto delle pagine HTML) dalle informazioni destinate al browser, da tenere nascoste all'utente, che servono per informare il browser dove deve andare quando un utente clicca su determinate parole chiave.
Naturalmente solo alcune parole devono diventare link cliccabili. Quando invece tutto il testo presente in una pagina diviene cliccabile, si parla di web liquido ... ma questa è un'altra storia!
HTML5
Quante versioni esistono di HTML
Nel corso della storia sono state definite una marea di differenti versioni di linguaggio HTML! Oggi si è trovato un buon compromesso con l'adozione dello standard HTML5, ma non è detto che sia l'ultima versione che vedremo... (per maggiori informazioni visita il sito ufficiale del W3C: World Wide Web Consortium).
Per far capire al browser che riceve la pagina web, quale versione di standard HTML stiamo adottando, dobbiamo scrivere nella prima riga del file HTML una dicitura fatta esattamente in questo modo:
HTML5
<!DOCTYPE html>
La riga di codice indica al browser che la pagina web rispetta la sintassi del HTML5.
Questi sono altri due esempi:
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
Come puoi notare l'HTML5 presenta una notevole semplificazione rispetto al passato, oltre ad alleggerire il peso in byte del file, sebbene si parli di pochissimi caratteri.
L'HTML nella quarta versione aveva raggiunto un livello di rigore troppo spinto e un solo errore di sintassi — dovuto eventualmente a un errore di trasmissione — poteva compromettere la visualizzazione dell'intera pagina web.
Con la quinta versione di HTML (HTML5) si è fatto un passo indietro e si è ritornati ad ammettere piccoli errori di sintassi all'interno delle pagine web, con grande sollievo per tutti.
Parentesi acute e TAG HTML
I messaggi destinati al browser sono contenuti all'interno di minore e maggiore, a formare i cosiddetti TAG HTML
Abbiamo detto che l'ipertesto contiene sia informazioni per l'utente della pagina web, ma anche informazioni per il browser.
Ecco, le informazioni per il browser (che non compariranno tali e quali nella pagina web, ma verranno interpretate dal browser) sono racchiuse tra un minore (<) e un maggiore (>), proprio come abbiamo visto poc'anzi nella definizione della versione di HTML da inserire nel primo rigo del file HTML.
In gergo, ciò che scriviamo dentro le parentesi acute vengono chiamati TAG HTML, ti faccio un elenco dei principali TAG HTML:
- <html>
- <head>
- <body>
- <p>, <b>, <i>, <u>, <strong>, <em>
- <a>
- <ol> e <ul>
- <div>
- <table>
- ...
Solitamente il nome di un elemento, va scritto attaccato al simbolo minore (<) e in testo minuscolo, ma il motore che interpreta il file HTML è tollerante a scritte maiuscole o staccate!
Ogni TAG HTML ha un significato ben preciso che vedremo nel corso delle prossime settimane, ma quello che devi sapere è che i TAG HTML servono per definire gli elementi che costituiscono la pagina web e ogni TAG HTML deve avere un inizio e una fine.
L'inizio di un TAG HTML è definito come abbiamo visto qui, poco sopra, mentre la fine deve essere definita con lo stesso TAG, ma segnato con uno slash (/):
- <html> pagina web </html>
- <head> informazioni per il browser </head>
- <body> corpo della pagina web </body>
- <p> paragrafo </p>
- <strong> testo in grassetto </strong>
- <a> testo cliccabile con link a un'altra pagina web </a>
- ...
All'interno del TAG HTML ci possono essere degli attributi: informazioni destinate nuovamente al browser, che non vengono visualizzati "così come sono scritti" al visitatore della pagina web.
Gli attributi si scrivono sempre all'interno delle parentesi acute, separati da uno o più spazi, e solitamente hanno un simbolo di uguale (=) per conferire loro un valore.
Faccio un esempio, il classico attributo è l'URL a cui deve "navigare" il browser in seguito al click su un 🔗link:
<a href="/prossima-pagina-web.html" target="_blank">Clicca qui per vedere la prossima pagina</a>
Nell'esempio sono stati inseriti due attributi:
- href : che indica al browser dove andare quando si clicca sulla scritta "Clicca qui per vedere la prossima pagina"
- target : che indica al browser di aprire il link in un'altra scheda, mantenendo aperta la pagina web nella scheda corrente
Scopri l'elenco completo di TAG HTML e relativi attributi sul sito ufficiale www.w3schools.com.
TAG HTML vuoti
Esistono dei TAG HTML che non hanno bisogno di racchiudere alcun contenuto, ma hanno solamente delle direttive per il browser.
Tipicamente questi sono i TAG <meta>, <link> o altri che troviamo nella intestazione della pagina HTML, oppure i <br> o <hr> che si usano nel corpo della pagina per inserire una interruzione di linea.
HTML5 è molto tollerante e il browser non si arrabbia se lasciamo un TAG aperto (senza il TAG di chiusura </...>), ma è buona norma chiudere sempre i TAG per rendere più veloce l'interpretazione della pagina web da parte del browser.
Esiste una forma contratta per indicare che il TAG HTML non contiene nulla e che si tratta di un TAG vuoto! cioè si mette lo slash (/) subito prima del segno maggiore (>), ti faccio alcuni esempi:
- <meta charset="UTF-8" />
- <link rel="stylesheet" href="/lib/w3schools27.css" />
- <br />, <hr />
- ...
Conclusioni
Hai capito cosa si intende per HTML e ti ho dato i primi elementi di sintassi per iniziare 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.