Compared to programming in Scratch and Python, students seem to have fewer basic misconceptions about how to create web pages using HTML. However, novices often do make mistakes when coding in HTML. Common student errors in writing HTML include:
- Failing to include the ending tag. Ending tags are usually required or at least strongly recommended. While most browsers will display text properly without an ending paragraph tag </p>, good practice dictates that end tags be included. In some cases, missing end tags create real problems. For example, the student who inserts a <b> or <strong> tag but fails to add an ending tag may end up boldfacing everything in the document after that point. One exception is the break tag, <br />, which is considered an empty HTML element and has no end tag.
- Omitting quote marks. Quote marks are used to denote attributes in HTML tags, such as the href URL in the <a> tag or the src filename in an image tag. A missing quote mark in one of these tags will lead to an unexpected outcome.
- Improper nesting of tags. Tags should be closed in reverse order from the way they were opened. Like this: <p><strong><em>Boldfaced and italicized text</em></strong></p> but not like this <p><strong><em>Boldfaced and italicized text</p></strong></em>. Also, block elements, those that start a new line (e.g., <h1>, <p>, <table>, <div>), should not be nested inside inline elements, those that are displayed without starting a new line (e.g., <b>, <a>, <img>).
- Omitting the alt attribute. The alt attribute is now required for images and is important for the accessibility of users who use screen readers. It should always be included.
- Omitting the DOCTYPE declaration. The DOCTYPE declaration tells the browser what version of HTML you are using, so it is important to include it on all HTML documents.
- Using deprecated tags. Old HTML tags, like <center> and <font>, have now been replaced by CSS formatting. While browsers often still recognize these tags today, they are on the way out and so their use is discouraged. Use CSS instead.
