Search code examples
htmlejs

EJS include statement forces html partial content into the body tag

I'm having troubles with EJS forcing the content of an included ejs partial element into the body tag.

index.ejs

<!DOCTYPE html>

<html>
    <body>
        <p>Hello World!</p>
    </body>

    <footer>
        <%- include("../partials/footer") %>
    </footer>
</html>

partials/footer.ejs

<div>
    <h3>Legal</h3>
    <a href="/legal/terms">Terms of Service</a>
</div>

Although the result of this is the footer being inside of the body tag as you can see from the inspect page tab:

enter image description here

Solution

  • This is how browsers parse HTML. It has nothing to do with EJS.

    The footer element is not allowed to be a child of the html element (which has a content model saying that it must contain exactly A head element followed by a body element) so, to recover from your error, the browser moves the footer inside the body element where it is allowed.

    You might be confusing the body element for the main element.