Кодирование URL в HTML

Charset решает, как HTML-файл превращает байты в буквы. Кодирование URL (percent-encoding) — другая задача: как символы безопасно путешествуют внутри URL — в ссылках, редиректах и данных query форм — не ломая собственную структуру адреса. Пробелы, буквы вне ASCII и зарезервированные знаки часто нуждаются в форме % + hex, чтобы браузеры и серверы одинаково понимали смысл.

Что такое кодирование URL

У URL есть зарезервированные символы, которые структурируют адрес: ? начинает query, & разделяет пары, = связывает имена со значениями, # начинает фрагмент. Если эти символы появляются как данные внутри значения, их нужно закодировать, чтобы их не приняли за структуру. Небезопасные символы вроде пробелов тоже кодируют для надёжной передачи.

Прямой ответ

Кодирование URL заменяет символ на % и две шестнадцатеричные цифры. Классический пример: пробел становится %20. Многие браузеры и HTML-формы кодируют значения query автоматически при отправке. Идея всё равно нужна, когда вы вручную пишете query в href, отлаживаете битую ссылку или читаете адресную строку, полную percent-кодов.

Частые percent-кодировки

Закодированный query в ссылке

Самая ясная демонстрация для начинающих — вручную написать поисковый query с пробелом. Закодируйте пробел в значении; структурные ? и = оставьте как есть.

Читаем пример

• search.html — путь; когда вы контролируете имена файлов, держите их простыми
• ?q= начинает параметр query с именем q
• html%20links — значение «html links», где пробел закодирован как %20
• Видимый текст ссылки может оставаться читаемым для людей; кодирование принадлежит URL

Предпочитайте чистые имена файлов; кодируйте значения

Кодировать целиком имя страницы с пробелами неудобно для всех. Предпочитайте my-page.html вместо my page.html. Percent-encoding используйте в основном для значений query и спецсимволов внутри URL, которые вам приходится собирать вручную.

Формы и браузеры часто помогают

Когда пользователь отправляет HTML-форму с method="get", браузеры обычно сами кодируют значения полей в query string. Это не снимает необходимости понимать %20, когда вы читаете логи, делитесь ссылками или пишете href вручную. Знание шаблона ускоряет отладку.

Это не то же самое, что HTML-сущности

В HTML-тексте & — сущность для символа амперсанда. В URL амперсанд, который является данными, может выглядеть как %26. Разные инструменты, разные контексты. Точно так же файловый charset UTF-8 касается декодирования файла .html — он не заменяет percent-encoding внутри URL.

Не-ASCII в URL (заметка для начинающих)

Буквы вне базового ASCII в реальных адресах могут появляться как более длинные percent-последовательности. Запоминать эти таблицы в этом уроке не нужно. Запомните правило: когда символ небезопасен или зарезервирован как данные, percent-encoding — способ, которым URL его переносит. Для учебных страниц держите демо-query на простой латинице плюс %20, пока не почувствуете уверенность.

Практика в редакторе

1. Создайте ссылку, в href которой есть query вроде ?q=hello%20world.
2. Откройте ссылку и посмотрите на адресную строку.
3. Замените %20 на сырой пробел в исходнике, перезагрузите и сравните, как браузер нормализует или ломает URL.
4. Переименуйте практический файл, используя дефисы вместо пробелов, и обновите ссылки.
5. Напишите одно значение query, которому понадобится %26, если амперсанд — часть данных — затем убедитесь, что вы не закодировали структурный & между параметрами.

Лёгкие ошибки

• Вставка сырых пробелов в URL в коде без проверки результата
• Случайное percent-кодирование схемы https:// или всего структурного каркаса
• Путаница HTML-сущностей (&) с URL-кодами (%26)
• Пробелы в каждом имени файла в надежде, что кодирование навсегда спасёт навигацию
• Кодирование структурных ? / & / =, которые должны оставаться синтаксисом URL между частями

Кратко

• Кодирование URL использует % плюс две hex-цифры (пробел → %20)
• Зарезервированные и небезопасные символы нужно кодировать, когда они — данные
• Предпочитайте простые имена файлов; кодируйте значения query при ручной сборке
• Формы и браузеры часто кодируют автоматически при отправке
• Percent-encoding — не та же задача, что HTML-сущности или файловый charset