Summary  
This chapter explains how to use browser developer tools to inspect and modify HTML structure and CSS rules for debugging and testing markup and style changes.  

General domain of usage  
Web development

# Strumenti per sviluppatori
I browser moderni includono strumenti per sviluppatori integrati che permettono di ispezionare e fare il debug di HTML, CSS e JavaScript. Puoi accedervi premendo **F12** oppure facendo clic con il tasto destro sulla pagina e scegliendo **Ispeziona**.

Ad esempio, esaminiamo la pagina web di `google.com`. Premendo `F12`, puoi accedere alla seguente visualizzazione:

- La scheda **Elements** (a sinistra) mostra la struttura HTML della pagina;
- La scheda **Styles** (a destra) visualizza le regole CSS per l'elemento selezionato.
- Passando il mouse su un elemento, questo viene evidenziato nella pagina.

Oltre a ispezionare gli elementi, gli strumenti per sviluppatori permettono di modificare **HTML** e **CSS**. Le modifiche apportate vengono immediatamente visualizzate sulla pagina web, ma non vengono salvate in modo permanente nel codice sorgente. Questa funzionalità è utile per testare ed effettuare esperimenti su markup e stili.

# Stile del codice
Stile del codice significa scrivere HTML in modo pulito, leggibile e coerente. Sebbene HTML non imponga regole di formattazione rigide, una buona struttura rende il codice più facile da mantenere.

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04IiAvPgogICAgPG1ldGEKICAgICAgbmFtZT0iZGVzY3JpcHRpb24iCiAgICAgIGNvbnRlbnQ9IkxlYXJuIHRoZSBwcmluY2lwbGVzIG9mIHdlYiBkZXZlbG9wbWVudC4iCiAgICAvPgogICAgPHRpdGxlPldlYiBEZXZlbG9wbWVudDwvdGl0bGU+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPGhlYWRlcj4KICAgICAgPGgxPldlbGNvbWUgdG8gV2ViIERldmVsb3BtZW50PC9oMT4KICAgICAgPG5hdj4KICAgICAgICA8dWw+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI2ludHJvZHVjdGlvbiI+SW50cm9kdWN0aW9uPC9hPjwvbGk+CiAgICAgICAgICA8bGk+PGEgaHJlZj0iI3R1dG9yaWFscyI+VHV0b3JpYWxzPC9hPjwvbGk+CiAgICAgICAgPC91bD4KICAgICAgPC9uYXY+CiAgICA8L2hlYWRlcj4KCiAgICA8bWFpbj4KICAgICAgPHNlY3Rpb24gaWQ9ImludHJvZHVjdGlvbiI+CiAgICAgICAgPGgyPkludHJvZHVjdGlvbjwvaDI+CiAgICAgICAgPHA+CiAgICAgICAgICBUaGlzIGlzIGEgZGVlcCBkaXZlIGludG8gd2ViIGRldmVsb3BtZW50LiBXZSB3aWxsIGV4cGxvcmUgdmFyaW91cwogICAgICAgICAgdGVjaG5vbG9naWVzLgogICAgICAgIDwvcD4KICAgICAgPC9zZWN0aW9uPgoKICAgICAgPHNlY3Rpb24gaWQ9InR1dG9yaWFscyI+CiAgICAgICAgPGgyPldlYiBEZXZlbG9wbWVudCBUdXRvcmlhbHM8L2gyPgogICAgICAgIDxwPkZvbGxvdyBhbG9uZyB0byBsZWFybiBIVE1MLCBDU1MsIEphdmFTY3JpcHQsIGFuZCBtb3JlITwvcD4KICAgICAgPC9zZWN0aW9uPgogICAgPC9tYWluPgoKICAgIDxmb290ZXI+CiAgICAgIDxwPiZjb3B5OyBNaWNoYWVsIEdyYW5kLiBBbGwgcmlnaHRzIHJlc2VydmVkLjwvcD4KICAgIDwvZm9vdGVyPgogIDwvYm9keT4KPC9odG1sPg==

Se sei interessato alle migliori pratiche di stile del codice, si consiglia di visitare la seguente fonte: [Code Guide by @mdo](https://codeguide.co/).

Nota

Qual è il principale vantaggio dell'utilizzo degli Strumenti per sviluppatori nei browser web?

Impara le basi dell'HTML (HyperText Markup Language), la base dello sviluppo web. Questo corso adatto ai principianti copre tag, attributi, elementi e strutturazione delle pagine web. Acquisisci competenze pratiche nella creazione di intestazioni, paragrafi, elenchi, immagini, link, moduli e tabelle. Esplora le migliori pratiche, l'ottimizzazione e l'accessibilità web. Inizia il tuo percorso di sviluppo web con HTML.

Esplora il funzionamento interno del web. Scopri come i dati viaggiano attraverso le reti, scopri il ruolo dei protocolli e svela i misteri degli indirizzi IP e dei nomi di dominio. Ottieni una comprensione a livello generale di come i browser web e i server comunicano per fornire contenuti web.

Scopri il potere dei tag per strutturare il contenuto, dai titoli e paragrafi a elenchi e tabelle. Impara come migliorare gli elementi con gli attributi.

Il nucleo della struttura del documento HTML. Impara i componenti di un documento HTML, inclusa la dichiarazione doctype, head e body. Comprendi lo scopo di ciascun elemento e come contribuiscono alla struttura complessiva di una pagina web.

Rendi una pagina web più attraente con l'aiuto di media come immagini, audio e video. Lavora con dati tabulari strutturati sotto forma di tabelle.

Esplora la versatilità dei moduli HTML. Impara a progettare moduli intuitivi e facili da usare sfruttando concetti e tecniche chiave. Scopri come i moduli consentono l'interazione dell'utente e l'invio di dati sui siti web.

Utilizzo degli strumenti di sviluppo per l'ispezione e il debug di HTML

Strumenti per sviluppatori

Stile del codice