Misconception: Students frequently mix up CSS and HTML syntax when first learning web development.

  • For example, consider the following errors below when students conflate CSS syntax and HTML syntax when it comes to assigning colors and setting up a div respectively.
    • div { color=blue; }
      • Incorrectly uses the HTML syntax, the equal sign =, in this CSS style element. The correct syntax would be to use CSS assignment through the colon :.
      • The correct syntax is:
        • div {color:blue; }
    • <div color=red;>
      • Incorrectly tries to apply CSS to a div element using HTML syntax in an HTML div tag. If students wanted to use Inline Style, where you can write CSS code inline with HTML code, they would need to use correct CSS syntax.
      • The correct syntax is:
        • <div style="color:red;">
  • Another example is comment syntax. They might make the following mistakes:
    • / CSS comment
      • The correct syntax for a CSS comments is as follows:
        • /* Comment Goes Here */
    • // HTML comment
      • The correct syntax for HTML comments is as follows:
        • <!-- Comment Goes Here -->

More about this tip

External Source

"Towards a Taxonomy of Errors in HTML and CSS" by Thomas Park, Ankur Saxena, Swathi Jagannath, Susan Wiedenbeck, and Andrea Forte.