La definizione più classica di linguaggio di markup è la seguente: “I linguaggi di markup sono un insieme di regole, tag o nomi usati per strutturare contenuto testuale”.
Nel caso specifico dell’HTML, il markup viene utilizzato per definire la struttura di una pagina web e, grazie ai browser che utilizziamo quotidianamente, ne vediamo il risultato finale.
Una pagina HTML è formata da una struttura di base che viene poi arricchita con dei tag e con il contenuto stesso della pagina.
All’interno del <body>, come possiamo vedere dall’immagine precedente, possiamo inserire tutti i tag necessari e i contenuti della nostra pagina web.
Alcuni esempi di tag sono:
<div> Usato per definire una sezione della pagina; ha lo scopo di essere un contenitore per altri tag
<p> Usato per definire un paragrafo testuale all’interno della pagina
<a> Usato per definire un hyperlink, ovvero un collegamento verso un’altra pagina interna o esterna al nostro sito web
<img> Usato per inserire un’immagine in una pagina web
Questi tag, combinati insieme, creano una vera e propria pagina web, come possiamo vedere in questa immagine:
Nell’ormai lontano 2014 è stata introdotta la versione di HTML5 insieme al concetto di tag semantici o nell’insieme, HTML semantico (Semantic HTML).
I tag semantici, oltre che a definire la struttura della pagina ne definiscono anche il tipo di contenuto.
Alcuni esempi sono <head> <main> <footer> <aside>
Questi tag hanno lo stesso ruolo che ha il tag <div> ma con l’aggiunta di avere un nome autoesplicativo della sezione che rappresentano.
Ecco che quindi il markup della pagina dell’esempio precedente può essere riscritto in questo modo:
Un primo beneficio dell'utilizzo dei tag semantici è sicuramente che è molto più semplice leggere il codice HTML di una pagina web e capirne la struttura immediatamente.
Questo vale sia per noi umani ma anche, e soprattutto, per i crawler dei motori di ricerca.
L’HTML semantico ha infatti un ruolo fondamentale nel SEO perché permette ai crawler di poter interpretare al meglio ogni singolo elemento della nostra pagina web capendo, di conseguenza, il contenuto e potendo indicizzare in modo ancora più preciso le nostre pagine web.
Una pagina web che utilizza una struttura HTML semantica ha un vantaggio superiore rispetto ad una pagina che utilizza una struttura formata da tag non-semantici.
I tag HTML che definiscono il contenuto (quelli posizionati all’interno del tag <body>) possono essere divisi in due macro categorie:
- tag per definire la struttura
- tag per definire e gestire i contenuti testuali o multimediali (immagini e video)
Partendo dalla prima categoria ecco la lista dei principali con una breve spiegazione:
<header> Rappresenta il contenitore del contenuto introduttivo della pagina
<nav> Definisce un set o un elenco di link di navigazione (hyperlink)
<main> Definisce il contenuto principale della pagina
<aside> Definisce il contenuto laterale rispetto al contenuto principale
<section> Definisce una sezione generica all’interno della pagina
<article> Definisce una sezione di informazioni indipendenti all’interno della pagina
<figure> Definisce una sezione una sezione che contiene solitamente un’immagine o un’illustrazione solitamente con anche una didascalia
<footer> Definisce la sezione finale (appunto footer) della pagina web
Per quanto riguarda invece la gestione dei contenuti testuali o multimediali alcuni esempi possono essere:
<address> Contiene delle informazioni di contatto tra cui: indirizzo email, telefono, indirizzo fisico etc..
<video> Utilizzato per aggiungere un contenuto video all’interno della pagina
<figcaption> Utilizzato per aggiungere una didascalia ad un’immagine (viene utilizzato all’interno del tag <figure>)
<time> Utilizzato per descrivere un periodo di tempo preciso
Ovviamente é molto importante utilizzare questi tag nel modo giusto e nel posto corretto altrimenti potremmo “confondere” i crawler che analizzano e indicizzano il nostro sito web ottenendo il risultato opposto.
Ora dovresti avere una conoscenza di base della struttura di una pagina HTML.
Quello che ti consiglio di fare, è di provare a leggere il codice HTML dei siti che visiti frequentemente (tutti i browser hanno l’opzione “ispeziona elemento” o visualizza codice sorgente pagina per visionare l’HTML) e provare a capirne la struttura.
Man mano che vedrai diverse pagine HTML riuscirai a capire anche quali sono quelle meglio strutturate e quali invece hanno delle migliorie che andrebbero fatte.
Nel prossimo articolo con focus DEV andremo, invece, a vedere e ad analizzare i meta tags, ovvero quei tag presenti nella sezione <head></head> che non vengono mostrati direttamente, ma che vengono utilizzati per finalitá SEO e dai crawler per ottenere delle importanti informazioni tecniche e non sul nostro sito web.
Author :Francesco Guidi
Sono uno sviluppatore web da molteplici anni.
Ho lavorato sia in Italia che all'estero in agenzie web e aziende di prodotto e ciò mi ha permesso di sviluppare una forte conoscenza sia nello sviluppo di siti web ed e-commerce con particolare focus sul SEO che di Single Page Application.