Node HTML in body

I wrote a simple HTTP sever that serves some HTML. Here's the code :

var http = require('http');

http.createServer(function(req, res) {

  res.writeHeader(200, {"Content-Type": "text/html"});

  var html = '<DOCTYPE!>' +
    '  <html>' +
    '    <head>' +

    '      <title>' +
    '        Test page' +
    '      </title>' +

    '    </head>' +
    '  <body>' +

    '    <p>' +

    '      This is a test page !' +

    '    </p>' +

    '  </body>' +
    '  </html>';

  res.write(html);

  res.end();

}).listen(8080);

The resulting HTML page is the following :

<html>
<head>
</head>
<body>
<doctype!>
<title> Test page </title>
<p> This is a test page ! </p>
</doctype!>
</body>
</html>

So my questions are the following :

  • Why is the html "string" included in the body of the HTML ?
  • Is it possible to have indentation in the HTML besides using a template engine (jade) ?

And the last question is a bit separate :

  • If I have a page called index.html which only shows img.jpg. How can I know that a users request to img.jpg is related to index.html ? What I mean by "related" is : "that img.jpg is a linked / a dependency of index.html".

Thank you in advance !

That's not actually the resulting HTML. The HTML your server serves is exactly what you think it's serving... The browser sees something wrong with that HTML.

<DOCTYPE!>

The browser doesn't know what <DOCTYPE!> is, so it assumes it's some sort of arbitrary tag. When a browser sees an arbitrary tag, it assumes it was meant to be in the body. And with unbalanced-tag error correction, it closes your <DOCTYPE!> tag with </DOCTYPE!> at the end of the body.

What you meant to use was <!DOCTYPE> or more likely, <!DOCTYPE html>.

Why is the html "string" included in the body of the HTML ?

That's because <DOCTYPE!> isn't valid. It should be:

<!DOCTYPE html>

As is, it appears more like an element to the browser, which attempts to normalize the markup and places it into the <body>.

Is it possible to have indentation in the HTML besides using a template engine (jade) ?

Many template engines, including Jade, actually minify the markup, removing all unnecessary whitespace for smaller bandwidth consumption.

But, you could look at using a "beautifier," such as html.

If I have a page called index.html which only shows img.jpg. How can I know that a users request to img.jpg is related to index.html ? What I mean by "related" is : "that img.jpg is a linked / a dependency of index.html".

You can view "Resources" in most in-browser debuggers, which will list images, scripts, stylesheets, etc. that your page has requested.

You could also try web scraping your application, perhaps with jsdom:

jsdom.env('http://localhost:8080/', [
    'http://code.jquery.com/jquery.min.js'
],
function (err, window) {
    var $ = window.$;

    var hrefs = $('a[href]').map(function () {
        return $(this).attr('href');
    }).get();
    console.log(hrefs);
});