Il linguaggio HTML include una serie di elementi. Questi includono comunemente usati componenti del sito web come paragrafi, titoli, collegamenti e immagini. Ci sono anche una serie di elementi più recenti che sono stati introdotti con HTML5, inclusi l'intestazione, la navigazione, il piè di pagina e altro. Tutti questi elementi HTML vengono utilizzati per creare la struttura di un documento e dargli significato. Per aggiungere ancora più significato agli elementi, puoi dare loro degli attributi.
Un tag di apertura HTML di base inizia con il carattere <. questo seguito dal nome del tag e infine completi il con carattere>. Ad esempio, il tag del paragrafo di apertura dovrebbe essere scritto in questo modo:
Per aggiungere un attributo al tuo tag HTML, inserisci prima uno spazio dopo il nome del tag (in questo caso è la "p"). Quindi aggiungeresti il nome dell'attributo che desideri utilizzare seguito da un segno di uguale. Infine, il valore dell'attributo verrà inserito tra virgolette. Per esempio:
I tag possono avere più attributi. Separeresti ogni attributo dagli altri con uno spazio.
Elementi con attributi richiesti
Alcuni elementi HTML richiedono effettivamente attributi se vuoi che funzionino come previsto. L'elemento image e l'elemento link ne sono due esempi.
Il elemento immagine richiede l'attributo "src". Quell'attributo dice al browser quale immagine vuoi usare in quella posizione. Il valore dell'attributo sarebbe un percorso di file per l'immagine. Per esempio:
Noterai che abbiamo aggiunto un altro attributo a questo elemento, l'attributo "alt" o testo alternativo. Questo non è tecnicamente un attributo obbligatorio per le immagini, ma è una buona pratica includere sempre questo contenuto per l'accessibilità. Il testo elencato nel valore dell'attributo alt è ciò che verrà visualizzato se an l'immagine non si carica per qualche ragione.
Un altro elemento che richiede attributi specifici è il tag anchor o link. Questo elemento deve includere l'attributo "href", che sta per "riferimento ipertestuale". questo collegamento dovrebbe andare." Proprio come l'elemento immagine deve sapere quale immagine caricare, il tag del collegamento deve sapere dove dovrebbe essere per. Ecco come può apparire un tag di collegamento:
Quel collegamento ora porterebbe una persona al sito Web specificato nel valore di un attributo. In questo caso, è la pagina principale di Dotdash.
Attributi come hook CSS
Un altro uso degli attributi è quando vengono usati come "ganci" per Stili CSS. Perché gli standard web impongono che dovresti mantenere la struttura della tua pagina (HTML) separata dai suoi stili (CSS), usi questi hook di attributi nel CSS per dettare come la pagina strutturata verrà visualizzata nel web browser. Ad esempio, potresti avere questo pezzo di markup nel tuo documento HTML.
Se vuoi che quella divisione abbia un colore di sfondo nero (#000) e una dimensione del carattere di 1.5em, dovresti aggiungere questo al tuo CSS:
.featured { background-color: #000; dimensione del carattere: 1,5 em;}
L'attributo class "in primo piano" agisce come un hook che usiamo nel CSS per applicare gli stili a quell'area. Se lo desideriamo, potremmo anche utilizzare un attributo ID qui. Sia le classi che gli ID sono attributi universali, il che significa che possono essere aggiunti a qualsiasi elemento. Possono anche essere presi di mira con stili CSS specifici per determinare l'aspetto visivo di quell'elemento.
A proposito di Javascript
Infine, l'uso degli attributi su determinati elementi HTML è anche qualcosa che puoi usare in Javascript. Se hai uno script che sta cercando un elemento con un attributo ID specifico, questo è un altro uso di questa parte comune del linguaggio HTML.