infinum/eightshift-boilerplate

Head tag misplacement

odrastudio opened this issue · 2 comments

odrastudio commented

Hi there :)

Sorry for the previous empty issue, accidentally posted it whilst writing.

I have an issue with the rendered placement of a HEAD tag in the document. It seems wherever I place the head tag template it is always injected inside the BODY template which is wrong according to html documentation (from my research of course).

The actual head tag that is first rendered in the DOM only contains WP's emoji pack.

I am attaching a screenshot with the order of elements in the header.php of the theme. Do you maybe know what's the issue here?

Screenshot 2020-02-10 at 12 07 18

gabriel-glo commented

This issue is likely cause by the browser that tries to auto fix the invalid HTML code and fails to format it. Invalid HTML is caused by following:

  1. div and video elements before html - this is not valid HTML and these things need to go in body

  2. head tag is missing - In the original template there are head tags below the html tag

  3. template inclusion before the body tag - header.php template and mailto link need to be inside the body.

  4. Since there is no head tag, script tag is in invalid placement.

On the other hand JS libraries should not be included like that in WordPress. There are hooks and functions for enqueueing assets. We've also enabled that you can use external libraries by installing them with npm an importing them only were they are needed.

odrastudio commented

Thank you so much!

Now it works fully, had no idea about some of those things :)

I actually have one more issue that I can't seem to resolve, but will open another ticket for that.

Thank you once more :)