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

# Ferramentas de Desenvolvedor
Os navegadores modernos incluem ferramentas de desenvolvedor integradas que permitem inspecionar e depurar HTML, CSS e JavaScript. Você pode acessá-las pressionando **F12** ou clicando com o botão direito na página e escolhendo **Inspecionar**.

Por exemplo, vamos examinar a página da web `google.com`. Ao pressionar `F12`, você pode acessar a seguinte visualização:

- A guia **Elements** (lado esquerdo) exibe a estrutura HTML da página;
- A guia **Styles** (lado direito) mostra as regras CSS para o elemento selecionado.
- Ao passar o mouse sobre um elemento, ele é destacado na página.

Além de inspecionar elementos, as ferramentas de desenvolvedor permitem modificar **HTML** e **CSS**. As alterações feitas são refletidas instantaneamente na página, mas não são salvas permanentemente no código-fonte. Esse recurso é útil para testar e experimentar marcação e estilos.

# Estilo de Código
Estilo de código refere-se à escrita de HTML de forma limpa, legível e consistente. Embora o HTML não imponha regras rígidas de formatação, uma boa estrutura facilita a manutenção do código.

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

Se você tem interesse em melhores práticas de estilização de código, é recomendado visitar a seguinte fonte: [Code Guide by @mdo](https://codeguide.co/).

Nota

Qual é a principal vantagem de usar as Ferramentas do Desenvolvedor nos navegadores web?

Aprenda os conceitos essenciais de HTML (HyperText Markup Language), a base do desenvolvimento web. Este curso para iniciantes aborda tags, atributos, elementos e a estruturação de páginas web. Adquira habilidades práticas na criação de títulos, parágrafos, listas, imagens, links, formulários e tabelas. Explore boas práticas, otimização e acessibilidade na web. Inicie sua jornada no desenvolvimento web com HTML.

Explore o funcionamento interno da web. Entenda como os dados trafegam pelas redes, descubra o papel dos protocolos e desvende os mistérios dos endereços IP e nomes de domínio. Obtenha uma compreensão geral de como navegadores e servidores se comunicam para entregar conteúdo web.

Descubra o poder das tags para estruturar o conteúdo, desde títulos e parágrafos até listas e tabelas. Aprenda como aprimorar os elementos com atributos.

O núcleo da estrutura de documentos HTML. Aprenda os componentes de um documento HTML, incluindo a declaração do doctype, head e body. Compreenda o propósito de cada elemento e como eles contribuem para a estrutura geral de uma página web.

Torne uma página web mais atraente com o uso de mídias como imagens, áudio e vídeo. Trabalhe com dados tabulares estruturados na forma de tabelas.

Explore a versatilidade dos formulários HTML. Aprenda a projetar formulários intuitivos e fáceis de usar aproveitando conceitos e técnicas essenciais. Descubra como os formulários possibilitam a interação do usuário e o envio de dados em sites.

Usando Ferramentas de Desenvolvedor para Inspeção e Depuração de HTML

Ferramentas de Desenvolvedor

Estilo de Código