VS Code validation hic up

HTML & CSS
1

see

https://validator.w3.org/nu/?doc=https%3A%2F%2Fforallthetime.com%2Fhover%2Findex.html

i corrected that last slash (every where i was told)

<img src="https://forallthetime.com/hover/IMAGES/8.jpg" alt="nature scene">

still wont validate

now an img tag has no ending slash, yes?

please tell me where my problem is

please provide the correct code, and an explanation so i can learn here :slight_smile:

i did try reading the info message

dont understand what the info mesage is telling me

Trailing slash on void elements [has no effect](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-in-void-element-start-tags-do-not-mark-the-start-tags-as-self-closing) and [interacts badly with unquoted attribute values](https://github.com/validator/validator/wiki/Markup-%C2%BB-Void-elements#trailing-slashes-directly-preceded-by-unquoted-attribute-values).

From line 46, column 25; to line 46, column 61

`          <input type="checkbox" id="drop-3" />↩↩ `

also, top 4 infos i dont get

Info: Trailing slash on void elements has no effect and interacts badly with unquoted attribute values.

From line 17, column 9; to line 17, column 43

>↩ <input type="checkbox" id="drop" />↩

please correct my issue

i have tried everything i can think of, including adding tha last / just to see

please help me out

if its oubvious and i missed it, sorry

thanks!

2

That page validates with this message.

Screen Shot 2023-06-10 at 19.55.11
Screen Shot 2023-06-10 at 19.55.11822×564 33.3 KB

There are no errors you have fixed them all :slight_smile:

Document checking completed. No errors or warnings to show.

Source

  1. <!DOCTYPE html> ↩
  2. <html lang="en"> ↩
  3. `` ↩
  4. <head> ↩
  5. <meta charset="UTF-8"> ↩
  6. <meta http-equiv="X-UA-Compatible" content="IE=edge"> ↩
  7. <meta name="viewport" content="width=device-width, initial-scale=1.0"> ↩
  8. <title>Document</title> ↩
  9. <link rel="stylesheet" href="index.css"> ↩
  10. </head> ↩
  11. `` ↩
  12. <body> ↩
  13. <nav> ↩
  14. `` ↩
  15. `` ↩
  16. <label for="drop" class="toggle">Menu</label> ↩
  17. <input type="checkbox" id="drop"> ↩
  18. <ul class="menu"> ↩
  19. <li><a href="#">Home</a></li> ↩
  20. <li> ↩
  21. <!-- First Tier Drop Down --> ↩
  22. <label for="drop-1" class="toggle">Links +</label> ↩
  23. <a href="#">Links</a> ↩
  24. <input type="checkbox" id="drop-1"> ↩
  25. <ul> ↩
  26. <li><a href="#">Links 1</a></li> ↩
  27. <li><a href="#">Links 2</a></li> ↩
  28. <li><a href="#">Links 3</a></li> ↩
  29. </ul> ↩
  30. `` ↩
  31. </li> ↩
  32. <li> ↩
  33. `` ↩
  34. <!-- First Tier Drop Down --> ↩
  35. <label for="drop-2" class="toggle">Programs +</label> ↩
  36. <a href="#">Programs</a> ↩
  37. <input type="checkbox" id="drop-2"> ↩
  38. <ul> ↩
  39. <li><a href="#">Programs 1</a></li> ↩
  40. <li><a href="#">Programs 2</a></li> ↩
  41. <li> ↩
  42. `` ↩
  43. <!-- Second Tier Drop Down --> ↩
  44. <label for="drop-3" class="toggle">Tutorials +</label> ↩
  45. <a href="#">Tutorials</a> ↩
  46. <input type="checkbox" id="drop-3"> ↩
  47. `` ↩
  48. <ul> ↩
  49. <li><a href="#">Tutorials 1</a></li> ↩
  50. <li><a href="#">Tutorials 2</a></li> ↩
  51. <li><a href="#">Tutorials 3</a></li> ↩
  52. </ul> ↩
  53. </li> ↩
  54. </ul> ↩
  55. </li> ↩
  56. <li><a href="#">Articles</a></li> ↩
  57. <li><a href="#">Updates</a></li> ↩
  58. <li><a href="#">Contact</a></li> ↩
  59. <li><a href="#">About Us</a></li> ↩
  60. </ul> ↩
  61. </nav> ↩
  62. `` ↩
  63. `` ↩
  64. `` ↩
  65. <div class="container-fluid"> ↩
  66. `` ↩
  67. <div class="row"> ↩
  68. <div class="column"> ↩
  69. `` ↩
  70. `` ↩
  71. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, ab? Tempora exercitationem ↩
  72. voluptatibus, aliquid nam numquam excepturi quasi quidem cumque accusamus recusandae ex c ↩
  73. orrupti optio fuga saepe officia quae iste distinctio beatae omnis in. Voluptas aliquam sit modi ↩
  74. quibusdam est! </p> ↩
  75. `` ↩
  76. <img src="https://forallthetime.com/hover/IMAGES/8.jpg" alt="nature scene"> ↩
  77. <img src="https://forallthetime.com/hover/IMAGES/10.jpg" alt="nature scene"> ↩
  78. <img src="https://forallthetime.com/hover/IMAGES/12.jpg" alt="nature scene"> ↩
  79. <img src="https://forallthetime.com/hover/IMAGES/20.jpg" alt="nature scene"> ↩
  80. </div> ↩
  81. <div class="column"> ↩
  82. `` ↩
  83. <img src="https://forallthetime.com/hover/IMAGES/22.jpg" alt="nature scene"> ↩
  84. <img src="https://forallthetime.com/hover/IMAGES/24.jpg" alt="nature scene"> ↩
  85. <img src="https://forallthetime.com/hover/IMAGES/27.jpg" alt="nature scene"> ↩
  86. <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates, ab? Tempora exercitationem ↩
  87. voluptatibus, aliquid nam numquam excepturi quasi quidem cumque accusamus recusandae ex c ↩
  88. orrupti optio fuga saepe officia quae iste distinctio beatae omnis in. Voluptas aliquam sit modi ↩
  89. quibusdam est! </p> ↩
  90. <img src="https://forallthetime.com/hover/IMAGES/28.jpg" alt="nature scene"> ↩
  91. </div> ↩
  92. <div class="column"> ↩
  93. <img src="https://forallthetime.com/hover/IMAGES/29.jpg" alt="nature scene"> ↩
  94. <img src="https://forallthetime.com/hover/IMAGES/36.jpg" alt="nature scene"> ↩
  95. <img src="https://forallthetime.com/hover/IMAGES/c.jpg" alt="nature scene"> ↩
  96. <img src="https://forallthetime.com/hover/IMAGES/e.jpg" alt="nature scene"> ↩
  97. <img src="https://forallthetime.com/hover/IMAGES/u.jpg" alt="nature scene"> ↩
  98. </div> ↩
  99. </div> ↩
  100. </div> ↩
  101. `` ↩
  102. `` ↩
  103. `` ↩
  104. </body> ↩
  105. `` ↩
  106. </html>

Used the HTML parser.

Total execution time 14 milliseconds.

1 Like
3

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.