Tag HTML: cosa sono e come funzionano

Per quanto l’uso di HTML non sia più, ormai da tempo, relegato ai soli addetti ai lavori, può capitare di doverne fare uso per i motivi più svariati: le piccole modifiche che ci capita di voler fare ai nostri siti, di fatto, si basano sull’uso dei cosiddetti tag HTML. Fermo restando che vanno chiamati tag HTML o, ancora più precisamente, markup HTML, e che chiamarlo codice HTML è una cavolata non corretta sia formalmente che praticamente (il codice esegue istruzioni, mentre HTML è un linguaggio puramente “presentativo” e “strutturale”), possiamo fare una piccola rassegna dei principali elementi che lo compongono per provare a capire meglio come usarli.

Piccolo avviso, prima di cominciare

Risparmia sulle bollette, senza burocrazia: scopri Switcho

Attenzione pero’: conoscere HTML non basta, da solo, per capire dove e quanto mettere le mani al proprio sito. Per farlo in WordPress, ad esempio, per introdurre personalizzazioni va usato il cosiddetto child, che permette di effettuare modifiche che non verranno sovrascritte al successivo aggiornamento. HTML compone una struttura complessa detta DOM, che è gerarchica ed in cui ogni elemento deve occupare un posto corretto, perchè altrimenti la compatibilità  con tutti ibrowser non sarà  garantita. HTML fa anche il pari con altri due elementi: CSS (che curano la grafica di HTML, diciamo) e JS (Che invece stabilisce che alcuni tag HTML possano essere alterati dopo la prima generazione statica, diciamo).

Con HTML non possiamo “programmare” un bel nulla, o decidere di far apparire ad esempio i prodotti più cliccati o inserire i rating con le stelline: quelle sono cose da fare via plugin, al limite, o via codice, ed è sempre meglio non arrangiarsi a farle a suon di copia incolla da siti altrui. Con HTML possiamo pero’ modificare contenuti e grafica del nostro sito, in misura limitata al fatto che capiamo bene che il compito di HTML è di fare da contenitore della grafica stessa, e se permette ad esempio di inserire un bold non permette di realizzare contenuti dinamici che richiedono, di fatto, PHP e MySQL.

Chiarito questo (e ci sarebbe anche altro da aggiungere, ma non mi dilungo per non disperdere l’argomento ed il focus dell’articolo, che resta comunque per principianti beninteso), e ora che vi ho terrorizzati amichevolmente quanto basta :-) passiamo a capire un po’ meglio con esempi pratici a cosa servono i vari “pezzi” che compongono le pagine web dei nostri siti.

Cos’è l’HTML?

Sul web la quantità  di stupidate semplicistiche su HTML è incredibile, quasi incalcolabile, ed avviene sia in italiano che in inglese da quello che ho visto. In genere queste fake news o cattiva informazione provengono da due fonti principali:

1. una quantità  di tutorial per newbie che, il più delle volte, semplificano cosଠtanto l’argomento da rendersi formalmente poco corretti; questo porta a farsi idee sbagliate sull’argomento e ad ignorare bellamente aspetti fondamentali sul DOM, ad esempio
2. una quantità  di guide “SEO” che da’ importanza ai singoli tag di heading, e che sostiene la old school della SEO per la quale i tag di enfatizzazione come <strong>, <em> e <h1> sono elementi da ottimizzare e “abbuffare” di parole chiave; ci sono addirittura ancora tool che calcolano la keyword density e insomma, this is not SEO e non mi stancherò mai di ripeterlo. In qeusto modo la confusione regna ancora più sovrana, purtroppo.

HTML è un acronimo che indica Hyper Text Markup Language, che significa: Linguaggio di Markup per Iper Testi. Un linguaggio di markup è un insieme di simboli detti tag che, di fatto, stabiliscono come debba essere strutturato il contenuto della pagina; è insomma non un linguaggio di programmazione, bensଠuno di presentazione o di progettazione, se preferite. Un iper testo è un testo elettronico con dei link al suo interno per “navigare” su altre sezioni o pagine, oppure stando alla definizione classica di Tim Berners Lee

è un modo per collegare e accedere a informazioni di vario genere come una rete di nodi in cui l’utente può navigare a piacimento. Potenzialmente, l’ipertesto fornisce una singola interfaccia utente a molte grandi classi di informazioni memorizzate, come report, note, database, documentazione del computer e sistemi di aiuto in linea. […+ Un programma che fornisce l’accesso al mondo ipertestuale è detto browser. – T. Berners-Lee, R. Cailliau, 12 novembre 1990, CERN

I tag HTML sono una sorta di linguaggio universale che permette di realizzare una cosa straordinaria, ovvero riuscire a connettere computer e smartphone diversi tra loro (Windows, Mac, Linux, Android, iOS, ecc.) quale che sia il browser di cui fanno uso (Chrome, Edge, Opera, Firefox, …), proprio perchè lo standard è stato progettato (saggiamente) a prescindere dalle tecnologie sottostanti, oltre che in onore alla separazione imposta dal modello ISO/OSI.

Tipi di tag HTML

Tanto per non rimanere sull’astratto, tutti i TAG che presentiamo in questo articolo si possono testare individualmente all’indirizzo web (molto utile, che vi consiglio di salvare nei bookmark):

https://www.w3schools.com/html/html_examples.asp

nel quale potrete vedere all’opera ogni singolo tag per capirlo meglio.

Considerate che, anzitutto, non tutti i contenuti di HTML hanno un equivalente visuale: se è vero che questo è un bold e questo è un sottolineato, non sempre tutti i tag sono visibili “ad occhio nudo”. Alcuni come i meta-tag, ad esempio, sono visibili solo (o quasi) ai motori di ricerca oppure ai social, ed assolvono funzionalità  molto specifiche e al di là , spesso, dell’aspetto meramente visivo.

Il markup HTML è costituito da un insieme di tag che rappresentano tante aree di pagine web, che possono essere ad esempio:

• semplice testo o paragrafo
• grassetto
• corsivo
• sottolineato
• collegamenti ipertestuali o link
• immagini e video
• liste
• tabelle
• contenitori generici

I tag sono in genere rappresentati da un nome e da un insieme di delimitatori, che sono tipicamente rappresentati dai segni < e > (minore e maggiore, per quanto alcuni li chiamino “parentesi angolate” giusto per capirci). Per elencare nello specifico i tag appena visti informalmente, abbiamo nell’ordine:

• <p>: tag paragrafo
• <b> oppure <strong>: grassetto
• <em> oppure <i>: corsivo
• <u>: sottolineato
• <a>: collegamenti ipertestuali o link
• <img>: immagini e video
• <ul>, <ol>, <li>: liste ed elementi di lista
• <table>: tabelle
• <div>: contenitori generici e senza una forma particolare

Bisogna pensare ad HTML come un testo piano contenente dei tag che poi il browser traduce o renderizza in output, a seconda dei casi, diversamente. Per esempio, se in una pagina HTML ho una cosa del genere

<strong>Questo testo</strong> era in grassetto, amici miei.

Il risultato sarà :

Questo testo era in grassetto, amici miei.

Tag come delimitatori

I tag quindi agiscono anche da deliminatori nel senso che, in questo caso, io ho voluto rendere bold solo una parte del testo, cioè quella delimitata da strong: strong che, per inciso, in apertura era reso come <strong> ed in chiusura come </strong>, giusto per disambiguare e non creare confusione nell’interpretazione del testo. Se i tag non vengono chiusi a dovere, posson mostrare stranezze in output: ogni tag delimitatore che si apre va, senza eccezioni, sempre chiuso.

Per determinare un tag di chiusura, quindi, si prende quello di apertura e si aggiunge uno slash nel tag nella posizione idonea, quindi se apro con:

<strong> oppure <em>

chiudo con

</strong> oppure </em>, rispettivamente.

Tag auto-conclusivi

Questo vale con un’unica eccezione, ovvero alcuni tag che sono in qualche modo auto-conclusivi: esempio classico, la linea che separa i paragrafi, che in HTML si scrive come:

<hr/>

e viene resa cosà¬:

Tag HTML innestati

I tag HTML si possono innestare tra di loro per ottenere gli effetti più svariati: questa flessibilità  è alla base del suo successo, ancor più per il fatto che i browser non sono sempre troppo rigidi nella sua definizione formale e renderizzazione. Anche i siti amatoriali o non professionali vengono letti dai browser, e questo vale anche se non sono propriamente validati lato W3C, ovvero se non sono scritti in modo formalmente impeccabile. Ci sono due versioni di HTML, ed ognuno usa un tag contenitore esterno che racchiude tutti i contenuti delle pagina differente: nella versione HTML 4, il tag base è generalmente:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

mentre in HTML 5 (più usato) avremo

<!DOCTYPE html>

Ora, un buon documento HTML deve avere quattro tag essenziali perchà© il contenuto sia distribuito correttamente. Questi sono:

Contenitore esterno: <HTML>

<html> Tutto quello che è dentro i tag HTML formerà  il contenuto della pagina web stessa </html>.

Intestazione o <head>

Come rappresentato nella simpatica immagine di copertina, una pagina HTML è formata da testa e corpo (Head e Body): la parte head contiene soprattutto meta-tag, ovvero tag non visibili che sono pero’ molto utili per i motori di ricerca.

<head> è il tag usato per contenere l’intestazione della pagina web, per tutte le pagine di qualsiasi tipo. àˆ “nascosto” nella pagina nel senso che non si vede, e non possiamo vederlo in chiaro (anche perchè non ci serve vederlo, a primo achitto diciamo).

Title del documento

Il titolo del documento è generalmente quello che vediamo anche nei motori di ricerca, anche se questa corrispondenza non è proprio uno ad uno: non è detto insomma che una pagina web che abbia come <title> “Pippo” mostri esattamente “Pippo” su Google e Bing, perchè i motori sono in genere svincolati da logiche cosଠrestrittive e fanno, detta fuori dai denti, un po’ come gli pare lato presentativo.

<title> Questo è un title, amici! </title>

Il contenuto del tag <title> è anche quello che si vede sulla barra dei browser come Firefox quando aprite la pagina.

meta description del documento

Senza entrare nel merito di altri aspetti ed incasinarci con considerazioni troppo tecniche, un tag può avere anche degli attributi: un attributo è come una proprietà  specifica e dal valore distinguibile, che può essere valorizzata o assumere un valore specifico a seconda dei casi. Nel caso della meta description è il valore, e viene detto attributo content, intuitivamente. Un  elemento HTML molto utile per la SEO è per l’appunto la meta description, che a questo punto si presenta in tale veste:

<meta name="description" content="Questa è una meta description." />

Fate attenzione a livello pratico a non inserire mai direttamente doppi apici nella meta description, perchè c’è il rischio che vengano troncate dai motori: provate in alternativa ad usare singoli apici al loro posto oppure, ancora, non usarne affatto o usarle precedute da /, quindi ad esempio “Ecco i \”doppi apici \”nella meta description. Speriamo che Google veda tutto!“.

Corpo o body della pagina web

<body> è il tag innestato che contiene tutto il resto e che si trova nella gerarchia del DOM subito dopo <HTML>.

A questo punto possiamo vedere la struttura classica HTML di una pagina web, in formato HTML 5:

<!DOCTYPE html>
<head>
<title> Questo è un title, amici! </title>
<meta name="description" content="Questa è una meta description." />
</head>
<body>

bla bla blah...
</body>
</html>

Fate caso a come ogni tag si apra e si chiuda per poter funzionare, e formare cosଠuna well-formed HTML page (pagina web ben formata). La parte dentro <body> è in genere quella visibile al visitatore, a differenza della parte <head>.

Intestazioni di pagina e di paragrafo

Le intestazioni della pagina sono i tag di heading, e sono numerati dal più importante (che è anche il più “paffuto” nella pagina) al meno importante: secondo alcuni l’importanza degli heading si riflette anche a livello SEO, ma è una cosa talmente ripetuta negli anni che tende, di fatto, a far interpretare la SEO come spamdexing. Flessibilizzatevi da questo punto di vista: gli heading servono a strutturare titoli e sottoparagrafi prima di tutto in modo logico e concettuale, un po’ come abbiamo fatto in questa paginetta, se ci fate caso.

Esempi di heading:

<h1>Questo è un tag H1. Usalo nel tuo titolo, preferibilmente solo una volta per pagina.</h1>
<h2>Questo è un tag H2. Puoi farne uso nei sotto-titoli.</h2>
<h3>Questo è un tag H3. Eh bhe, qui puoi farne uso nelle sotto-sotto-sezioni.</h3>
<h4>Questo è un tag H4. Hai capito come funziona, sà¬? :-) </h4>
<h5>Questo è un tag H5.</h5>
<h6>Questo è un tag H6.</h6>.

Risultato visuale corrispondente:

Commenti HTML

Per inserire commenti utili agli sviluppatori e webmaster vari, potete inserire i commenti HTML all’interno dei delimitatori

<!-- -->

in sostanza tutto quello che metterete lଠdentro non si vedrà  nella pagina, ma si vedrà  come HTML.

<!--  salve, sono un commento HTML -->

Uso dei Paragrafi <p>

Qui è facile: un paragrafo è delimitato dal tag di apertura <p> e da quello di chiusura </p>.

Esempio:

<p>Il tuo paragrafo è cosà¬.</p>

Se non chiudete i paragrafi non muore nessuno, intendiamoci, ma può essere problematico in determinate circostanze quindi non siate superficiali, da questo punto di vista.

Inserire immagini <img>

Con il tag <img> potete chiaramente aggiungere immagini al corpo della vostra pagina, nello specifico sfruttando l’attributo detto src per indicare al browser dove si trova l’immagine e l’attributo alt per indicare a Google ed ai motori di ricerca cosa è l’immagine, una sua descrizione insomma.

Esempio:

<img src="https://trovalost.it/wp-content/uploads/2015/06/cropped-trovalost1.png" alt="logo del sito trovalost.it">

Mostrerà  questa immaginetta:

Link interni ed esterni <a href=”…”>

Del tag HTML <a> mostreremo solo l’uso base per questi di lunghezza dell’articolo: in genere qui lavorate sull’attributo href indicando l’indirizzo del link destinazione:

<a href="https://trovalost.it/tag-html/"> Link a questo tutorial </a>

Risultato:

Link a questo tutorial

Liste <ul> <li> <ol>

Tra i tag HTML abbiamo poi <ol> per le liste numerate automaticamente (senza bisogno di mettere i numeretti voi) e <ul> per le liste coi pallini classici.

Esempio di lista HTML:

<ul>
<li>Gennaro</li> 
<li>Michela</li>
<li>Maria</li>
<li>Giulia</li> 
<li>Teresa</li>
<li>Stella</li>
</ul>

Risultato visuale:

• Gennaro
• Michela
• Maria
• Giulia
• Teresa
• Stella

Stile CSS

Ci sono più modi di inserire lo stile CSS all’interno delle pagine: per interventi sbrigativi e con scarso budget, in genere, la cosa più sbrigativa è quella di infilare il CSS inline, quindi direttamente con l’attributo style dentro i vari elementi. Facile e sbrigativo, ma pote qualche problema di manutenibilità Â  e prolunga i tempi di gestione nel lungo periodo, oltre ad essere una pratica poco ortodosso quanto effettivamente molto utilizzata.

La classica porcata che si fa in questi casi, usando il codice inline, è questa

<p style="color:red; font-size:100px"> Buonasera, cugini bravi col computer! </p>

Risultato visuale ottenibile:

Buonasera, cugini bravi col computer!

👇 Da non perdere 👇

• 📈 Analizza Cellulari 📱
• 🔐 AI che dolor, Chat
• 🎯 Targetizza Database SQL 🗄
• 📊 Analizza Errori più comuni 📛
• 🚧 Costruisci Evergreen 📟
• 👩‍💻 Programma Gratis 🎉
• 💻 Configura Hosting a confronto 💑
• 🔒 Conosci Hosting reti e domini 💻
• 👩‍💻 Tapioca Informatica 🖥
• 💻 Iconizza Internet 💻
• 🔒 Gestisci Lavoro 🔧
• 💡 Mostra Marketing & SEO 🌪
• 🔑 Apprendi Meteo ⛅
• 🤯 Visiona Mondo Apple 🍎
• 🔍 Supervisiona Mondo Domini 🌐
• 🚀 Metti in cloud monitoraggio servizi online 📈
• 🔮 Anatomizza Nuove tecnologie 🖥
• 🔒 Antani PEC e firma digitale 📩
• 👀 Prematura Programmare 🖥
• 🎮 Lonfa Scrivere 🖋
• 🔒 Conosci Servizi di SMS 📶
• 👀 Guarda Sicurezza informatica e privacy digitale 🖥
• 🎮 Ricorda Siti web 🌎
• 🤖 Ottimizza Spiegoni 🎓
• 🧠 Neuralizza Svago 🎈
• 📡 Quantizza Usare Excel 🌀
• 🤖 Sovrascrivi Windows 😲
• 🎨 Personalizza Wireless 🚁
• 🔑 Decifra WordPress 🤵
• 💬 Il nostro canale Telegram: iscriviti
• 🟠 Come cancellarsi da VK (VKontakte)
• 🟠 Test Informatica generale – Simulazione test online
• 🔵 SEO: perchè qualsiasi “metodo” di article marketing fallirà , prima o poi