Ответ
Стили добавляют в <head>, чтобы они загружались и применялись до отображения контента, предотвращая FOUC (Flash of Unstyled Content). Это улучшает восприятие страницы пользователем.
Скрипты обычно помещают перед закрывающим </body>, чтобы:
- Не блокировать загрузку и отрисовку DOM (скрипты могут блокировать парсинг HTML).
- Гарантировать доступ к DOM-элементам (к моменту выполнения скрипта DOM уже построен).
Исключение — скрипты с атрибутами async или defer, их можно размещать в <head>, так как они не блокируют рендеринг.
Пример:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<!-- контент -->
<script src="app.js"></script>
</body>