Apici e pedici in HTML con sup e sub

di Michele Costanzo Commenta

Apici Pedici HTML
A volte in un documento HTML può essere necessario utilizzare apici e pedici per scrivere ad esempio una espressione matematica o una formula chimica. Una possibile soluzione a questa esigenza è il ricorso ai tag <sup> (apice) e <sub> (pedice) applicati all’elemento del testo da trattare.

sup, apici in HTML

Supponiamo di voler scrivere in HTML l’equazione canonica di una circonferenza generica. All’interno dell’equazione saranno presenti due termini quadratici che potremo rendere graficamente come apici includendo l’esponente all’interno del tag <sup> e del corrispondente tag di chiusura </sup>. L’intera espressione verrà invece inclusa tra i tag <p> e </p> anche se più in generale si potrebbe utilizzare un qualsiasi elemento di HTML che definisca un blocco di testo.

Il semplice codice HTML del nostro esempio avrà quindi una forma di questo tipo:

<p>x<sup>2</sup>+y<sup>2</sup>+ax+bx+c=o</p>

Questo codice produce nel browser il risultato visibile nell’immagine che accompagna questa guida: i quadrati presenti nell’equazione sono resi attraverso simili a quelli utilizzati nel blocco <p> e sollevati rispetto alla riga (apici).

Il tag sub per i pedici

Il comportamento del tag <sub> è molto simile a quanto descritto per gli apici ma si applica al pedice del testo. Può essere utile ad esempio per scrivere semplici formule chimiche o equazioni basate su indici. Se ad esempio volessimo scrivere in HTML la formula chimica dell’acqua dovremmo semplicemente includere il 2 relativo all’idrogeno tra il tag <sub> ed il relativo tag di chiusura </sub>. Avremo quindi un codice di questo tipo:

<p>H<sub>2</sub>O</p>

Anche in questo caso il risultato del codice nel browser è visibile nell’immagine. Il pedice presente nella formula è reso tramite un carattere abbassato rispetto allo sviluppo della riga.