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

# Ontwikkelaarstools
Moderne browsers bevatten ingebouwde ontwikkelaarstools waarmee je HTML, CSS en JavaScript kunt inspecteren en debuggen. Je opent deze door op **F12** te drukken of door met de rechtermuisknop op de pagina te klikken en **Inspecteren** te kiezen.

Laten we bijvoorbeeld de webpagina van `google.com` bekijken. Door op `F12` te drukken, krijg je het volgende scherm te zien:

- Het tabblad **Elementen** (linkerkant) toont de HTML-structuur van de pagina;
- Het tabblad **Stijlen** (rechterkant) geeft de CSS-regels weer voor het geselecteerde element.
- Door met de muis over een element te bewegen, wordt het op de pagina gemarkeerd.

Naast het inspecteren van elementen bieden ontwikkelaarstools de mogelijkheid om **HTML** en **CSS** aan te passen. Wijzigingen worden direct weergegeven op de webpagina, maar worden niet permanent opgeslagen in de broncode. Deze functie is handig voor het testen en experimenteren met opmaak en stijlen.

# Code-stijl
Code-stijl verwijst naar het schrijven van HTML die overzichtelijk, leesbaar en consistent is. Hoewel HTML geen strikte opmaakregels afdwingt, zorgt een goede structuur ervoor dat de code eenvoudiger te onderhouden is.

Voorbeeld van goed geformatteerde opmaak:

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

Als je geïnteresseerd bent in best practices voor codeopmaak, wordt aanbevolen om de volgende bron te bezoeken: [Code Guide by @mdo](https://codeguide.co/).

Opmerking

Wat is het belangrijkste voordeel van het gebruik van Developer Tools in webbrowsers?

Leer de basisprincipes van HTML (HyperText Markup Language), de basis van webontwikkeling. Deze cursus voor beginners behandelt tags, attributen, elementen en het structureren van webpagina's. Verwerf praktische vaardigheden in het maken van koppen, alinea's, lijsten, afbeeldingen, links, formulieren en tabellen. Ontdek best practices, optimalisatie en webtoegankelijkheid. Begin je webontwikkelingsreis met HTML.

Verken de werking van het web. Leer hoe gegevens over netwerken reizen, ontdek de rol van protocollen en ontrafel de mysteries van IP-adressen en domeinnamen. Krijg een hoogwaardig begrip van hoe webbrowsers en servers communiceren om webinhoud te leveren.

Ontdek de kracht van tags om inhoud te structureren, van koppen en alinea's tot lijsten en tabellen. Leer hoe je de elementen kunt verbeteren met attributen.

De kern van de HTML-documentstructuur. Leer de componenten van een HTML-document, inclusief de doctype-verklaring, head en body. Begrijp het doel van elk element en hoe ze bijdragen aan de algehele structuur van een webpagina.

Maak een webpagina aantrekkelijker met behulp van media zoals afbeeldingen, audio en video. Werk met gestructureerde tabelgegevens in de vorm van tabellen.

Ontdek de veelzijdigheid van HTML-formulieren. Leer intuïtieve en gebruiksvriendelijke formulieren ontwerpen door gebruik te maken van belangrijke concepten en technieken. Ontdek hoe formulieren gebruikersinteractie en gegevensverzending op websites mogelijk maken.

Ontwikkelaarstools Gebruiken voor HTML-Inspectie en Foutopsporing

Ontwikkelaarstools

Code-stijl