Head tags are appearing inside body

11
votes

I have a simple web page, and a title, meta, etc in my page. But when I debug it with Firebug, Chrome and Firefox's default debugger, all my tags inside the head show up in the body.

This is all my code of index.html

<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width"/>
    <link href="style.css" rel="stylesheet" />
</head>
<body>
    <canvas id="game"></canvas>

    <div id="mainmenu">
        <div id="title"></div>
        <a href="#" id="play" onclick="play()"></a>
        <!--<div id="ground"></div>-->
    </div>
    <script src="game.js"></script>
</body>
</html>

When I check the code in the debugger, all the elements inside the head tag are moved outside the head tag

enter image description here (sorry for my bad English)

2
html
I highly doubt that game.js is causing that... - Mr. Alien
I can't reproduce this in Firefox "inspect element". Notice that the original code does have XHTML <meta/> but the screenshot does not... - user2947761
Check in Chrome/Safari, it could be Firefox being a bit weird. - Benedict Lewis
Remove the link element and check, also be sure that all scripts and stylesheet don't get 404. - Rahil Wazir
This is generally caused by practically hidden characters before the <head> tag. A double BOM is common. - Alohci

2 Answers

3
votes

you should change encoding of your file to UTF-8

most of the times they all saved as UTF-8-BOM

open the file that your head tag is there with notepad++ then from encoding menu change "Encode in UTF-8-BOM" to "Encode in UTF-8" :)

0
votes

I fixed it by complete rewriting it, this is the update code:

<!DOCTYPE html>
<html>
    <head>
        <title>Flappy Bird</title><!-- yep, a flappy bird clone ;)-->
        <meta name="viewport" content="width=device-width"/>
        <link href="style.css" rel="stylesheet" />
    </head>
    <body>
        <!-- Het spel -->
        <canvas id="game"></canvas>
        <!-- Menu -->
        <div id="mainmenu">
            <div id="title"></div>
            <a href="#" id="play" onclick="play()"></a>
            <div id="ground"></div>

            <!-- Het script voor de game-->
            <script src="game.js"></script>
        </div>
    </body>
</html>

I really don't understand what's wrong with the previous code EDIT: A code editor placed invisible characters inside my code. The characters messed up the rendering I think.