The tl;dr version is why does html that doesn't close tags properly still work error free?
I'm learning more and more HTML each day but I'm still quite a beginner. So I don't understand why badly written HTML without properly closing tags still works. I was using an email template for a task at work and was curious about the HTML behind it so I loaded to code into an editor.
I came across 9 separate tags that don't close: <td> <center> <div> <p> <div> <td> <tr> tbody> <table> The code starts with an <html> tag as it should, but in the <body> after a <table> and <tr>, it starts another <html> <head>... etc set of tags. In the two <style> tags, they both say say the same thing and have an extra closing brace li { margin-bottom: 10px; } }.
When I load just this code into my browser the page still visually appears how it is supposed to. In Firebug though, after the first body tag, it skips table, tr, html, head, and body, and goes straight to just showing the first <div>.
Why is it that a webpage (because I'm sure this must be a somewhat common thing out there) that has missing closure tags, extra <html> and <body> tags, etc still able to function properly?
I think this is an application of the Robustness Principle.
Be conservative in what you do, be liberal in what you accept from others
I'd argue this is an inevitable outcome in a landscape of competing browsers. If an HTML error prevents a site from working in browser A, but browser B is able to guess a correction, users will tend to use browser B, as A appears to be broken. This has been going on since Netscape 3 or earlier.