Seeing How Browsers React. and Not That Type of React

Adrian Miasik

2019-11-03

I noticed something in the previous post. I've tested this file on numerous web browsers and each one reacts slightly differently. Let me show you.



First up is Firefox

This file index.html works on Firefox. But I noticed that the console did spit out an error:
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.

Alright that should be pretty easy to address. When I was learning web dev before, I remember that each HTML page has to adhere to a certain HTML structure. I also remember that our first HTML element in any document should be <!DOCTYPE html> . Hopefully that addresses our character encoding error.


Second up is Google Chrome

This file works in Chrome. The console spits out no errors or warnings and accepts this page as is. Great!


Third up is Internet Explorer 11

This file works in Internet Explorer 11. The console spits out no errors or warnings and accepts this page as is. Also great!


Last up is Microsoft Edge

This file works in Microsoft Edge but we do get certain console logs.
Let's take a look at them:

HTML1300: Navigation occurred.
HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: " ".
HTML1502: Unexpected DOCTYPE. Only one DOCTYPE is allowed and it must occur before any elements.
HTML1407: Invalid tag name. First character should match [a-zA-Z].

Let's go through them all individually:


HTML1300: Navigation occurred.

This is just an information log. Microsoft Edge is telling us that the browser navigated to a new page or the current page has been refreshed.


HTML1527: DOCTYPE expected. Consider adding a valid HTML5 doctype: "<!DOCTYPE html>".

This warning is telling us that the browser is expecting a DOCTYPE . Just like the Firefox section, we can address this by placing <!DOCTYPE html> at the top of our HTML page.


HTML1502: Unexpected DOCTYPE. Only one DOCTYPE is allowed and it must occur before any elements.

This warning is telling us that the browser came across a unexpected DOCTYPE and only one may exists before any elements. Hopefully placing <!DOCTYPE html> at the top of our file fixes this as well.


HTML1407: Invalid tag name. First character should match [a-zA-Z].

This is complaining about - being the first character in this file. But since we are replacing the first line with the <!DOCTYPE html> , this should no longer be an issue. Let's apply these solutions and check back later.


Alright so what have we noticed? Out of my sample size of 4 browsers, all of them were able to view this file just fine. In fact all four browsers auto-generated a proper HTML structure while putting all the text you are reading into one paragraph element. Neat-o! Firefox was able to tell us our file was incorrect and how it could be incorrect in some browsers. Which is really great to see actually! Microsoft Edge was expecting a DOCTYPE but didn't tell us why nor how. It did however provide us a solution to fix it though. Google Chrome and Internet Explorer 11 had no problems with our files. Cool.


TL;DR:

So, what's the takeaway from all this? Welp, this tells us that most browsers are not the same. For better or for worse, each browser will most likely parse each website slightly differently. (I'm not going to get to far into that, but this does become a headache later on)

My next steps are clear. Let's structure this file using HTML. See you soon!