Il termine marcatura appartiene al mondo della tipografia, nel quale si contrassegnavano con delle annotazioni delle parti di testo che necessitavano di un'evidenziazione o di una correzione^[1][2].

In ambito informatico un linguaggio di marcatura (markup language in inglese) si riferisce a un metodo di scrittura di un documento che prevede l'utilizzo di simboli predefiniti per descriverne la struttura, l'impaginazione e la formattazione. Oltre al Markdown, appartengono a questa famiglia di linguaggi HTML, XML e L_AT_EX, ma anche SVG, in quanto declinazione di XML.

Si dividono principalmente in due tipologie:

• linguaggi di marcatura di tipo descrittivo
• linguaggi di marcatura di tipo procedurale

Linguaggi di tipo procedurale

Appartengono a questa categoria i linguaggi in cui si adoperano dei codici attraverso i quali è possibile definire il modo in cui del testo semplice^[3] viene rappresentato.

Ad esempio in MathJax, una libreria JavaScript usata per visualizzare su browser la notazione matematica di *L_AT_EX, il seguente testo

$\begin{align}
&\text{Questo testo è in \textbf{grassetto}, e questo è in \textit{corsivo}.}\\ 
&\text{Questa è la radice quadrata di x alla seconda più 1: }\\
&\sqrt{x^2+1}
\end{align}$

Viene rappresentato in questo modo:

In questo caso i tag danno un indicazione precisa dello stile da applicare al testo, e di eventuali caratteri da aggiungere (come il simbolo della radice quadrata).

Linguaggi di tipo descrittivo

Servono per descrivere semanticamente sezioni di testo semplice, e il loro significato all'interno del documento. A differenza dei linguaggi appartenenti alla categoria precedente, la rappresentazione dipende dal software adoperato per interpretarne il contenuto, e non è direttamente specificata nel testo.

XML è un esempio di linguaggio appartenente a questa categoria. In questo caso il seguente testo

<lista-articoli>
	<articolo>
		<titolo>Primo articolo</titolo>
		<descrizione>Questo è il primo articolo</descrizione>
	</articolo>
	<articolo>
		<titolo>Secondo articolo</titolo>
		<descrizione>Questo è il secondo articolo</descrizione>
	</articolo>
</lista-articoli>

Viene rappresentato in questo modo (da un browser):

In sostanza, non viene applicato nessuno stile al testo, così come nessuna formattazione.

Linguaggi ibridi

Anche se non ho trovato alcuna definizione ufficiale, ritengo sia opportuno classificare come ibridi alcuni liguaggi quali HTML o Markdown. Il motivo è che, sebbene siano concettualmente linguaggi descrittivi, il loro uso pratico ci porta spesso a utilizzarli per descrivere lo stile del contenuto che scriviamo. In particolare HTML si è evoluto nel tempo per diventare quello che potremmo chiamare un linguaggio descrittivo puro, sebbene il retaggio di un internet passato gli abbia fatto mantenere molteplici caratteristiche di un linguaggio procedurale, per mantenere la compatibilità con tutti i browser^[4].

Facciamo un esempio in HTML:

<main>
  <h1>Ultimi articoli</h1>
  <article>
    <h2>Titolo del primo articolo</h2>
    <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing <em>elit</em>. </p>
  </article>
  <article>
    <h2>Titolo del secondo articolo</h2>
    <p>Lorem ipsum dolor sit amet, <b>grassetto</b> adipiscing <i>corsivo</i>. </p>
  </article>
</main>

Questo codice verrà con tutta probabilità visualizzato allo stesso modo, con poche differenze, da tutti i browser:

Possiamo ora discutere di diversi aspetti legati a quanto scritto.

Semantica e stile

I tag <main>, <article>, <strong> e <em> sono puramente semantici. Indicano che ciò che è contenuto al loro interno è rispettivamente:

• il contenuto principale della pagina
• un contenuto autonomo nella pagina, e in quanto tale potenzialmente riutilizzabile in altre pagine del sito
• un testo fortemente enfatizzato rispetto al resto del contenuto
• un testo enfatizzato rispetto al resto del contenuto

I tag <h1>, <h2>, e <p> sono semantici, ma storicamente utilizzati per descrivere uno stile specifico del testo. In particolare:

• <h1> rappresenta la dimensione più grande di un'intestazione, su una scala da 1 a 6
• <h2> rappresenta la seconda dimensione più grande di un'intestazione, su una scala da 1 a 6
• <p> rappresenta un paragrafo

Infine, i tag <b> e <i> sono puramente stilistici e pertanto sconsigliati nella scrittura di un HTML moderno:

• <b> sta per bold, e indica un testo che deve essere rappresentato con il grassetto
• <i> sta per italic, e indica un testo che deve essere rappresentato con il corsivo

Di fatto, ognuno di questi tag avrà una rappresentazione stilistica precisa una volta interpretato da un browser, e data ormai la tendenza a mantenere una certa coerenza nella visualizzazione dei siti web, possiamo essere abbastanza sicuri che lo stile applicato sia simile, se non pressoché identico, ovunque.

È per questo che vedremo spesso i tag <p> utilizzati per applicare dei margini verticali a un blocco di testo, i tag <h1> e <h2> per cambiare la dimensione del testo e i tag <b> e <i> per enfatizzarlo. In particolare <strong> viene solitamente rappresentato esattamente come un <b>, e <em> esattamente come un <i>.

Accessibilità e SEO

Utilizzare i tag semantici non è utile solo per scorporare il contenuto dalla forma, il cosa da come, dandoci la possibilità di variare l'estetica del documento senza doverne modificare il contenuto, ma porta anche importanti benefici in tema di accessibilità^[5].

Utilizzare il tag <nav>, per esempio, consentirà ai sistemi di navigazione assistita di capire quale blocco contenuto in una pagina web rappresenta il menù principale, e quindi di spostarsi agevolmente tra tutte le sue voci.

I tag <main> e <article> indicheranno agli screen reader qual è il contenuto principale della pagina, e quindi quello che andrà letto con più priorità.

Mentre i tag <strong> e <em> evidenzieranno quali parole avranno bisogno di più enfasi, laddove <b> e <i> indicano solamente quali parole visualizzare in grassetto o in corsivo. Quest'ultima è solo una differenza concettuale, ed è possibile che anche in questo caso gli screen reader si comportino in modo analogo in entrambi i casi.

In ottica SEO (Search Engine Optimization, una serie di attività atte a rendere più facilmente indicizzabile dai motori di ricerca un sito web), il tag <h1> migliora il posizionamento^[6] di determinate pagine e ne favorisce la categorizzazione e la ricercabilità. L'utilizzo errato dei tag, ad esempio inserendo due tag <h1> nella stessa pagina, al contrario avrà un effetto negativo.