HTMLBasic
Where should <script> and <link> be placed in HTML?
Where Should <script> Go?
At the Bottom of <body> (Traditional Approach)
<body>
<!-- Page content -->
<script src="app.js"></script>
</body>
When the browser encounters a <script> tag during HTML parsing, it pauses parsing, downloads and executes the JS file, which can cause a blank screen. Placing <script> before </body> ensures the DOM is rendered first.
Modern Approach: Use defer or async
<head>
<script src="app.js" defer></script>
</head>
With defer or async, you can place <script> back in <head> without blocking HTML parsing (see the async vs defer question for details).
Where Should <link> Go?
<head>
<link rel="stylesheet" href="style.css">
</head>
<link> (CSS stylesheets) should be placed in <head> because:
- Avoid FOUC (Flash of Unstyled Content): If CSS loads after HTML, the page briefly appears unstyled
- Browser rendering pipeline: The browser needs CSSOM to render, so loading CSS early speeds up the first render
Summary
| Tag | Recommended Placement | Reason |
|---|---|---|
<link> |
<head> |
Prevents FOUC, speeds up rendering |
<script> |
Bottom of <body> or <head> + defer |
Prevents blocking HTML parsing |
✦ AI Mock Interview
Type your answer and get instant AI feedback
Sign in to use AI scoring