Nell’HyperText Markup Language (HTML), esistono diversi modi per visualizzare e creare elementi grafici in un documento HTML. Il tipo più diffuso di grafica HTML sono le immagini che vengono posizionate direttamente nella pagina HTML, chiamate immagini in linea, sebbene esistano altri metodi, come l’utilizzo di un linguaggio di script o un’applicazione Web compilata, che possono essere utilizzati per ottenere gli stessi risultati. Per la grafica generata dinamicamente per diagrammi o grafici, è possibile utilizzare la grafica vettoriale scalabile (SVG). Ci sono anche alcuni elementi grafici HTML di base che sono supportati dalle specifiche del linguaggio e non richiedono file esterni come linee orizzontali e punti elenco in un elenco. La grafica HTML più complessa può essere ottenuta attraverso l’uso di un linguaggio di scripting, fogli di stile a cascata (CSS) e l’elemento canvas HTML, fornendo un’opzione nativa per alcuni effetti che in precedenza erano possibili solo tramite oggetti esterni e plug-in.
Di gran lunga, la grafica HTML in linea è il modo più utilizzato e più semplice per inserire un’immagine in un documento HTML. Fondamentalmente si tratta di creare un’immagine in un editor di immagini, salvarla in un formato di file comunemente usato e quindi specificare il nome e la posizione del file di immagine nel documento HTML con il tag IMG. A parte la semplicità di incorporare un elemento grafico in linea in un documento, il motore di rendering nella maggior parte dei browser Web può posizionare facilmente l’elemento grafico in layout di pagina più complessi senza artefatti di formattazione. Una complicazione che può verificarsi con un’immagine in linea è che potrebbe essere necessario ridimensionare le dimensioni dell’immagine per adattarsi a display eccezionalmente grandi o piccoli quando vengono visualizzati, riducendo potenzialmente la qualità dell’immagine.
La grafica vettoriale scalabile è uno stile più complesso di grafica HTML. Un’immagine SVG viene disegnata definendo forme, percorsi e spessori di linea e viene disegnata al volo mentre l’utente visualizza il documento. Ciò rende SVG una buona scelta per la visualizzazione di dati dinamici come tabelle o grafici, ma li rende molto poco pratici da utilizzare per altri tipi di grafica, come la costruzione di immagini fotorealistiche. Per la semplice grafica HTML e in situazioni in cui non è possibile caricare un file di immagine esterno, SVG potrebbe essere un’opzione praticabile.
Con lo sviluppo dello standard di linguaggio HTML versione 5 (HTML5), è possibile creare grafica HTML dinamica all’interno del linguaggio HTML di base. Questo viene fatto disegnando direttamente su una superficie speciale nota come tela in un documento HTML. Utilizzando JavaScript® e CSS, questo metodo può creare animazioni o giochi che possono rispondere all’input dell’utente o regolare la grafica a seconda delle impostazioni del browser Web o di altri dati. La creazione di un elemento grafico HTML5, tuttavia, può essere una procedura complessa che potrebbe comportare lunghi blocchi di codice di script che potrebbero essere eseguiti molto lentamente su alcuni computer o dispositivi.