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

# Entwicklertools
Moderne Browser verfügen über integrierte Entwicklertools, mit denen Sie HTML, CSS und JavaScript inspizieren und debuggen können. Sie können diese öffnen, indem Sie **F12** drücken oder mit der rechten Maustaste auf die Seite klicken und **Untersuchen** auswählen.

Beispielsweise betrachten wir die Webseite `google.com`. Durch Drücken von `F12` erhalten Sie folgende Ansicht:

- Der Tab **Elements** (linke Seite) zeigt die HTML-Struktur der Seite an;
- Der Tab **Styles** (rechte Seite) zeigt die CSS-Regeln für das ausgewählte Element an.
- Beim Überfahren eines Elements mit der Maus wird dieses auf der Seite hervorgehoben.

Zusätzlich zur Inspektion von Elementen ermöglichen Entwickler-Tools das Bearbeiten von **HTML** und **CSS**. Änderungen werden sofort auf der Webseite angezeigt, jedoch nicht dauerhaft im Quellcode gespeichert. Diese Funktion eignet sich zum Testen und Experimentieren mit Markup und Styles.

# Code-Stil
Code-Stil bezeichnet das Schreiben von HTML, das übersichtlich, lesbar und einheitlich ist. Obwohl HTML keine strengen Formatierungsregeln vorschreibt, erleichtert eine gute Struktur die Wartung des Codes.

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

Für Empfehlungen zu Best Practices beim Code-Styling wird folgende Quelle empfohlen: [Code Guide by @mdo](https://codeguide.co/).

Hinweis

Was ist der Hauptvorteil der Verwendung von Developer Tools in Webbrowsern?

Erlernen Sie die Grundlagen von HTML (HyperText Markup Language), dem Fundament der Webentwicklung. Dieser einsteigerfreundliche Kurs behandelt Tags, Attribute, Elemente und die Strukturierung von Webseiten. Erwerben Sie praktische Fähigkeiten im Erstellen von Überschriften, Absätzen, Listen, Bildern, Links, Formularen und Tabellen. Entdecken Sie Best Practices, Optimierung und Webzugänglichkeit. Beginnen Sie Ihre Webentwicklungsreise mit HTML.

Erkunden Sie die Funktionsweise des Webs. Erfahren Sie, wie Daten über Netzwerke übertragen werden, entdecken Sie die Rolle von Protokollen und entschlüsseln Sie die Geheimnisse von IP-Adressen und Domainnamen. Gewinnen Sie ein grundlegendes Verständnis darüber, wie Webbrowser und Server miteinander kommunizieren, um Webinhalte bereitzustellen.

Erkunden Sie die Möglichkeiten von Tags zur Strukturierung von Inhalten, von Überschriften und Absätzen bis hin zu Listen und Tabellen. Erfahren Sie, wie Sie Elemente mit Attributen erweitern können.

Der Kern der HTML-Dokumentstruktur. Lernen Sie die Bestandteile eines HTML-Dokuments kennen, einschließlich der Doctype-Deklaration, des Head- und Body-Bereichs. Verstehen Sie den Zweck jedes Elements und wie sie zur Gesamtstruktur einer Webseite beitragen.

Gestaltung einer ansprechenderen Webseite durch den Einsatz von Medien wie Bildern, Audio und Video. Umgang mit strukturierten tabellarischen Daten in Form von Tabellen.

Erkunden Sie die Vielseitigkeit von HTML-Formularen. Lernen Sie, intuitive und benutzerfreundliche Formulare durch Anwendung zentraler Konzepte und Techniken zu gestalten. Entdecken Sie, wie Formulare die Benutzerinteraktion und Datenübermittlung auf Websites ermöglichen.

Verwendung von Entwicklertools zur HTML-Inspektion und Fehlerbehebung

Entwicklertools

Code-Stil