Unexpected token < in first line of HTML

html

html-minification

browser-cache-clearance

validation-checks

byAnton Shumikhin·Mar 9, 2025

If an Unexpected token < error haunts your dreams, check your server's response. Make sure the Content-Type header is set to text/html. This informs the browser to respect your HTML and not treat it as an alien (JavaScript).

<!-- Server response header -->
Content-Type: text/html

Next, inspect your script tags. Are they serving JS files properly with their src attribute? Ensure any inline JavaScript is freewheeling and not stuck in an error-jam.

<!-- Correct script tag Shining like Excalibur in the stone -->
<script src="correct-file.js"></script>

Oh, and keep an eye for rogue < characters, lurking in the shadows before <!DOCTYPE html>. They're often the main suspects in triggering this problem.

<!-- Clean start of HTML file Witness its pristine beauty -->
<!DOCTYPE html>
<html>
<!-- Rest of your HTML follows -->
</html>

Confirming script paths and file permissions

Is your script source correct and accessible? Does the core.js file exist without any roadblocks or permissions issues denying entry?

<script src="/path/to/core.js"></script>
<!-- No scary monsters (errors) here! -->

Ponder over issues related to tricky website path redirections and nasty HTML minification. Don't let shadows of confusion cast over the absolute URIs and potentially derail the route to JS files.

Conduct syntax operations and ensure orderly code

Typos and syntax errors: the silent murderers of error-free code. Surgically remove them from your HTML and JS files. Take the help from browser cache clearance to ensure your freshly baked script files have replaced those stale cookies.

<!-- Cleaned and washed Syntax -->
<script src="/path/to/core.js"></script> 
<!-- Closing script tag, land of the free and properly closed -->

Troubleshooting phantom resource conflicts

Look out for doppelganger or conflicting resources. Remove placeholder values (the "#"), as they contribute nothing but chaos. Withstand the tyranny of HTML minification. Shed light on any recent coded mischief that may have caused file loading woes.

Keeping your HTML crime-free with validation checks

Validation checks are your trusty comrades in arms. Validate your HTML regularly to mitigate the onslaught of corruption. If using AngularJS, take counsel from its documentation to better scale the walls of challenges.

GET /path/to/core.js HTTP/1.1
<!-- Successful GET request — no trespassers here! -->
Host: example.com

Check if the missing person report for your core.js script tag is valid and the individual is not just hiding at an unexpected location.

<!-- Correct script path -->
<script src="/js/core.js"></script> 
<!-- A journey of a thousand miles begins with a single script tag -->

Tackling common ruffians and brigands

Identify and face common challenges: browser file loading issues, JavaScript comments sneezed out or removed, and sudden implementations of changes in your code lair. Don your detective hat and keep an eye on your developer tools for any foul play during the file loading process.

explain-codes / Html / Unexpected token < in first line of HTML

Linked

How to defer inline Javascript?



How to detect if JavaScript is disabled?



Resource interpreted as Script but transferred with MIME type text/plain - for local file



Can't append `



Is it wrong to place the

