An Analysis of HTML and CSS Syntax Errors in a Web Development Course

Many people are first exposed to code through web development, yet little is known about the barriers beginners face in these formative experiences. In this article, we describe a study of undergraduate students enrolled in an introductory web development course taken by both computing majors and general education students. Using data collected during the initial weeks of the course, we investigate the nature of the syntax errors they make when learning HTML and CSS, and how they resolve them. This is accomplished through the deployment of openHTML, a lightweight web-based code editor that logs user activity. Our analysis reveals that nearly all students made syntax errors that remained unresolved in their assessments, and that these errors continued weeks into the course. Approximately 20% of these errors related to the relatively complex system of rules that dictates when it is valid for HTML elements to be nested in one another. On the other hand, 35% of errors related to the relatively simple tag syntax determining how HTML elements are nested. We also find that validation played a key role in resolving errors: While the majority of unresolved errors were present in untested code, nearly all of the errors that were detected through validation were eventually corrected. We conclude with a discussion of our findings and their implications for computing education.

[1]  Ankur Saxena,et al.  Towards a taxonomy of errors in HTML and CSS , 2013, ICER.

[2]  Frank Klassner Can Web development courses avoid obsolescence? , 2000, ITiCSE '00.

[3]  Susan Wiedenbeck,et al.  Children as webmakers: designing a web editor for beginners , 2013, IDC.

[4]  C. Michael Sperberg-McQueen,et al.  World Wide Web Consortium , 2009, Encyclopedia of Database Systems.

[5]  Alan F. Blackwell,et al.  First steps in programming: a rationale for attention investment models , 2002, Proceedings IEEE 2002 Symposia on Human Centric Computing Languages and Environments.

[6]  Terry Morris,et al.  Basics of Web Design: HTML5 and CSS3 , 2011 .

[7]  Ye Diana Wang,et al.  Teaching web development in the web 2.0 era , 2009, SIGITE '09.

[8]  Matthew C. Jadud,et al.  Methods and tools for exploring novice compilation behaviour , 2006, ICER '06.

[9]  Jens Rasmussen,et al.  Skills, rules, and knowledge; signals, signs, and symbols, and other distinctions in human performance models , 1983, IEEE Transactions on Systems, Man, and Cybernetics.

[10]  Susan Wiedenbeck,et al.  What do novices learn during program comprehension? , 1991, Int. J. Hum. Comput. Interact..

[11]  Sally Fincher,et al.  Research design: necessary bricolage , 2011, ICER.

[12]  Scott R. Klemmer,et al.  What would other programmers do: suggesting solutions to error messages , 2010, CHI.

[13]  P. Chandler,et al.  Cognitive Load While Learning to Use a Computer Program , 1996 .

[14]  Susan Wiedenbeck,et al.  Learning web development: challenges at an earlier stage of computing education , 2011, ICER.

[15]  Bertrand Meyer,et al.  Compiler error messages: what can help novices? , 2008, SIGCSE '08.

[16]  Philip J. Guo,et al.  Two studies of opportunistic programming: interleaving web foraging, learning, and writing code , 2009, CHI.

[17]  Billy B. L. Lim,et al.  Teaching Web development technologies in CS/IS curricula , 1998, SIGCSE '98.

[18]  Susan Wiedenbeck,et al.  Factors affecting the success of non-majors in learning to program , 2005, ICER '05.

[19]  Mark Guzdial,et al.  Learning on the job: characterizing the programming knowledge and learning strategies of web designers , 2010, CHI.

[20]  Rebecca T. Mercuri,et al.  Using HTML and JavaScript in introductory programming courses , 1998, SIGCSE '98.

[21]  Ljubomir Perkovic,et al.  File references, trees, and computational thinking , 2010, ITiCSE '10.

[22]  Roy D. Pea,et al.  The Buggy Path to The Development of Programming Expertise , 1987 .

[23]  Ellen Lowenfeld Walker,et al.  Teaching Web development with limited resources , 1999, SIGCSE '99.

[24]  Randy W. Connolly Awakening Rip Van Winkle: modernizing the computer science web curriculum , 2011, ITiCSE '11.

[25]  Mark Guzdial,et al.  Discovering computing: perspectives of web designers , 2010, ICER '10.

[26]  Mary Beth Rosson,et al.  Everyday Programming: Challenges and Opportunities for Informal Web Development , 2004, 2004 IEEE Symposium on Visual Languages - Human Centric Computing.

[27]  David Reed,et al.  Rethinking CS0 with JavaScript , 2001, SIGCSE '01.

[28]  Andreas Stefik,et al.  An Empirical Investigation into Programming Language Syntax , 2013, TOCE.

[29]  K. Sridharan A course on web languages and web-based applications , 2004, IEEE Transactions on Education.

[30]  A. Biemiller,et al.  Relationships between oral reading rates for letters, words, and simple text in the development of reading achievement. , 1977 .

[31]  Terry Morris,et al.  Basics of Web Design: HTML5 & CSS3 , 2011 .

[32]  Benedict duBoulay,et al.  Some Difficulties of Learning to Program , 1986 .

[33]  Mary Beth Rosson,et al.  Who, what, and how: a survey of informal and professional Web developers , 2005, 2005 IEEE Symposium on Visual Languages and Human-Centric Computing (VL/HCC'05).

[34]  Kevin Treu To teach the unteachable class: an experimental course in web-based application design , 2002, SIGCSE '02.

[35]  Elliot Soloway,et al.  Novice mistakes: are the folk wisdoms correct? , 1986, CACM.

[36]  Sébastien Paquet,et al.  Are wikis usable? , 2005, Int. Sym. Wikis.

[37]  Frederick W. B. Li,et al.  No tests required: comparing traditional and dynamic predictors of programming success , 2014, SIGCSE.