Gli attributi sono utilizzati per personalizzare le etichette. Questo non significa altro che, se si volesse un giorno modificare le dimensioni di un'immagine, il colore di un testo o di una tabella, è possibile farlo attraverso la modifica dei suoi attributi.
La maggior parte delle etichette hanno i proprio attributi. Nelle nuove tag che conosceremo più avanti impareremo a impostare degli attributi generici che possono essere utilizzati con la maggior parte delle etichette.
Gli attributi sono collocati all'interno dell'etichetta di apertura.
Questi due attributi sono molto simili. Non influenzano direttamente la formattazione degli elementi ma sono molto utili con l'aiuto del linguaggio CSS. proprio per questo motivo andremo a parlarne in maniera più dettagliata quando affronteremo la sintassi e l'utilizzo del codice CSS.
L'idea è che quando si vuole impostare una classe di etichette che verranno poi utilizzate in seguito con l'aiuto del CSS, si può fare la differenza tra due tag identici ma con attributi diversi.
The idea is that when you want to set a class of tags for being used later with the help of CSS, you can make the difference between two identical tags but with different attributes. Dai un'occhiata al prossimo esempio:
html<p id="italicparagraph">Paragrafo 1, italic </p>
<p id="boldparagraph">Paragraph 2, bold </p>L'attributo "name" è un po' diverso da quelli visti in precedenza. L'elemento con l'attributo "name" diventa infatti una variabile utilizzabile attraverso JavaScript, ASP e PHP. Questo attributo lo si incontra molto spesso nelle formulazioni e in altri campi di testo interattivi.
html<input type="text" name="TextField" />Questo attributo non ha alcun effetto sulla visualizzazione della casella di testo, anche se sullo sfondo gioca un ruolo molto importante.
Questo attributo è utilizzato raramente. Esso aggiunge un titolo (pop-up) ad ogni elemento del contenuto. Questo attributo non va dimenticato. Attraverso esso infatti è possibile dire quasi tutto quello che si vuole. La visualizzazione appare quando ci si ferma con il mouse per qualche secondo sopra il contenuto.
html<h2 title="Sono l'attributo del titolo!!">Titolo</h2>Passando con il mouse sopra al titolo potrai così vedere il suo attributo. Anche se poco utilizzato questo attributo è quindi molto importante in determinate situazioni
Con l'attributo "align" è possibile allineare un determinato elemento in una determinata posizione. E' possibile allineare a sinistra a destra e al centro qualsiasi elemento. Nel caso non venga specificato nulla l'allineamento di default è a sinistra.
html<h2 align="center">Titolo centrato </h2>html<h2 align="left">Titolo allineato a sinistra </h2>
<h2 align="center">Titolo centrato </h2>
<h2 align="right">Titolo allineato a destra </h2>La maggior parte delle etichette hanno degli attributi standard che vengono assunti in caso di mancata specificazione dell'attributo. Ad esempio un paragrafo senza specificazione dell'attributo "align" verrà allineato a sinistra.
Gli attributi sono essenziali per il design degli elementi di una pagina web. In questa tabella puoi trovare i principali attributi utilizzati in HTML:
| Attribute | Options | Function |
| align | right, left, center | Allineamento orizzontale. |
| valign | top, middle, bottom | Allineamento verticale. |
| bgcolor | valore numerico, esadecimale o RGB | Uno sfondo dietro un elemento. |
| background | URL | Un'immagine dietro un elemento. |
| id | Definito dall'utente | Nomi un elemento che verrà utilizzato con i CSS. |
| class | Definito dall'utente | Classifica un elemento che verrà utilizzato con i CSS. |
| width | Valore numerico | Specifica la larghezza di una tabella, un'immagine o una tabella. |
| height | Valore numerico | Specifica l'altezza di una tabella. |
| title | Definito dall'utente | mostra un titolo per un elemento. |