CODEWITHSUNDEEP
htmlcsshead
Zohar Chiprut
Zohar Chiprut

Reputation: 908

<Head> appears inside the <body>

The following html intepreted wrongly.

Using debug tool of chrome, the <head> appears inside the <body>.

Why is that happening ? Code:

<!DOCTYPE html>
<html>
<hed>
    <meta charset="utf-8"/>
    <link href="_css/style.css" rel="stylesheet" />
    <title>Position test</title>
</hed>
<body>
    <div class="block">
        <p>this p inside a div</p>
    </div>
    <table>
    <tr>
        <td><p>this p inside td</p></td>
        <td></td>
        </tr>
    </table>
       <div class="table">
        <p>this p inside a div displayed as a table</p>
    </div>
</body>
</html>

Result: https://zoharch.github.io/position/index.html

Upvotes: 1

Views: 1299

Answers (4)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201538

It happens because the <hed> tag (misspelling of <head>) is not recognized, so the browser treats it as starting a hed element of unknown type. Since no such element is allowed in a head element, the browser implies the start of a body element, containing all the rest in the document. Before this, it implies an empty head element.

In most situations, this does not really matter, since the division of an HTML document to head and body elements is syntactical and “philosophical”. The meta, link, and title element work normally in practice, even though the browser treats them as being inside body. But of course you should correct the misspellings of the <head> and </head> tags.

Upvotes: 1

Shah Zaib
Shah Zaib

Reputation: 25

it should be like this just copy paste this head and it will be OK :) 

<head>
  <meta charset="utf-8">
  <link href="_css/style.css" rel="stylesheet">
  <title>Position test</title>
</head>

Upvotes: 0

BizedKhan
BizedKhan

Reputation: 644

Your spelling is not correct for head. you wrote hed.

it will be:

<head></head>

Upvotes: 3

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Because you have a error in the head tag

<hed> should be <head> </hed> should be </head>

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <link href="_css/style.css" rel="stylesheet" />
    <title>Position test</title>
</head>
<body>
    <div class="block">
        <p>this p inside a div</p>
    </div>
    <table>
    <tr>
        <td><p>this p inside td</p></td>
        <td></td>
        </tr>
    </table>
       <div class="table">
        <p>this p inside a div displayed as a table</p>
    </div>
</body>
</html>

Upvotes: 3

Related Questions