There's a lot I want to talk about on here:
There's a lot of "
"s in there. Today I won't be covering any of that just yet. Instead I wanted to do another "browser status
report" to see how browsers parses this site after
🦴 The Bones Update 🦴
and try to solve and obvious browser errors we see. And I also need to address a mistake I've made in my 2nd
post. (Post #4 and we are already addressing a mistake?) Let's get into it!
First up is Firefox.
So last time Firefox gave us this 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.And this time Firefox is giving us this 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.
So what gives? We are getting the same error. You said defining the DOCTYPE by placing
at the top of the html file will resolve this error.
Nope. I was wrong.
I realized that defining the document type is not the same as defining the character encoding.
Also I realized I never explained what defining the document type was...So here goes!
solves the document type warnings and lets the browser know that it will be reading this as an HTML document.
Defining the document type is often referred to as
. (Document Type Definition). So why do we have to do this DTD declaration? Well, believe it or not but there
are different types of HTML. And most browsers don't know which one you are using. The browser will actually try
to "doctype sniff" and guess the document type you are using if one is not provided. But since programmers love
being explicit, just define it. Just remember that there is one declaration that almost everyone uses,
. Everything else is pretty much just a legacy thing.
But how do we define the character encoding? And what is character encoding?
Great questions. I did a bunch of research on this since I was curious about this too. In fact, I'll be sharing my findings in another post.
But for the scope of this post, I'm not going to go into that rabbit hole right now. If you are interested in hearing a brief explanation of character encoding, ASCII, Unicode, and UTF-8. Make sure to watch my GitHub releases page. ;)
Okay sure, I'll ignore what character encoding is for now. How do I solve this character encoding error?
There are actually many solutions to this answer. But...for a lot of modern web pages you are probably going to resort to character encoding UTF-8. (especially for western characters)
For now we can solve this error by adding this to be the first HTML element inside our head:
Second up is Google Chrome.
Works just fine!
Next up is Internet Explorer 11.
Loads fine. However I did realize, the emotes in my previous post title "The Bones Update" are not being displayed properly. Instead of bones, there are blue hollow boxes. And the emotes within the post look different and only have a black and white color scheme. Interesting observation. Besides that, everything looks fine.
Last up is Microsoft Edge.
Microsoft Edge, renders everything just fine. However we do have 6 console messages. (1 info, 5 warnings) Let's go through them:
HTML1300: Navigation occurred.
This is that same simple information log, I'm going to ignore this again.
HTML1402: Character reference is missing an ending semicolon ";".
This is the warning that gets printed 5 times. Apparently I've been creating emoji's in HTML incorrectly. For instance I've originally created the eyes emoji by typing in & # 1 2 9 4 6 0 in HTML. (with no spaces) After a quick google search of the error it seems any special character in HTML must end in a semicolon.
Alright, that's all 4 browsers I'll be using for this browser report.
Looks like we now have our action items:
<meta charset="UTF-8">to the first thing in our HTML head