path: root/files/de/learn/html/introduction_to_html/debugging_html/index.html

---
title: Fehlersuche in HTML
slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
tags:
  - Anfänger
  - Beginner
  - Debugging
  - Guide
  - HTML
  - Validation
  - validator
translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
original_slug: Learn/HTML/Einführung_in_HTML/Fehlersuche_in_HTML
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</div>

<p class="summary">HTML-Code zu schreiben ist die eine Sache. Fehler die sich beim Entwickeln einschleichen zu finden und zu beheben die andere. In diesem Artikel stellen wir einige Werkzeuge vor, mit welchen man Fehler in HTML finden und beheben kann.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Vorwissen:</th>
   <td>
    <p>Grundkenntnisse in HTML, wie sie in den Artikeln <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Lernen Sie HTML kennen</a>, <a href="/de/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">Einfache Textformatierung mit HTML</a> und <a href="/de/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Erstellen von Links</a> abgedeckt werden.</p>
   </td>
  </tr>
  <tr>
   <th scope="row">Ziel:</th>
   <td>
    <p>Die Grundlagen zur Fehlersuche in HTML, mit Hilfe von entsprechenden Werkzeugen, kennen lernen.</p>
   </td>
  </tr>
 </tbody>
</table>

<h2 id="Keine_Angst_vor_der_Fehlersuche">Keine Angst vor der Fehlersuche</h2>

<p>Wenn Computercode geschrieben wird, dann ist meistens alles in Ordnung, bis zu dem Moment in dem ein Fehler auftritt - es wurde etwas falsch gemacht, deswegen funktioniert der Code nicht - entweder überhaupt nicht, oder nicht so wie es vorgesehen war. Als Beispiel zeigen wir einen Fehlerbericht, der beim compilieren eines einfachen Programmes in der Programmiersprache <a href="https://www.rust-lang.org/">Rust</a>, ausgegeben wurde.</p>

<p><img alt="A console window showing the result of trying to compile a rust program with a missing quote around a string in a print statement. The error message reported is error: unterminated double quote string." src="https://mdn.mozillademos.org/files/12435/error-message.png" style="display: block; height: 520px; margin: 0px auto; width: 711px;"> "Error" ist Englisch und bedeutet Fehler. In diesem Beispiel gibt die Fehlerwarnung aus "unterminated double quote string", was bedeutet, dass ein doppeltes Anführungszeichen fehlt. Wenn man sich <code>println!(Hello, world!");</code> anschaut, dann kann man sehen, das dort doppelte Anführungszeichen fehlen. Dieser Fehler ist dank der Fehlermeldung einfach zu finden und zu beheben. Fehlermeldungen können aber um einiges komplizierter sein, als in diesem Beispiel. Vor allem bei größeren Programmen, mit mehr Code, sind Fehler unvermeidlich und für jemanden, der eine Programmiersprache nicht kennt, wird es fast unmöglich, diese zu finden.</p>

<h2 id="Begriffserklärungen_Fehlerbehebung">Begriffserklärungen Fehlerbehebung</h2>

<p>Im Computerbereich wurden viele <strong>Begriffe aus dem Englischen übernommen</strong>, so auch in diesem Bereich. So wird Fehlerbehebung auch im deutschen Sprachgebrauch <strong>Debugging</strong> genannt. Der Fehler im Code wird im Englischen als <strong>Bug</strong> bezeichnet, was soviel wie <em>Ungeziefer</em> bedeutet. Das <em>Debugging</em> ist dann das <em>Entfernen des Ungeziefers</em> Als <strong>Debugger</strong> wird ein Programm bezeichnet, welches zur Fehlersuche und -behebung genutzt wird.</p>

<p>Die Fehlerbehebung, das debuggen also, muss niemandem Angst machen, auch wenn es viel Arbeit ist. Der Schlüssel zum Schreiben und Debuggen von Programmiercode ist Vertrautheit mit der entsprechenden Programmiersprache und den Wekrzeugen zur Fehlerbehebung.</p>

<h2 id="HTML_und_Debugging">HTML und Debugging</h2>

<p>Die Syntax von HTML ist um einiges einfacher als in einer "echten" Programmiersprache, wie Rust, {{glossary("Javascript")}} oder {{glossary("Python")}}. Auch wird HTML nicht erst compiliert, sondern direkt vom Browser interpretiert. Browser sind beim rendern von HTML sehr <strong>permissiv</strong>. Fehler bewirken normalerweise nicht, wie bei anderen Programmiersprachen üblich, das ein Dokument gar nicht dargestellt wird, sondern der Browser rendert das HTML-Dokument trotzdem, was sowohl gut, als auch schlecht sein kann.</p>

<h3 id="Permissiver_Code">Permissiver Code</h3>

<p>Was bedeutet permissiv? Wenn man in Programmiersprachen etwas falsch macht, dann gibt es normalereise zwei Sorten von Fehlern, denen man begegnet:</p>

<ul>
 <li><strong>Syntaxfehler</strong>: Dies sind Schreibfehler im Code, welche bewirken, dass das Programm nicht läuft, wie das obige Beispiel in Rust. Syntaxfehler sind leicht zu finden und zu beheben, wenn man mit der entsprechenden Programmierprache vertraut ist und man weiß, wie man Fehlermeldungen interpretiert.</li>
 <li><strong>Logische Fehler</strong>: Diese Fehler treten auf, wenn die Syntax korrekt ist, der Code aber nicht das tut, was er tun soll. Das Programm läuft, aber nicht so wie erwartet. Logische Fehler sind schwieriger zu beheben, weil es keine Fehlermeldung gibt, die einen zu der Fehlerquelle führt.</li>
</ul>

<p>HTML ignoriert Syntaxfehler, Browser rendern permissiv, die Seite wird angezeigt, obwohl Syntaxfehler im Code sind. Browser haben Regeln eingebaut, welche falsch geschriebenen HTML-Code trotzdem interpretieren, allerdings meist nicht so, wie es vorgesehen war. Die Fehler müssen trotzdem behoben werden.</p>

<div class="note">
<p><strong>Hinweis</strong>: Warum wird HTML permissiv gerendert? Weil bei der Entwicklung des World Wide Web befunden wurde, dass es wichtiger ist, dass Leute ihre Inhalte publizieren können. Wichtiger als ein paar Syntaxfehler im Code, die eine Veröffentlichung verhindern würden. Das Internet wäre vermutlich nicht so populär, wenn die Regeln der Sprache strenger gewesen wären.</p>
</div>

<h3 id="Aktives_Lernen_Permissiven_Code_untersuchen">Aktives Lernen: Permissiven Code untersuchen</h3>

<p>Es ist Zeit sich anzuschauen, wie permissiv HTML Code gerendert wird.</p>

<ol>
 <li>Laden Sie bitte die folgende Datei herunter und speichern sie diese lokal: <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> In diesem Demo-Code sind absichtlich einige Fehler verbaut. Der HTML-Code ist schlecht geschrieben.</li>
 <li>Öffnen Sie diese Datei in einem Browser. Sie sollten folgendes sehen: <img alt="A simple HTML document with a title of HTML debugging examples, and some information about common HTML errors, such as unclosed elements, badly nested elements, and unclosed attributes. " src="https://mdn.mozillademos.org/files/12437/badly-formed-html.png" style="display: block; margin: 0 auto;"></li>
 <li>Das sieht gleich etwas merkwürdig aus. Schauen sie sich nun den Quellcode der Datei an:
  <pre class="brush: html">&lt;h1&gt;HTML debugging examples&lt;/h1&gt;

&lt;p&gt;What causes errors in HTML?

&lt;ul&gt;
  &lt;li&gt;Unclosed elements: If an element is &lt;strong&gt;not closed properly,
      then its effect can spread to areas you didn't intend

  &lt;li&gt;Badly nested elements: Nesting elements properly is also very important
      for code behaving correctly. &lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt;
      what is this?&lt;/em&gt;

  &lt;li&gt;Unclosed attributes: Another common source of HTML problems. Let's
      look at an example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla
      homepage&lt;/a&gt;
&lt;/ul&gt;</pre>
 </li>
 <li>Lassen Sie uns die Probleme erläutern:
  <ul>
   <li>Die {{htmlelement("p","Absatz")}} und {{htmlelement("li","Listenpunkt")}} Elemente haben keine schließenden Tags. Auf dem Bild oben sehen wir, das dies kaum Auswikrungen hat, da es für den Browser einfach ist, trotzdem zu erkennen, wo das Ende dieser Elemente sein sollte.</li>
   <li>Das erste {{htmlelement("strong")}} Element hat kein schließendes Tag. Der Browser kann nicht erraten, wo das Element enden soll, deswegen ist der ganze Rest von dem Text stark hervorgehoben.</li>
   <li>Diese Sektion des Textes wurden die Elemente schlecht verschachtelt. <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. Wegen dem vorhergehenden Problem, kann man nicht sagen, wie dies vom Browser interpretiert wird.</li>
   <li>Bei dem {{htmlattrxref("href","a")}}-Attributwert wurde ein schließendes, doppeltes Anführungszeichen vergessen. Dies scheint das größte Problem zu verursachen, der Link ist gar nicht erst gerendert worden.</li>
  </ul>
 </li>
 <li>Lassen Sie uns den Code anschauen den der Browser zum rendern benutzt hat, im Gegensatz zu dem geschriebenen Quellcode. Dafür benutzen wir die Web Developer Tools, die in jedem modernen Browser enthalten sind (nicht aber in der mobilen Version der Browser). Wenn Sie nicht wissen, was Web Developer Tools sind, dann nehmen Sie sich einige Minuten Zeit, um diesen Artikel zu lesen: <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Entdecken Sie die Web Developer Tools</a></li>
 <li>In dem DOM-Inspektor können Sie sehen, wie der gerenderte Code aussieht: <img alt="The HTML inspector in Firefox, with our example's paragraph highlighted, showing the text &quot;What causes errors in HTML?&quot; Here you can see that the paragraph element has been closed by the browser." src="https://mdn.mozillademos.org/files/12439/html-inspector.png" style="display: block; margin: 0 auto;"></li>
 <li>Mit Hilfe des DOM-Inspektors können wir den Code den der Browser versucht hat zu beheben sehen und wie dieser versucht die HTML Fehler zu beheben. (Wir habe hier Firefox benutzt, um den Code anzuschauen; andere moderne Browser <em>sollten</em> zu dem selben Resultat kommen.):
  <ul>
   <li>Den Absätzen und den Listenpunkten wurden schließende Tags hinzugefügt.</li>
   <li>Es ist nicht klar, wo das erste <code>&lt;strong&gt;</code>-Element enden soll, deswegen hat der Browser jeden separaten Block mit einem eigenen <code>&lt;strong&gt;</code>-Tag versehen, bis zum Ende des Dokumentes!</li>
   <li>Die falsch verschachtelten Elemente wurden vom Browser wie folgt gelöst:
    <pre class="brush: html">&lt;strong&gt;strong
  &lt;em&gt;strong emphasised?&lt;/em&gt;
&lt;/strong&gt;
&lt;em&gt; what is this?&lt;/em&gt;</pre>
   </li>
   <li>Der Link mit den fehlenden, doppelten Anführungszeichen wurde komplett gelöscht. Das letzte Listenelement sieht so aus:
    <pre class="brush: html">&lt;li&gt;
  &lt;strong&gt;Unclosed attributes: Another common source of HTML problems.
  Let's look at an example: &lt;/strong&gt;
&lt;/li&gt;</pre>
   </li>
  </ul>
 </li>
</ol>

<h3 id="HTML_Validation">HTML Validation</h3>

<p>Es ist auf jeden Fall besser, die korrekte Syntax für HTML zu verwenden, um ungewollte Ergebnisse zu vermeiden. Aber wie? Bei einem kleinen Dokument, wie dem obigen, ist es einfach, dieses Zeile für Zeile durchzugehen, um die Fehler zu finden. Aber was bei einem sehr großen HTML-Dokument tun?</p>

<p>Die beste Strategie ist es, das HTML-Dokument von dem <a href="https://validator.w3.org/">Markup Validation Service</a> überprüfen zu lassen. Dieses Tool wird von der W3C bereitgestellt, also von der Organisation, welche auch die Spezifikationen von HTML, CSS und anderen Internettechnologien erstellt. Dieser Webseite gibt man ein HTML-Dokument an, diese untersucht das Dokument auf Fehler und gibt einen detailierten Fehlerbericht zurück.</p>

<p><img alt="The HTML validator homepage" src="https://mdn.mozillademos.org/files/12441/validator.png" style="display: block; margin: 0 auto;"></p>

<p>Man kann entweder eine Webseite, ein hochgeladenes HTML-Dokument oder direkt eingegebenen HTML-Code validieren lassen</p>

<h3 id="Aktives_lernen_Validieren_eines_HTML-Dokumentes">Aktives lernen: Validieren eines HTML-Dokumentes</h3>

<p>Lassen Sie uns das Gelernte einmal in die Praxis umsetzen, mit unserem <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">Beispieldokument hier</a>.</p>

<ol>
 <li>Öffnen Sie als Erstes den <a href="https://validator.w3.org/">Markup Validation Service</a> in einem anderen Browser-Tab.</li>
 <li>Gehen Sie zu dem <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> Tab. Dort kann man direkt HTML-Code überprüfen.</li>
 <li>Kopieren Sie den Code aus dem Beispieldokument komplett in das große Textfeld auf der Webseite des Markup Validation Service.</li>
 <li>Klicken Sie auf <em>Check</em>.</li>
</ol>

<p>Dies sollte Ihnen eine Liste der Fehler und weitere Informationen geben.</p>

<p><img alt="A list of of HTML validation results from the W3C markup validation service" src="https://mdn.mozillademos.org/files/12443/validation-results.png" style="display: block; margin: 0 auto;"></p>

<h4 id="Die_Fehlermeldungen_richtig_interpretieren">Die Fehlermeldungen richtig interpretieren</h4>

<p>Meistens sind die Fehlermeldungen hilfreich, manchmal aber auch schwierig zu verstehen. Es braucht etwas Übung, um den Grund aller Fehlermeldungen zu erkennen. Lassen Sie uns durch die ausgegebenen Fehlermeldungen gehen und überlegen, was diese bedeuten. Sie sehen, dass jede Fehlermeldung mit einer Zeilen(line) und einer Spalten(column)- nummer versehen sind damit der Ort des Fehlers auffindbar ist.</p>

<ul>
 <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): Diese Fehlermeldung zeigt an, dass ein Element offen ist, welches eigentlich geschlossen werden sollte. Die line/column Informationen zeigen auf die erste Zeile, welche nach dem nicht vorhandenen geschlossenen Tag sein sollte. Dies hilft uns zu sehen, was falsch ist.</li>
 <li>"Unclosed element <code>strong</code>": Diese Fehlermeldung ist einfach zu verstehen. Ein {{htmlelement("strong")}} Element wurde nicht geschlossen und die Zeilen und Spaltennummern deuten direkt auf den Fehler.</li>
 <li>"End tag <code>strong</code> violates nesting rules": An der angegebenen Possition wurden Elemente falsch verschachtelt.</li>
 <li>"End of file reached when inside an attribute value. Ignoring tag": Diese Fehlermeldung ist etwas kryptisch. Es zeigt auf, das ein Attribut irgendwo nicht richtig geformt wurde, vermutlich eher am Ende des Dokumentes, denn das Ende des Dokumentes ist innerhalb des Attribut-Wertes. Da der Browser den Link gar nicht darstellt, könnte hier der Fehler liegen.</li>
 <li>"End of file seen and there were open elements": Diese Fehlermeldung sagt uns einfach nur, das es offene Elemente im Dokument gibt, welche geschlossen werden müssen. Die Zeilennummern deuten auf die letzten paar Zeilen im Dokument und diese Meldung kommt mit einer Zeile Code, die ein Beispiel dafür im Dokument aufzeigt.
  <pre>Beispiel: &lt;a href="https://www.mozilla.org/&gt;Link zur Mozilla Homepage&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>

  <div class="note">
  <p><strong>Hinweis</strong>: Ein Attributwert, bei welchem geschlossene Anführungszeichen fehlen ist ein offenes Element, da der Rest des Dokumentes als der Wert des Attributes gelesen wird.</p>
  </div>
 </li>
 <li>"Unclosed element <code>ul</code>": Diese Meldung ist nicht hilfreich, da das {{htmlelement("ul")}}-Element <em>richtig</em> geschlossen wurde. Der Fehler kommt von dem nicht geschlossenen {{htmlelement("a")}}-Element, da dort die schließenden Anführungszeichen, bei einem der Attributwerte fehlen.</li>
</ul>

<p><span>Wenn Sie nicht gleich alle Fehlermeldungen verstehen ist das nicht schlimm. Am besten versucht man, einen Fehler nach dem anderen zu beheben, meistens verschwinden dann auch andere Fehlermeldungen damit. Mehrere Fehlermeldungen können das Resulstat von einem einzigen Fehler im Code sein. </span></p>

<p><span>Wenn alle Fehler beseitigt sind, dann erfolgt das folgende Banner: </span></p>

<p><img alt='Banner that reads "The document validates according to the specified schema(s) and to additional constraints checked by the validator."' src="https://mdn.mozillademos.org/files/12445/valid-html-banner.png" style="display: block; margin: 0 auto;"></p>

<h2 id="Zusammenfassung">Zusammenfassung</h2>

<p>Dies war eine Einführung in die Fehlerbehebung bei HTML-Dokumenten. Dies sollte Ihnen einige nützliche Fähigkeiten vermittelt haben, um Ihre Webseiten zukünftig ordentlich zu halten. Finden Sie selber die Fehler im Code, indem Sie sich das gerenderte HTML-Dokument im Browser anschauen oder nutzen Sie den HTML-Validator.</p>

<p>Dies ist auch das Ende der Artikelreihe des Moduls "Einführung in HTML". Als nächstes kommen zwei Aufgaben, welche Sie alleine bearbeiten sollten, um das Gelernte in die Praxis umzusetzen! Bei der ersten Aufgabe geht es darum, einen Brief mit HTML ordentlich zu formatieren: <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Aufgabe: Formatieren eines Briefes</a></p>

<p>{{PreviousMenuNext("Learn/HTML/Introduction_to_HTML/Document_and_website_structure", "Learn/HTML/Introduction_to_HTML/Marking_up_a_letter", "Learn/HTML/Introduction_to_HTML")}}</p>

<p> </p>

<h2 id="In_this_module">In this module</h2>

<ul>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML">What’s in the head? Metadata in HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting">Advanced text formatting</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure">Document and website structure</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Debugging_HTML">Debugging HTML</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Marking_up_a_letter">Marking up a letter</a></li>
 <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Structuring_a_page_of_content">Structuring a page of content</a></li>
</ul>

<p> </p>