3.3 Helpful Tips for Beginners: Identifying Common HTML Mistakes

HTML is the love language by which a human can communicate with its machine. As experienced developer Jen Simmons put it in her HTML Essential Training videos, HTML bridges the gap between human language and computer language. Learning a new human language is no easy feat in itself, so the same goes for learning HTML. For a moment, I want you to think back to when you were forced to take a language class in school. Do you remember struggling with the tiniest details? Do you remember making a mistake over and over again until you got it right? When learning HTML for the first time be patient with yourself because you will likely face similar struggles. However, through my research on helpful HTML tips, I found one article that could potentially help shave some time off of repeating those mistakes. Below, I will be sharing and reviewing an excellent learning tool for common HTML mistakes made by beginners, and how to avoid them.

Photo by Florian Olivo on Unsplash

From the incredibly helpful website Young Coder, I found an article from 2019 called Three Beginner Mistakes in HTML by Matthew MacDonald. In this article, MacDonald outlines three common mistakes made by people who are starting to learn HTML. This is meant to be a helpful tool in the learning process of HTML coding with providing examples to help you troubleshoot any issues that may arise and their easy fixes. MacDonald provides three examples of common HTML problems beginners might face because of a simple mistake in their coding. These are:

  • Text not being displayed in the browser that was typed in the HTML (forgotten ‘>’ in an opening tag)
  • Text not being displayed after an image (forgotten quotation mark on the image coding)
  • Text formatting, italics, bold, etc., not being applied properly (forgotten ending tag backlash)

Each mistake is showcased through an interactive graphic that has the HTML on one-side and how the HTML is being interpreted into the browser. See screenshot below for reference.

Screenshot from Young Coders

After a quick synopsis of the issue, MacDonald then breaks down the mistake and how to fix it properly. He then suggests practicing correcting the mistake yourself by prompting you to click on a button on the graphic which will open a new window for the user to correct the mistake themselves.

The Review

Photo by ThisisEngineering RAEng on Unsplash
What I liked most about this article is that it’s interactive. For each of the three mistakes, there is an interactive graphic you can click on to view the HTML and how it is displayed in the browser. You’re then gently guided by MacDonald to finding the issue in the HTML code, and he explains why the code isn’t translating to the browser and he teaches you what to look for and how to fix the issue. Then you are prompted to click a button on the graphic to open a new window where you can practice correcting these mistakes yourself and watch the results happen in real-time on the browser side of the page. For anyone who is a visual learner, this can help immensely, because you can read how to fix the mistake a million times but most of the time it will only stick when you practice it yourself. These practice windows are the equivalent of the exercises you would do for learning a new language, they help to identify a problem and give you the tools to solve it on your own. MacDonald’s clear instructions in the little grey boxes of the article also help to make navigating these exercises easy. I think what would have made this article better was to maybe add just a little bit more of the HTML for websites because after learning the basics, HTML only gets more complicated. I also would’ve liked to have seen a series of articles, almost like Jen Simmons’s collection of HTML Essential videos, outlining other common mistakes when learning different aspects of HTML. I think that would’ve really elevated the level of helpfulness. Overall, this article was very legible and easy to follow, and it makes the thought of learning HTML not as scary or complicated as it may seem.

 

**NOTE: This chapter is a revised version of a blog post titled Helpful Tips For Beginners: Identifying Common HTML Mistakes on Journey to the Center of the Web blog

License

Icon for the Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License

Publishing for the Web Copyright © by TCOM 3335 (Spring 2021 and Fall 2022) at UHD is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License, except where otherwise noted.

Share This Book