path: root/files/pt-pt/learn/html/introduction_to_html/debugging_html/index.html

---
title: Depurar HTML
slug: Learn/HTML/Introduction_to_HTML/Debugging_HTML
tags:
  - Depuração
  - Erro
  - Guía
  - HTML
  - Principiante
  - Validação
translation_of: Learn/HTML/Introduction_to_HTML/Debugging_HTML
original_slug: Learn/HTML/Introducao_ao_HTML/Depurar_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">Writing HTML is fine, but what if something goes wrong, and you can't work out where the error in the code is? This article will introduce you to some tools that can help you find and fix errors in HTML.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisites:</th>
   <td>HTML familiarity, as covered in for example <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started">Getting started with HTML</a>, <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals">HTML text fundamentals</a>, and <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks">Creating hyperlinks</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objective:</th>
   <td>Learn the basics of using debugging tools to find problems in HTML.</td>
  </tr>
 </tbody>
</table>

<h2 id="Debugging_isn't_scary">Debugging isn't scary</h2>

<p>When writing code of some kind, everything is usually fine, until that dreaded moment when an error occurs — you've done something wrong, so your code doesn't work — either not at all, or not quite how you wanted it to. For example, the following shows an error reported when trying to {{glossary("compile")}} a simple program written in the <a href="https://www.rust-lang.org/">Rust</a> language.</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;">Here, the error message is relatively easy to understand — "unterminated double quote string". If you look at the listing, you can probably see how <code>println!(Hello, world!");</code> might logically be missing a double quote. However, error messages can quickly get more complicated and less easy to interpret as programs get bigger, and even simple cases can look a little intimidating to someone who doesn't know anything about Rust.</p>

<p>Debugging doesn't have to be scary though —  the key to being comfortable with writing and debugging any programming language or code is familiarity with both the language and the tools.</p>

<h2 id="HTML_and_debugging">HTML and debugging</h2>

<p>HTML is not as complicated to understand as Rust. HTML is not compiled into a different form before the browser parses it and shows the result (it is <em>interpreted</em>, not <em>compiled</em>). And HTML's {{glossary("element")}} syntax is arguably a lot easier to understand than a "real programming language" like Rust, {{glossary("JavaScript")}}, or {{glossary("Python")}}. The way that browsers parse HTML is a lot more <strong>permissive</strong> than how programming languages are run, which is both a good and a bad thing.</p>

<h3 id="Permissive_code">Permissive code</h3>

<p>So what do we mean by permissive? Well, generally when you do something wrong in code, there are two main types of error that you'll come across:</p>

<ul>
 <li><strong>Syntax errors</strong>: These are spelling errors in your code that actually cause the program not to run, like the Rust error shown above. These are usually easy to fix as long as you are familiar with the language's syntax and know what the error messages mean.</li>
 <li><strong>Logic errors</strong>: These are errors where the syntax is actually correct, but the code is not what you intended it to be, meaning that program runs incorrectly. These are often harder to fix than syntax errors, as there isn't an error message to direct you to the source of the error.</li>
</ul>

<p>HTML itself doesn't suffer from syntax errors because browsers parse it permissively, meaning that the page still displays even if there are syntax errors. Browsers have built-in rules to state how to interpret incorrectly written markup, so you'll get something running, even if it is not what you expected. This, of course, can still be a problem!</p>

<div class="note">
<p><strong>Note</strong>: HTML is parsed permissively because when the web was first created, it was decided that allowing people to get their content published was more important than making sure the syntax was absolutely correct. The web would probably not be as popular as it is today, if it had been more strict from the very beginning.</p>
</div>

<h3 id="Active_learning_Studying_permissive_code">Active learning: Studying permissive code</h3>

<p>It's time to study the permissive nature of HTML code.</p>

<ol>
 <li>First, download our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">debug-example demo</a> and save it locally. This demo is deliberately written to have some errors in it for us to explore (the HTML markup is said to be <strong>badly-formed</strong>, as opposed to <strong>well-formed</strong>).</li>
 <li>Next, open it in a browser. You will see something like this:<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>This immediately doesn't look great; let's look at the source code to see if we can work out why (only the body contents are shown):
  <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>Let's review the problems:
  <ul>
   <li>The {{htmlelement("p","paragraph")}} and {{htmlelement("li","list item")}} elements have no closing tags. Looking at the image above, this doesn't seem to have affected the markup rendering too badly, as it is easy to infer where one element should end and another should begin.</li>
   <li>The first {{htmlelement("strong")}} element has no closing tag. This is a bit more problematic, as it isn't easy to tell where the element is supposed to end. In fact, the whole of the rest of the text has been strongly emphasised.</li>
   <li>This section is badly nested: <code>&lt;strong&gt;strong &lt;em&gt;strong emphasised?&lt;/strong&gt; what is this?&lt;/em&gt;</code>. It is not easy to tell how this has been interpreted because of the previous problem.</li>
   <li>The {{htmlattrxref("href","a")}} attribute value has a missing closing double quote. This seems to have caused the biggest problem — the link has not rendered at all.</li>
  </ul>
 </li>
 <li>Now let's look at the markup the browser has rendered, as opposed to the markup in the source code. To do this, we can use the browser developer tools. If you are not familiar with how to use your browser's developer tools, take a few minutes to review <a href="/en-US/docs/Learn/Discover_browser_developer_tools">Discover browser developer tools</a>.</li>
 <li>In the DOM inspector, you can see what the rendered markup looks like: <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>Using the DOM inspector, let's explore our code in detail to see how the browser has tried to fix our HTML errors (we did the review in Firefox; other modern browsers <em>should</em> give the same result):
  <ul>
   <li>The paragraphs and list items have been given closing tags.</li>
   <li>It isn't clear where the first <code>&lt;strong&gt;</code> element should be closed, so the browser has wrapped each separate block of text with its own strong tag, right down to the bottom of the document!</li>
   <li>The  incorrect nesting has been fixed by the browser like this:
    <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>The link with the missing double quote has been deleted altogether. The last list item looks like this:
    <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>So you can see from the above example that you really want to make sure your HTML is well-formed! But how? In a small example like the one seen above, it is easy to search through the lines and find the errors, but what about a huge, complex HTML document?</p>

<p>The best strategy is to start by running your HTML page through the <a href="https://validator.w3.org/">Markup Validation Service</a> — created and maintained by the W3C, the organization that looks after the specifications that define HTML, CSS, and other web technologies. This webpage takes an HTML document as an input, goes through it, and gives you a report to tell you what is wrong with your HTML.</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>To specify the HTML to validate, you can give it a web address, upload an HTML file, or directly input some HTML code.</p>

<h3 id="Active_learning_Validating_an_HTML_document">Active learning: Validating an HTML document</h3>

<p>Let's try this with our <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/debugging-html/debug-example.html">sample document</a>.</p>

<ol>
 <li>First, load up the <a href="https://validator.w3.org/">Markup Validation Service</a> in one browser tab, if it isn't already.</li>
 <li>Switch to the <a href="https://validator.w3.org/#validate_by_input">Validate by Direct Input</a> tab.</li>
 <li>Copy all the sample document's code (not just the body) and paste it into the large text area shown in the Markup Validation Service.</li>
 <li>Press the <em>Check</em> button.</li>
</ol>

<p>This should give you a list of errors and other information.</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="Interpreting_the_error_messages">Interpreting the error messages</h4>

<p>The error messages are usually helpful, but sometimes they are not so helpful; with a bit of practice you can work out how to interpret these to fix your code. Let's go through the error messages and what they mean. You'll see that each message comes with a line and column number to help you to locate the error easily.</p>

<ul>
 <li>"End tag <code>li</code> implied, but there were open elements" (2 instances): These messages indicate that an element is open that should be closed. The ending tag is implied, but not actually there. The line/column information points to the first line after the line where the closing tag should really be, but this is a good enough clue to see what is wrong.</li>
 <li>"Unclosed element <code>strong</code>": This is really easy to understand — a {{htmlelement("strong")}} element is unclosed, and the line/column information points right to where it is.</li>
 <li>"End tag <code>strong</code> violates nesting rules": This points out the incorrectly nested elements, and the line/column information points out where it is.</li>
 <li>"End of file reached when inside an attribute value. Ignoring tag": This one is rather cryptic; it refers to the fact that there is an attribute value not properly formed somewhere, possibly near the end of the file because the end of the file appears inside the attribute value. The fact that the browser doesn't render the link should give us a good clue as to what element is at fault.</li>
 <li>"End of file seen and there were open elements": This is a bit ambiguous, but basically refers to the fact there are open elements that need to be properly closed. The lines numbers point to the last few lines of the file, and this error message comes with a line of code that points out an example of an open element:
  <pre>example: &lt;a href="https://www.mozilla.org/&gt;link to Mozilla homepage&lt;/a&gt; ↩ &lt;/ul&gt;↩ &lt;/body&gt;↩&lt;/html&gt;</pre>

  <div class="note">
  <p><strong>Note</strong>: An attribute missing a closing quote can result in an open element because the rest of the document is interpreted as the attribute's content.</p>
  </div>
 </li>
 <li>"Unclosed element <code>ul</code>": This is not very helpful, as the {{htmlelement("ul")}} element <em>is</em> closed correctly. This error comes up because the {{htmlelement("a")}} element is not closed, due to the missing closing quote mark.</li>
</ul>

<p><span>If you can't work out what every error message means, don't worry about it — a good idea is to try fixing a few errors at a time. Then try revalidating your HTML to show what errors are left. Sometimes fixing an earlier error will also get rid of other error messages — several errors can often be caused by a single problem, in a domino effect.</span></p>

<p><span>You will know when all your errors are fixed when you see the following banner in your output: </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="Summary">Summary</h2>

<p>So there we have it, an introduction to debugging HTML, which should give you some useful skills to count on when you start to debug CSS, JavaScript, and other types of code later on in your career. This also marks the end of the Introduction to HTML module learning articles — now you can go on to testing yourself with our assessments: the first one is linked below.</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>