I 5 codici HTML che devi conoscere
Alcuni tag tra i più utilizzati li abbiamo già visti nel corso di questo articolo: <p>, per esempio, che serve a indicare il paragrafo, <h1> per il titolo principale, o <a> per i collegamenti ipertestuali. I tag HTML però sono molti di più, circa un centinaio, e alcuni sono molto utili da conoscere per velocizzare e ottimizzare il lavoro. Scopriamo quindi quali sono i 5 codici HTML più versatili da conoscere, perfetti per chi lavora con i contenuti digitali e intende ottenere risultati soddisfacenti.
Stringa codice colori HTML
Una delle cose che puoi fare con il codice HTML è personalizzare il colore di testi, sfondi e altri elementi di una pagina web, occupandoti del suo aspetto estetico. In questo linguaggio di markup, i colori si indicano utilizzando una stringa di codice esadecimale –hex–, un nome colore standard oppure un valore RGB/RGBA.
La forma più comune, ad ogni modo, è quella esadecimale. In questo caso scriviamo una stringa che inizia con il simbolo # ed è seguita da sei cifre o lettere che indicano l’intensità di rosso, verde e blu (RGB). #FF0000 è la stringa da usare per indicare un rosso pieno, mentre #000000 è il nero e #FFFFFF è il bianco.
Come dicevamo, puoi anche usare i nomi di colore standard –come red, blue e orange– ma è chiaro che con i codici esadecimali hai la possibilità di accedere a una gamma molto più ampia e completa di sfumature.
Codice HTML per andare a capo
Il codice HTML ti permette anche di andare a capo all’interno di un testo. Questo può essere estremamente utile nel caso in cui tu abbia bisogno di forzare un salto di linea, per esempio se vuoi separare due frasi o due parole in un paragrafo senza dover, però, iniziare un nuovo blocco di testo. È il caso, per dirne uno, della formattazione di una poesia, dove è importante mantenere l’andata a capo originale per rispettare la struttura dei versi: indicando il giusto tag al browser, gli permetti di mantenere questa formattazione anche se la pagina viene visualizzata su diversi dispositivi (e quindi in diversi formati).
Il tag da usare in questo caso è <br>, che sta per “break”. A differenza di tag come <p> e <a>, questo codice non ha bisogno di essere chiuso.
Codice HTML tabella: ecco qual è
Una pagina web può contenere anche delle tabelle. Se usi un CMS, è probabile che sia presente, nella barra degli strumenti, la funzione “crea una tabella” che te ne fornisce una in automatico, con il numero di righe e celle che desideri. Ma se così non fosse, è utile sapere che puoi creare una tabella anche con i codici HTML.
Per farlo, c’è il tag <table>, all’interno del quale si usano <tr> (table row) per le righe e <td> (table data) per le celle.
Vediamo un esempio di base per capire meglio:
<table>
<tr>
<th>Colonna 1</th>
<th>Colonna 2</th>
<th>Colonna 3</th>
<th>Colonna 4</th>
</tr>
<tr>
<td>Riga 1 – C1</td>
<td>Riga 1 – C2</td>
<td>Riga 1 – C3</td>
<td>Riga 1 – C4</td>
</tr>
<tr>
<td>Riga 2 – C1</td>
<td>Riga 2 – C2</td>
<td>Riga 2 – C3</td>
<td>Riga 2 – C4</td>
</tr>
<tr>
<td>Riga 3 – C1</td>
<td>Riga 3 – C2</td>
<td>Riga 3 – C3</td>
<td>Riga 3 – C4</td>
</tr>
<tr>
<td>Riga 4 – C1</td>
<td>Riga 4 – C2</td>
<td>Riga 4 – C3</td>
<td>Riga 4 – C4</td>
</tr>
</table>
Puoi notare che nella prima riga il tag che si usa è diverso – <th> (table header) – perché è lo spazio che indica le celle che contengono i titoli. Aspetto fondamentale per la SEO: serve al crawler a riconoscere la gerarchia dei contenuti anche all’interno di una tabella.
La tabella che si ottiene dall’esempio sarà strutturata in questo modo:
Codice spazio HTML
Per inserire uno spazio extra in HTML – quando il semplice tasto spazio non basta – si usa il codice speciale , che significa “non-breaking space” (spazio non separabile).
Ogni equivale a uno spazio e può essere ripetuto per creare maggiore distanza tra elementi o parole. Non si usa così spesso, ma è bene saperlo.
Codice HTML per inserire immagini
Infine, molto importante anche il codice HTML per inserire le immagini, dal momento che queste sono elementi fondamentali per arricchire le pagine web di valore sia agli occhi degli utenti sia per i motori di ricerca.
Per mostrare un’immagine si usa il tag <img>, che richiede almeno due attributi: src (source, ovvero la URL dell’immagine) e alt (una descrizione testuale, utile per l’accessibilità).
Un esempio semplice è:
<img src=”immagine.jpg” alt=”Descrizione immagine”>
Semplice, ma essenziale per integrare foto, illustrazioni, rendendo ogni contenuto più visivo e coinvolgente.
In tutto questo, i codici HTML sono le istruzioni che si danno per strutturare e formattare il contenuto: in una sola parola, i tag. Potremmo definire i tag come delle etichette, racchiuse tra parentesi angolari (< >), che servono a indicare al browser la tipologia del contenuto e la sua gerarchia. Per esempio, se vuoi aggiungere un paragrafo di testo, puoi usare il tag <p>, mentre per un titolo utilizzerai il tag 