-3

I have this strange issue that body is not where I wrote it in the code. First it was loading before head tag, now it's before header tag even thought it starts after. Also, If i delete it it gets generated in some weird places before head and header tag.... Any ideas how to fix this?

Here is the beginning:

<!DOCTYPE html> <!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <head>   <meta content="IE=edge" http-equiv="X-UA-Compatible">   <meta content="width=device-width, initial-scale=1" name="viewport">   <title>HUB International</title>   <meta content="A free HTML5/CSS3 template made exclusively for Codrops" name="description">   <meta content="html5 template, css3, one page, animations, agency, portfolio, web design" name="keywords">  <meta content="" name="author"><!-- Bootstrap -->   <!-- CPIT CSS -->  <link href="Assets/CPIT/css/main.css" rel="stylesheet">

  <!-- CSS -->   <link href="Assets/HUB/css/bootstrap.min.css" rel="stylesheet">     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">



  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->   <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->   <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]--> </head> <!--[if lt IE 7]>
        <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]--> <!-- open/close -->   <header class="new-header"> <!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>  <script src="Assets/CPIT/scripts/custom.js"></script>-->

    <div class="container">
      <a href="#"><img alt="Hub Logo" class="logo roundel" src="https://www.hubinternational.com/Assets/Hub/images/logo/HUB-Horizontal-With-Roundel.png"></a>
      <nav class="main-site-nav">
        <ul class="reset">
          <li>
            <a class="btn gs-btn contact_" href="https://www.hubinternational.com/contact-us/">Contact Us</a>
          </li>
        </ul>-
      </nav>
    </div>   </header>

  <!-- End Header     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script> 

<script>window.onload=function(){function a(a,b){var c=/^(?:file):/,d=new XMLHttpRequest,e=0;d.onreadystatechange=function(){4==d.readyState&&(e=d.status),c.test(location.href)&&d.responseText&&(e=200),4==d.readyState&&200==e&&(a.outerHTML=d.responseText)};try{d.open("GET",b,!0),d.send()}catch(f){}}var b,c=document.getElementsByTagName("*");for(b in c)c[b].hasAttribute&&c[b].hasAttribute("data-include")&&a(c[b],c[b].getAttribute("data-include"))};</script> <div data-include="header.html"></div>

<script src="Assets/CPIT/scripts/custom.js"></script>-->

<body>
Nanina
  • 117
  • 1
  • 8

1 Answers1

2

Putting elements into <html> other than <head> and <body> is a big no-no

The reason is because browsers are attempting to resolve your violation of the HTML specification. According to MDN, the permitted content for an <html> element is as follows:

Permitted content

One <head> element, followed by one <body> element.

This means that, if HTML is parsed that violates this specification, the browser is allowed to attempt to resolve it in any way it sees fit, including, as you described, injecting a <body> tag where you don't want it.

tl;dr

Just put your tags in the <head> and <body> where they belong respectively and you won't have any issues.

Community
  • 1
  • 1
Patrick Roberts
  • 49,224
  • 10
  • 102
  • 153
  • Thanks Patrick. Does that mean that I can't have header tag between head and body? – Nanina Jun 20 '17 at 17:55
  • @Nanina no. Only one ``, followed by one ``. No more, no less. If you try to do anything else, the browser will not guarantee that your structure will be preserved, since it is a violation of the HTML specification. – Patrick Roberts Jun 20 '17 at 17:57
  • So header has to be inside the body? Same for footer, inside body? I never paid attention to that, or is this some new rule? – Nanina Jun 20 '17 at 18:43
  • @Nanina that's always been the rule, it's not new... `
    ` and `
    ` are semantic alternatives for `
    ` to help with SEO that were introduced in HTML5.
     – Patrick Roberts Jun 20 '17 at 18:43