Why are my code blocks not working properly

Debugging HTML

Writing HTML code is one thing. Finding and correcting errors that creep in during development is another. In this article we present some tools with which one can find and fix errors in HTML.

Don't be afraid of troubleshooting

Most of the time, when computer code is written, everything is fine until the moment an error occurs - something has been done wrong and therefore the code does not work - either not at all or not as it was intended. As an example, we show an error report that was issued when compiling a simple program in the Rust programming language.

"Error" is English and means error. In this example, the error warning prints "undermined double quote string", which means that a double quote is missing. If you look at it, you can see that there are missing double quotes. This error is easy to find and fix thanks to the error message. Error messages can be a lot more complicated than in this example. Especially with larger programs, with more code, errors are inevitable and for someone who does not know a programming language it becomes almost impossible to find it.

Explanation of terms Troubleshooting

In the computer field there were many Terms taken from English, so also in this area. This is how troubleshooting is also used in German Debugging called. The error in the code is shown in English as Bug denotes what as much as vermin means. The Debugging is that then Removing the vermin As Debugger a program is called which is used for troubleshooting and troubleshooting.

Troubleshooting, debugging, doesn't have to scare anyone, even if it's a lot of work. The key to writing and debugging programming code is familiarity with the appropriate programming language and troubleshooting tools.

HTML and debugging

The syntax of HTML is a lot simpler than in a "real" programming language like Rust, Javascript or Python (en-US). Also, HTML is not compiled first, but interpreted directly by the browser. Browsers are great at rendering HTML permissive. Errors usually do not, as is usual with other programming languages, mean that a document is not displayed at all, but the browser renders the HTML document anyway, which can be both good and bad.

Permissive code

What does permissive mean? If you do something wrong in programming languages, there are usually two types of errors you encounter:

  • Syntax error: These are spelling mistakes in the code which cause the program not to run, like the above example in Rust. Syntax errors are easy to find and correct if you are familiar with the relevant programming language and know how to interpret error messages.
  • Logical errors: These errors occur when the syntax is correct, but the code does not do what it is supposed to do. The program works, but not as expected. Logical errors are more difficult to fix because there is no error message that leads you to the source of the error.

HTML ignores syntax errors, browsers render permissive, the page is displayed even though there are syntax errors in the code. Browsers have built in rules that interpret incorrectly written HTML code anyway, but mostly not as it was intended. The errors still have to be corrected.

Note: Why is HTML rendered permissively? Because in the development of the World Wide Web it was found that it is more important that people can publish their content. More important than a few syntax errors in the code that would prevent it from being published. The Internet would probably not be as popular if the rules of the language had been stricter.

Active Learning: Examining Permissive Code

It's time to see how permissively HTML code is rendered.

  1. Please download the following file and save it locally: debug-example demo In this demo code there are intentionally some errors. The HTML is poorly written.
  2. Open this file in a browser. You should see:
  3. That looks a bit strange. Now take a look at the source code of the file:
  4. Let's explain the problems:
    • The paragraph and bullet items have no closing tags. In the picture above we can see that this has hardly any effect, since it is easy for the browser to recognize where the end of these elements should be.
    • The first element has no closing tag. The browser can't guess where to end the element, so all of the rest of the text is heavily highlighted.
    • In this section of the text, the elements were poorly nested. . Because of the previous problem, it is not possible to tell how this will be interpreted by the browser.
    • A closing double quotation mark was forgotten for the attribute value. This seems to be causing the biggest problem, the link didn't render in the first place.
  5. Let's look at the code that the browser used to render, as opposed to the written source code. For this we use the web developer tools, which are included in every modern browser (but not in the mobile version of the browser). If you don't know what Web Developer Tools are, take a few minutes to read this article: Explore Web Developer Tools
  6. In the DOM inspector, you can see what the rendered code looks like:
  7. With the help of the DOM inspector we can see the code that the browser tried to fix and how it tries to fix the HTML errors. (We used Firefox here to look at the code; other modern browsers should come to the same result.):
    • Closing tags have been added to the paragraphs and list items.
    • It is not clear where the first element should end, so the browser has given each separate block its own tag, right up to the end of the document!
    • The incorrectly nested elements were resolved by the browser as follows:
    • The link with the missing double quotation marks has been completely deleted. The last list item looks like this:

HTML validation

It is definitely better to use the correct syntax for HTML to avoid unwanted results. But how? With a small document like the one above, it's easy to go through it line by line to find the errors. But what to do with a very large HTML document?

The best strategy is to have the Markup Validation Service check the HTML document. This tool is provided by the W3C, the organization that also creates the specifications for HTML, CSS and other Internet technologies. An HTML document is given to this website, it examines the document for errors and returns a detailed error report.

Either a website, an uploaded HTML document or HTML code entered directly can be validated

Active learning: validating an HTML document

Let's put what we've learned into practice with our sample document here.

  1. First, open the Markup Validation Service in another browser tab.
  2. Go to the Validate by Direct Input tab. There you can check HTML code directly.
  3. Copy and paste the entire code from the sample document into the large text field on the Markup Validation Service website.
  4. click on Check.

This should give you a list of the errors and further information.

Interpreting the error messages correctly

Most of the time, the error messages are helpful, but sometimes difficult to understand. It takes a little practice to understand the cause of all error messages. Let's go through the error messages that are given and see what they mean. You can see that each error message is provided with a line and a column number so that the location of the error can be found.

  • "End tag implied, but there were open elements" (2 instances): This error message indicates that an element is open that should actually be closed. The line / column information points to the first line, which should be after the non-existent closed tag. This helps us see what is wrong.
  • "Unclosed element": This error message is easy to understand. An element was not closed and the row and column numbers point directly to the error.
  • "End tag violates nesting rules": Elements were nested incorrectly at the specified position.
  • "End of file reached when inside an attribute value. Ignoring tag": This error message is a bit cryptic. It shows that an attribute was not formed correctly somewhere, probably at the end of the document, because the end of the document is within the attribute value. Since the browser does not display the link at all, this could be the problem.
  • "End of file seen and there were open elements": This error message simply tells us that there are open elements in the document that must be closed. The line numbers indicate the last few lines in the document and this message comes with a line of code that shows an example of this in the document. Example: correct has been closed. The error comes from the non-closed element because the closing quotation marks are missing from one of the attribute values.

If you don't understand all the error messages right away, that's fine. It is best to try to fix one error after the other; other error messages usually disappear with it. Multiple error messages can be the result of a single error in the code.

When all errors have been eliminated, the following banner appears:

Summary

In this module