Where should CSS links and JS scripts be placed in HTML?

HTML

The short answer

CSS <link> tags go in the <head> so styles are available before the page renders, preventing a flash of unstyled content. JavaScript <script> tags go at the end of <body> or in the <head> with defer/async attributes so they do not block page rendering.

CSS — always in the head

<head>
  <link rel="stylesheet" href="styles.css" />
</head>

CSS blocks rendering — the browser will not paint anything until it has processed all the stylesheets in the <head>. This is actually what you want. If CSS loaded after the page appeared, users would see unstyled content first, then a flash as styles applied.

JavaScript — end of body or defer

Option 1: End of body

<body>
  <!-- page content -->
  <script src="app.js"></script>
</body>

The script loads after the HTML is parsed. The user sees the page first, then JavaScript makes it interactive.

Option 2: Head with defer (recommended)

<head>
  <script src="app.js" defer></script>
</head>

defer tells the browser to download the script in parallel with HTML parsing but execute it only after the HTML is fully parsed. This is the best approach — the script downloads early (no wasted time) but does not block rendering.

Option 3: Head with async

<head>
  <script src="analytics.js" async></script>
</head>

async downloads the script in parallel and executes it as soon as it is ready — it does not wait for HTML parsing to finish. Use this for scripts that do not depend on the DOM (like analytics or ads).

The difference between defer and async

DownloadsExecutesOrder guaranteed
No attributeBlocks parsingImmediatelyYes
deferIn parallelAfter HTML parsedYes
asyncIn parallelAs soon as readyNo

defer scripts run in the order they appear in the HTML. async scripts run whenever they finish downloading, so the order is not guaranteed.

Interview Tip

The key points are: CSS in the head (blocks rendering, which is intentional), scripts with defer in the head (downloads early, executes after parsing). Knowing the difference between defer and async is the main follow-up question.

Why interviewers ask this

This tests your understanding of how browsers load and render pages. Putting scripts in the wrong place can block rendering and make the page feel slow. Interviewers want to see if you know the best practices and understand why they matter.

Table of Contents