Запропонувати правкуПокращити цю статтюДопрацюйте відповідь до «Чому порядок тегів усередині <head> важливий?». Ваші зміни проходять модерацію перед публікацією.Потрібне підтвердженняКонтентЩо ви змінюєте🇺🇸EN🇺🇦UAПереглядЗаголовок (UA)Коротка відповідь (UA)Порядок тегів усередині **`<head>`** важливий, тому що браузер читає HTML послідовно зверху вниз, і від того, які інструкції він отримує першими, залежить швидкість завантаження сторінки, коректність відображення символів і спрацьовування стилів та скриптів. **Ключове:** Кодування (`<meta charset>`) має йти першим, стилі, до скриптів, а самі скрипти, ближче до кінця `<head>`, щоб не блокувати відображення сторінки.Показується над повною відповіддю для швидкого нагадування.Відповідь (UA)ЗображенняПорядок тегів усередині `<head>` **важливий**, тому що браузер читає HTML **послідовно зверху вниз**, і від того, які інструкції він отримує першими, залежить: - як швидко завантажиться сторінка, - чи правильно відобразяться символи, - чи спрацюють стилі та скрипти. --- ### 1. Кодування (`<meta charset>`) має йти першим Браузер **повинен знати кодування до того, як почне читати текст**. Якщо цей тег стоїть не першим, символи можуть відобразитися нечитабельними знаками. Правильно: ```html <head> <meta charset="UTF-8"> <title>Головна</title> </head> ``` Неправильно: ```html <head> <title>Головна</title> <meta charset="UTF-8"> </head> ``` → браузер може вже прочитати частину тексту «не в тому кодуванні». --- ### 2. Метадані (`<meta name="viewport">`, `<meta name="description">`) - до стилів і скриптів Вони не впливають на рендеринг напряму, але **допомагають пошуковим системам і мобільним пристроям** коректно інтерпретувати сторінку. Краще розмістити їх одразу після кодування та заголовка: ```html <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Опис сторінки"> ``` --- ### 3. Стилі (`<link>`, `<style>`) мають йти **до скриптів** Браузер спочатку застосовує оформлення, потім підключає функціональність. Якщо підключити скрипти раніше за CSS, елементи можуть відобразитися **неоформленими** (спалах «сирого» контенту). Правильний порядок: ```html <link rel="stylesheet" href="style.css"> <script src="main.js" defer></script> ``` --- ### 4. Скрипти (`<script>`): наприкінці `<head>` або перед `</body>` Без `defer` та `async` скрипти **блокують завантаження сторінки**. Тому їх розміщують **після всіх стилів і метаданих**, щоб не заважали відображенню. Оптимально: ```html <script src="app.js" defer></script> ``` --- ### 5. Порядок `<link>` теж важливий Якщо ви підключаєте кілька CSS-файлів, порядок визначає **пріоритет стилів**: останній підключений стиль може **перевизначити** попередні. Приклад: ```html <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="main.css"> <!-- перекриє reset --> ``` --- ### Підсумок - рекомендований порядок тегів усередині `<head>`: ```html <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="Опис сторінки"> <title>Назва сторінки</title> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <script src="script.js" defer></script> </head> ``` --- ### Чому це важливо: | Причина | Що станеться при порушенні | |---|---| | Неправильне кодування | Спотворення тексту | | Скрипти до стилів | «спалах» неоформленої сторінки | | Стилі у неправильному порядку | Непередбачуване оформлення | | Скрипти без defer | Уповільнення завантаження сторінки | --- **Простими словами:** порядок тегів у `<head>`, це як порядок інструкцій у рецепті. Якщо поміняти кроки місцями, страва (сторінка) все ще «звариться», але може вийти **повільно, криво або з неправильним смаком**.Для рев’юераПримітка для модератора (необов’язково)Бачить лише модератор. Прискорює рев’ю.