Browsers moving DOCTYPE and head tags inside body

I am in the process of building a website and the browser keeps rearranging my HTML for some unknown reason. This is my code:

<DOCTYPE! html>
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
      <p>This is some text</p>
  </body>
</html>

And here is a screenshot of what the browser uses:

Inspector

(Sorry, don't have enough reputation to insert a real image) This is all fine except when I want to use link to link an icon to the page, and it won't display unless it's in the head (I used the browser's dev tool and literally dragged the link up to the head and watched it appear immediately)

I've checked the source using the browser's developer tool and it looks exactly the same as in my code editor, so I know my web server isn't messing with it.

It does the same in Chrome and Firefox. It appears that they both use the head for script when a browser extension decides to put it there, but it does this even with no browser extensions.

I have tried the Notepad++ Encoding -> Convert to UTF-8 trick to remove the BOM character which supposedly fixes my issue but that did no good.

So how can I make the web page display as I wrote it?

Here is a download link to the file with the code snippet seen above: http://www.filedropper.com/testpage_1

Thanks for any help!

Solution

Your Doctype is invalid. Error recovery is causing it to be treated as text. Since text is not allowed outside the body, it implies the start of the body element.

The correct syntax is:

<!DOCTYPE html>

The exclamation mark needs to be the second character.

This would have been picked up if you had used a validator.