Vue - <head> elements appearing inside <body> - html

Using Vue as the frontend and Django as the backend. I am serving the production version of npm run build via django. index.html is automatically generated. However, the <head> elements are inside of <body>. I tried a few articles and sees no difference.
<!DOCTYPE html>
<html lang="">
<head>
<input type="hidden" name="csrfmiddlewaretoken" value="" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<!--[if IE]><link rel="icon" href="/static/favicon.ico"/><![endif]-->
<title></title>
manifests / css / app.js omitted
</head>
<body style="background-color: #131516;">
<noscript
><strong
>We're sorry but quicktrack doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong
></noscript
>
<div id="app"></div>
<script src="/static/js/chunk-vendors.3aa94991.js"></script>
<script src="/static/js/app.40e1aa2a.js"></script>
</body>
</html>
but when visiting the site this happens
Reading some other stackoverflow questions I found that this could be encoding issue.
file -i index.html shows charset=us-ascii.
I tried digging around webpack looking for encoding but I couldn't find one.
How should I go about fixing this issue?

No, it's not an encoding issue. It's a parsing issue. The HTML parser knows that the </html> and <body> tags (among others) are optional, and it knows that input elements go in the body, so when it sees the <input type="hidden" ...> tag, it assumes that the head element is complete and the body element has started. So it puts the input element and all following elements in the body.
It ignores the </html> and <body> tags when it eventually sees them, except that it merges the style attribute from the <body> tag on to the body element that it created earlier.
To fix, move the <input type="hidden" ...> tag to immediately after the <body> tag.

Related

Why is browser loading CSS/JS/img assets in unexpected order (not the order of HTML source)?

My understanding
So my understanding is, if you have a website with the following source:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="style.css">
<script src="script-head.js"></script>
</head>
<body>
<img width="400" src="image.jpg" />
<script src="script-closing.js"></script>
</body>
</html>
...the browser will queue the assets to be loaded in the following order (the order they appear in the page source):
style.css
script-head.js
image.jpg
script-closing.js
I have tested this simple HTML page in Chrome Dev Tools Network tab and the assets do load in that order.
All makes sense to me. So far so good.
The confusion
But in practice, I'm working on optimising the Largest Contentful Paint score of a website (if at all relevant, though I don't know how/why if we are just talking about page load, it's a Shopify website...). So I need to load the largest image on the screen quickly. And the loading isn't happening as I expect.
If we take this site as an example (this is not actually the site I am working on, but it seems to be happening on all the "larger" sites I've assessed. This one is Shopify too): https://www.luxyhair.com/
It has images (eg. //cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052) that are queued in the Network tab after JS scripts that are below it in the page source (eg. //cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370).
I'm not sure why this is happening.
<!doctype html>
<html lang="en">
<head>
....
<link href="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.css?v=10166822434284191108" rel="stylesheet" type="text/css" media="all" />
....
</head>
<body class="theme-index">
....
<img class="one-whole" src="//cdn.shopify.com/s/files/1/0066/0052/files/Homepage-Hero_1x1_Cool-Dark-Brown-Balayage_800x.jpg?v=1632412052" alt="" />
....
<script src="//cdn.shopify.com/s/files/1/0066/0052/t/207/assets/theme.min.js?v=18003517125669543370" type="text/javascript"></script>
....
</body>
</html>
My fundamental confusion here is why the browser is queuing assets not in the order they are listed in the HTML source.
How I can get an image to load before a bunch of JS scripts that are in the footer that aren't as important? I know about <link rel="preload"> but I can't use that as the image is defined in a page section that's not available for me to capture until after the <head> of the page (because of how Shopify's section templating engine works). I've tried inserting a <link rel="preload"> into the with an inline script, but as expected that hasn't worked. I have also tried adding importance="high" on the img tag. That also hasn't worked.

When form submitted: The character encoding of the html document was not declared (although it is)

I've seen a few questions relating to this, but almost all of them use php. I have just a simple html file, with an input and a button. I've tried using proposed solutions, but I always get the error after I submit the form with the button. I have included the character enconding as utf-8. I also have the <meta charset="utf-8" /> but commented out upon seeing other solutions on SO, which I have implemented to no avail.
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="index.js"></script>
<title>My Page</title>
</head>
<body>
<form name="data-form" enctype="multipart/form-data" method="post">
<input type="file" id="file-input">
<button id="form-btn" type="submit">Load File</button>
</form>
</body>
</html>
Based on my rudimentary understanding, this should read the file no problem. I'm trying to upload a JSON file, not sure if that's the issue. It is a valid JSON, I have checked and double-checked.
The index.js file that is linked, currently does not interact with the file upload in anyway, so in the interest of brevity I have not included it.
EDIT
I "solved" this, I guess. More like bypassed it. I wrote a JS function (readFile()) to read on click, and changed the button's type to type="button" and put an onclick="readFile()" and now it reads the file and eecutes properly. Hopefully maybe this will help someone else who has a similar problem. I guess this can be closed.
See edit. I used a modified version of the IFFE answer posted in this question How to access data of uploaded JSON file?. I'm not sure if this is "technically" the solution but it works for my purposes.

CKEditor deletes content between <title></title> tags

After a few days of searching and trying to solve, got nowhere.
CKEditor 4.7.0 is stripping the content between the <title></title> tags. I need CKEDitor to leave the title content alone no matter how / where the title tag is used.
I have tried:
allowedContent: true,
extraAllowedContent : 'title',
extraAllowedContent: 'title[*]',
config.allowedContent = true; (in config.js)
CKEDITOR.dtd.$removeEmpty['title'] = false; (in config.js)
No luck with above. Then tried suggestion here ckeditor deteles page <title></title> title which works, but I end up with:
<!DOCTYPE html>
<html>
<head>
<title>OK Title</title>
</head>
<body> </body>
</html>
<p><br />
<title></title>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Web template presented with pure css."><meta name="keywords" content="css template"></p>
<link href="style.css" rel="stylesheet" />
<link href="red.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /><!-- Header -->
<header class="w3-container w3-theme w3-padding" id="myHeader">
<div class="w3-center">
<h4>BEAUTIFUL RESPONSIVE WEB SITES</h4>
What I am doing is pasting into CKEditor an example CSS templates from https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_black&stacked=h
I understand this is not the way standard HTML should be displayed (not to spec), but I need to prevent CKEditor from modifying the title tag no matter, just ignore it and let me use it wherever:) This is just a simple project for classroom where no one sees source of page and I need title tag to show in browser tab when I project page on whiteboard for students.
UPDATE: did discover if I save with the source in view, CKEditor does not modify the title tag. Works this way but not when in visual mode which like to have:)
After what seemed like endless searches found some info on a drupal forum. Had so many links open lost track of exact site where obtained the info, sorry.
Solved the problem by adding the following to my config.js in CKEditor 4.7.0:
config.allowedContent = true;
config.protectedSource.push(/<title>[\s\S]*?<\/title>/gi); // allow content between <title></title>
Hope this will help someone else:)

Css styling html embedded code

When I embed a piece of html code, it seems that it won't be effected by the linked css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>worldmapper BETA</title>
<link rel="stylesheet" href="main.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<embed type="text/html" src="test.html">
</body>
</html>
Correct. <embed> acts like <iframe> (just not so well defined, so you should use <iframe> instead).
You are loading a separate document in a sub-window.
For the CSS to apply, you need to link the CSS to that document.
Consider using a template system which you apply either server side or at build time instead. Then your single web page will consist of a single HTML document.

Multiple Html <head> in the browser , caused by DreamWeaver bom

I am using DreamWeaver to code xHtml docs. in the program the code is valid but when I upload it in the inspect element I see double <head> tags and when I right-click to see the source file it seems o.k.
Is it because I'm using dreamweaver? what can be wrong?
the first error is : "Extra <html> encountered. Migrating attributes back to the original <html> element and ignoring the tag." - in line 3
The code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="the content of my doc" />
<meta name="description" content="this is an example document" />
<link rel="alternate" type="application/rss+xml" title="rss feeds" href="linkto/xml/feeds.xml" />
<!-- scripts -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>The Title</title>
</head>
<body>
<!-- content -->
</body>
</html>
Thank you very much.
No problem in Chromium 5.0.307.9 (Developer Build 39052) under Linux. I can't test it in Safari now.
EDIT: Proposed test case had nothing to do with this problem, neither could see any extra <head> tags. However, I looked at the Developer Tools of Safari and Chrome under Windows and Firebug in Firefox and all three rendered the DOM incorrectly. Just have a look at this picture and see that the first <link> tag has jumped into the body.
This problem also has nothing to do with Javascript because when turning off Javascript the result is the same, even more clear when comparing with the source code. Strange I didn't notice this under Linux.
The Developer Tools of the WebKit browsers give an even clearer picture (also notice the jQuery error message). I suspect the Unicode Byte-Order Mark (BOM) at the beginning of the file causing the problem: as you can see the BOM is moved to the <body> of the document, perhaps dragging several elements in the <head> with it. But also the unclosed <link> elements, as shown by the W3C validator, might give some issues, although browsers usually handle this without any problems. First get rid of the BOM in your file and see if the problem persists.
And I see another error: those tags beginning with <meta ... are called meta tags, not "meat tags". ;-)
You should have a title element what you write between
the <title></title> tags will been displayed in top bar of your browser
Just make sure your
</head>
tag has the slash in the actual file you're working on. That's an easy typo.
To remove BOM from your document, you can use this php function:
function removeBOM($str=""){
if(substr($str, 0,3) == pack("CCC",0xef,0xbb,0xbf)) {
$str=substr($str, 3);
}
return $str;}