Previous task
Introduction to HTML and CSS7/13
Back to the list of tasks
  1. 1. Let's Go!
  2. 2. CSS in action
  3. 3. Consolidation
  4. 4. HTML basics
  5. 5. Single HTML tags
  6. 6. Attributes of HTML tags
  7. 7. Looking for errors in HTML
  8. 8. Basics of CSS
  9. 9. Other ways to connect CSS
  10. 10. CSS selectors
  11. 11. CSS classes
  12. 12. CSS properties and values
  13. 13. Looking for errors in CSS
Nest task
  • Courses
  • Sign up
  • Log in

Loading...
It will be ready in a few seconds.

  • Theory
  • Theory

Looking for errors in HTML

Let's familiarize ourselves with some common mistakes to avoid making them in the future.

HTML allows tags to be nested within each other, and one of the most common mistakes is incorrect nesting, for example:

<p>The <strong>text is</p> bold</strong>

In this example, the <p> tag closes before the <strong> tag, and this is an error.

Another type of error happens due to unfortunate typos and inattention, when one forgets the spaces between tag attributes or misspells their names.

So instructor Cupcake decided to update his resume late at night. He wanted to make it more concise, play with the design. But his inattention failed him. And now you can practice finding and fixing mistakes.

If you get lost, there's a hint at the bottom. Just don't look at it right away!

1. Note the order in which the tags are closed.

2. Are there enough spaces?

3. Check that the attributes are spelled correctly. There are not many of them there.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html> <head> <title>Looking for errors in HTML</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Instructor Cupcake [v.2]</h1> <!-- The first error is lost in this block --> <div class="error1"> <p> <em>In future courses, you'll often be assisted in learning the intricacies of HTML and CSS</p> by instructor Cupcake.</em> </div> <!-- There's a second mistake hidden here --> <div class="error2"> <imgsrc="keks-macho.jpg" class="photocard"> </div> <!-- And here's the third one --> <div class="error3"> <blockquote clas="nice-cite"> <p>Hi, my name is Cupcake and I'm your future instructor. I'm a web developer.</p> <p>See you in future courses!</p> </blockquote> </div> </body> </html>
CSS
body { font-family: "Georgia", serif; } .photocard { display: block; width: 300px; margin: 20px auto; box-shadow: 5px 5px 0 #e7471e; } .nice-cite { margin: 1.5em 0; padding: 0.5em 25px; line-height: 1.5; background-color: #f5f5f5; border-left: 5px solid #e7471e; }

The code has changed, click "Update" or enable autorun.

You have moved to another page

Click inside the mini-browser to highlight this window.

100%
GoalsCompleted
0

    Help Cupcake to fix the errors in the HTML code of his new resume:

    1. First mistake with an extra blank line,
    2. second error with a missing picture,
    3. a third error with a missing quote design.

    © 2023-2024, codehero.pro