Un principio importante del movimento degli standard Web che è responsabile per l'industria che abbiamo oggi è l'idea di utilizzare elementi HTML per quello che sono piuttosto che come potrebbero apparire nel browser per impostazione predefinita. Questo è noto come usando il codice HTML semantico.
Cos'è l'HTML semantico
L'HTML semantico o il markup semantico è HTML che introduce un significato alla pagina web piuttosto che una semplice presentazione. Ad esempio, a
tag indica che il testo racchiuso è un paragrafo.
Questo è sia semantico che di presentazione, perché le persone sanno quali sono i paragrafi e i browser sanno come visualizzarli.
Il rovescio della medaglia di questa equazione, tag come e non sono semantici, perché definiscono solo il modo in cui il testo deve apparire (grassetto o corsivo) e non forniscono alcun significato aggiuntivo al markup. Esempi di tag HTML semantici includono i tag di intestazione Il vantaggio di scrivere HTML semantico deriva da quello che dovrebbe essere l'obiettivo principale di qualsiasi pagina web: il desiderio di comunicare. Aggiungendo tag semantici al tuo documento, fornisci ulteriori informazioni su quel documento, che aiuta nella comunicazione. Nello specifico, i tag semantici chiariscono al browser qual è il significato di una pagina e il suo contenuto. Questa chiarezza viene comunicata anche ai motori di ricerca, assicurando che le pagine giuste vengano consegnate per le domande giuste. I tag HTML semantici forniscono informazioni sul contenuto di quei tag che va oltre il loro aspetto su una pagina. Testo che è racchiuso nel Invece di provare a rendere quel codice, il browser capisce che stai usando quel testo come esempio del codice per gli scopi di un articolo o di un tutorial online di qualche tipo. L'uso dei tag semantici ti offre molti altri aggettivi per lo styling dei tuoi contenuti. Forse oggi preferisci che i tuoi esempi di codice vengano visualizzati nello stile predefinito del browser, ma domani, vuoi chiamarli con un colore di sfondo grigio, e in seguito vuoi definire la famiglia di font o lo stack di font mono-spaziati da usare per i tuoi campioni Puoi facilmente fare tutte queste cose usando il markup semantico e i CSS applicati in modo intelligente. Quando si desidera utilizzare i tag semantici per trasmettere significato piuttosto che per scopi di presentazione, è necessario fare attenzione a non utilizzarli in modo errato semplicemente per le loro proprietà di visualizzazione comuni. Alcuni dei tag semantici usati più comunemente includono: Usando i tag HTML che hanno un significato, si creano pagine che impartiscono più informazioni che semplicemente circondando tutto con Mentre quasi tutti i tag HTML4 e tutti i tag HTML5 hanno un significato semantico, alcuni tag sono principalmente di natura semantica. Ad esempio, HTML5 ha ridefinito il significato di e i tag sono semantici. Il il tag non conferisce maggiore importanza, ma piuttosto il testo che viene tipicamente visualizzato in grassetto. Il il tag non conferisce ulteriore importanza o enfasi, ma definisce piuttosto il testo che viene tipicamente visualizzato in corsivo. Tag HTML semanticiattraverso
,
,
e . Esistono molti altri tag HTML semantici che possono essere utilizzati mentre si crea un sito Web conforme agli standard.Perché dovresti preoccuparti della semantica
il tag viene immediatamente riconosciuto dal browser come un tipo di linguaggio di programmazione. Utilizzare i tag semantici correttamente
tag per il rientro del testo che non è un preventivo. Questo perché i blockquotes sono rientrati di default. Se vuoi semplicemente beneficiare dei rientri, ma il testo non è un blocco, usa invece i margini CSS.
tagga i rientri di quel testo nella maggior parte dei browser. Questo è sia HTML semanticamente corretto che non valido, come solo
etichetta. Ancora una volta, usa lo stile margine o spaziatura per far rientrare il testo.
Quali tag HTML sono semantici?
Abbreviazione Acronimo Lunga citazione Definizione Indirizzo per l'autore (i) del documento Citazione Codice di riferimento Teletype testo Divisione logica Contenitore generico in linea Testo cancellato Testo inserito enfasi Forte enfasi Titolo di primo livello Titolo di secondo livello Titolo di terzo livello Titolo di quarto livello Titolo di quinto livello Titolo del sesto livello Pausa tematica Testo da inserire dall'utente
Testo preformattato Breve quotazione in linea Uscita di esempio deponente indice Testo variabile o definito dall'utente
