Study: What Errors Do Beginners Make Learning HTML and CSS?

Share this article

At the end of March, Paul Irish tweeted about an academic paper called “Towards a Taxonomy of Errors in HTML and CSS” (PDF), which is a study that was conducted in 2013 at Drexel University in Philadelphia, PA, USA.

Although the study is now a couple of years old, Paul’s tweet gave the study a lot more industry-related attention. In this post, I thought it would be interesting to take a closer look at the study’s findings with some details on the methods used. I’ll also let you know what progress has been made since the study was conducted and how this can help beginners learning HTML and CSS.

The Study’s Participants and Methods

We all know typos and syntax misunderstandings are a part of the learning process for all of us, so it’s always interesting to see what kinds of mistakes different developers are making.

This study was not an extensive one, but was done similar to how a company might do usability testing. In this case, 20 participants were video recorded as they completed assigned coding tasks (more on the tasks in a moment) using what they call a “think-aloud protocol”, which encourages participants to vocalize their thought processes while completing tasks.

Although the study was limited to 20 participants, the individuals had differing levels of experience in HTML and CSS. The study also claims to “not exclude any background or profession”, so we can appreciate that they tried to ensure that a very diverse group took part.

The 20 participants were 7 females and 13 males, ranging in age from 18 to 47. It’s also noteworthy that only 2 participants indicated that web design is their profession.

The Purpose of the Study

As noted, most of the participants were not professional developers. But why focus the study on people with little or no experience with HTML and CSS? Participants used the first iteration of openHTML Editor, a text editor that’s part of openHTML, a “collaborative research project aimed at designing better tools and practices for learning web development.”

Further, here’s a quote from the study’s introductory sections:

Beginners who learn HTML and CSS encounter many opportunities to learn from the process of authoring code for a computer to interpret, making mistakes along the way, and recovering from those mistakes.

And further:

In this study, we seek to identify the errors people make while writing code in HTML and CSS, and examine the cognitive origins of these errors. These findings are instrumental in our continuing efforts to design a web editor for beginners that is a pedagogically superior alternative to existing tools.

As stated, the purpose of the study was to see what are some of the most common errors made when first learning HTML and CSS. They explain that the intent was to use the findings to design a better web editor (text editor). The study’s findings have value for anyone involved in creating or maintaining a text editor, to decide what kinds of errors to look for to assist beginners to make progress more rapidly.

The study aimed to answer the following questions:

  • What errors do people make when constructing web pages in HTML and CSS?
  • What are the sources of these errors?
  • Once made, how well do people recover from such errors?

The editor the participants used was intentionally simple and unfamiliar to all participants. This way they could observe the mistakes made in direct relation to HTML and CSS syntax, rather than allowing participants to be sidetracked by editor-related complexities.

Tasks Performed in the Study

The 20 participants were permitted 30 minutes per task, using whatever resources they normally used (including web searches). The tasks were:

  1. Create a heading, paragraph, ordered list, ordered sub-list.
  2. Create a hyperlink, add an image, hyperlink the image.
  3. Align text in a table, change row background colors, color a hyperlink and add a hover color.
  4. Fix a broken image, an unclosed tag, and an unmatched selector.
  5. Create and horizontally center a container div, and add a right sidebar in the container.

As you can see, these are as simple as it gets when it comes to HTML/CSS. But this study wasn’t just about the final results that students produced. In most cases, the results were probably fine. It was the process of completing the tasks that was studied.

For example, hundreds of errors were tracked during the video recordings, but most of those were caught and corrected by the participants. Although these end up as corrected errors, they still constitute part of what was slowing down the learners. And so, by studying these common, temporary errors, they can figure out ways to help beginners learn faster and with fewer roadblocks.

How Errors Were Categorized

The errors made were placed under one of three types. And again, it should be emphasized here that these errors were not errors that were observed when observing tasks that had been completed; these are errors that were observed during the process of completing the tasks, whether the errors were corrected or not:

Skill-based Errors

These are unintended actions, true “typos” that could be caused by a number of factors, but are not caused by a lack of understanding. An example given was one participant who was told to add alt text to an image. The error looked something like this:

<img src="image.gif" alt=My Image"/>

Note the missing opening quotes. This was simply a typo, and was fixed shortly after being made.

Rule-based Errors

These errors are unintentional errors, but are caused by misunderstandings. They could be bad rules being applied, or misapplying a previously understood syntax rule. The example given for this category is an interesting one. The participant did the following in the HTML:

<div class="2"></div>

And then in the CSS:

.2 {
  background-color: blue;
}

But, as many of you might know, you can’t start a class name with a digit, as shown in this demo. So the basic syntax was written correctly, but a bad rule was applied.

Knowledge-based Errors

Also called “breakdowns”, these errors occur at higher conceptual levels where unfamiliar situations are presented when a problem needs to be solved. They result from an incomplete understanding of the situation and often lead to experimentation and web searches (we’ve all been there!).

The example given in this case is a lengthy one, and kind of funny (hey, we’ve all been there too!). The task was to align text in a table cell to the right. The participant attempts numerous steps to get this right, including:

  • Copying and pasting deprecated code in an incorrect manner (<align=right>).
  • Moving the incorrect code into the table cell and between the <tr> and <td> tags.
  • Searching the web multiple times.
  • Copying and pasting HTML into his CSS.
  • Putting dummy text into the editor to see if the editor is working.

The participant eventually gave up after 6 minutes, moving on to something else.

Results of the Study

In the end, the number of errors under the three aforementioned categories broke down as follows:

  • 70.9% of all errors were skill-based errors.
  • 16.9% were rule-based errors.
  • 12.1% were knowledge-based errors.

As mentioned, most of the errors were resolved during the task completion process, but some were not, and they broke down like this:

  • 4.3% of all skill-based errors were unresolved.
  • 39.6% of rule-based errors were unresolved.
  • 52.1% of knowledge-based errors were unresolved.

The skill-based errors included, among others, the following:

  • Typographical (the majority)
  • Unclosed tags
  • Missing delimiter (e.g. semi-colon for CSS lines)
  • Mixing CSS syntax with HTML, or vice versa

The rule-based errors included:

  • Using obsolete elements
  • Invalid or non-existent elements, attributes, or properties
  • Using the wrong name (e.g. font-color instead of just color)
  • Errors in HTML lists (this was surprising, but many participants put things like <p> elements in place of <li> elements; others added numbers to ordered lists unnecessarily)
  • Incorrectly written inline CSS (which is a double-whammy of sorts)
  • Invisible elements (this is when an element doesn’t appear on the page because there’s no content, no height, etc., and the participant temporarily can’t figure out why)

The knowledge-based errors included:

  • Incorrect basic syntax for HTML elements, attributes, and values (e.g. <align="right">).
  • Incorrect basic CSS and selector syntax (e.g. writing div: color: red or .div { }).
  • Misunderstandings of the box model and CSS positioning.

What Progress Has Been Made as a Result?

Seeing as this is a two-year-old study, I contacted two of the study’s authors and asked if any progress had been made in building tools based on these or other findings. Thomas Park, one of the authors, had some encouraging progress to report:

We have a few design efforts that have come out of our study. Right now we’re working on a tool called Snowball for building modern, interactive articles that aims at reducing errors for beginners through the use of scoped (but accessible) HTML/CSS/JS components.

He also explained:

[W]e have ongoing collaboration with Mozilla Webmaker. We’ve sketched out an error feedback system designed around the cognitive source of HTML/CSS errors based on the 2013 study (e.g., whether a particular misconception or attentional/typographical slip is at the root). We intend to build it as a Brackets extension but don’t have much that is concrete yet.

Final Thoughts

The 2013 study wasn’t perfect, but it’s a good start and similar studies for HTML or CSS don’t seem to exist (at least I haven’t seen any). Additionally, Thomas Park pointed me to a follow-up study that I’ll try to cover in a future article.

As already mentioned, most errors get caught and corrected. But these slow down progress for learners especially when the correction isn’t conceptually sound but only gives the appearance of being corrected. Validation and code linters can help, but that’s usually a separate step. Even when coding errors are indicated in text editors via colors or error indicators, sometimes that’s not enough. I think text editors designed for beginners should give clear indications of errors along with an optional inline text explanation of what is wrong and how to fix it.

Although such a process might somewhat slow down the completion of tasks, I think with more detailed error explanations the larger concepts will be made clearer to beginners at an earlier stage, resulting in stronger developers when new skills are learned — because the skills will be learned correctly.

I think the following statement from the study’s concluding remarks nicely sums up my view on this:

When a beginner writes code that has many errors but still renders as desired, they receive positive feedback in the form of the properly formatted web page. These errors are latent, remain unresolved, and reinforce faulty understandings that can become difficult to overcome.

Many more details are made available in the study itself, including tables detailing the numbers of each kind of error made, so check it out if you want to delve more into the topic.

Frequently Asked Questions (FAQs) about HTML and CSS Errors

Why does my HTML code not display as expected in the browser?

There could be several reasons why your HTML code is not displaying as expected. One common mistake beginners make is not closing tags properly. Every opening tag in HTML should have a corresponding closing tag. Another common error is incorrect nesting of tags. The order in which you open and close your tags matters. Also, ensure that you’re using the correct syntax for your HTML elements and attributes. Lastly, check if your file is saved with the .html extension and that you’re opening it in a web browser.

Why is my CSS not working?

If your CSS is not working, it could be due to a few reasons. Firstly, check if your CSS file is linked correctly to your HTML file. The link tag should be placed within the head tag of your HTML document. Secondly, ensure that your CSS selectors are correct and that they match the HTML elements you want to style. Also, check for any syntax errors in your CSS code, such as missing semicolons or braces. Lastly, remember that CSS rules are applied in order of specificity and inheritance, so make sure your rules are not being overridden by others.

What does a 404 error mean?

A 404 error is a standard HTTP status code that means the server could not find the requested URL. This usually happens when the URL is typed incorrectly, the page has been moved or deleted, or the site’s structure has been changed. To fix this, check the URL for any typos, ensure the page still exists, or update any outdated links.

How can I validate my HTML and CSS code?

You can validate your HTML and CSS code using online validation services like the W3C Markup Validation Service. These tools will check your code for any syntax errors or violations of standards and provide you with a report of any issues found.

Why is my webpage not responsive on different devices?

If your webpage is not responsive, it means it’s not properly optimized for different screen sizes. This could be due to a lack of a viewport meta tag in your HTML document, or not using responsive units like percentages or ems in your CSS. Also, consider using media queries to apply different styles for different screen sizes.

What does a 500 error mean?

A 500 error is a server-side error that indicates there’s been a problem with the website’s server. This could be due to a scripting error, a server overload, or a server configuration issue. To resolve this, you may need to contact your hosting provider or a web developer.

Why are my images not displaying on my webpage?

If your images are not displaying, check if the image file paths in your HTML code are correct. Also, ensure the images are in the correct format (like .jpg, .png, .gif) and that they’re not too large in size, which could cause slow loading times.

How can I make my webpage load faster?

To make your webpage load faster, optimize your images for the web, minify your HTML, CSS, and JavaScript files, and use a content delivery network (CDN) to serve your files. Also, consider implementing lazy loading for images and prioritizing above-the-fold content.

Why is my form not submitting data?

If your form is not submitting data, check if your form tags are correctly nested and that your input fields have the correct name attributes. Also, ensure your form has a submit button and that the action attribute in your form tag is set to the correct URL.

How can I improve the accessibility of my webpage?

To improve the accessibility of your webpage, use semantic HTML elements, provide alternative text for images, ensure your site is keyboard navigable, and use ARIA roles and properties where necessary. Also, consider the color contrast on your site for visually impaired users.

Louis LazarisLouis Lazaris
View Author

Louis is a front-end developer, writer, and author who has been involved in the web dev industry since 2000. He blogs at Impressive Webs and curates Web Tools Weekly, a newsletter for front-end developers with a focus on tools.

css beginnerscss errorshtml errorslearning htmlLouisLRalphM
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week