Получить профессию в Skypro
Ошибка в HTML5 валидаторе W3C с URL Google шрифтов
Быстрый ответ
Для исправления ошибок валидации HTML5, связанных с URL Google Fonts, следует заменить символ & на &. Так, строка ?family=Open+Sans&Roboto должна превратиться в ?family=Open+Sans&Roboto, что сделает ссылки на шрифты валидными.
Пример исправленной ссылки:
<!-- Всегда экранируйте символы при работе в веб-разработке -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans&Roboto" rel="stylesheet">Кроме того, для полной корректности URL следует закодировать специальные символы, такие как |. Он должен быть заменен на %7C. Вот пример идеально составленного URL:
Исправленный URL:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic%7CPT+Serif:400,400italic%7CBree+Serif" rel="stylesheet">Для соблюдения валидности HTML5 необходимо кодировать каждый специальный символ в URL. В таблице кодирования символов на "http://www.utf8-chartable.de/" представлены подробные рекомендации.
Типичные ошибки и способы их устранения
Внимательность к символам
Проблемы с кодировкой UTF-8 часто возникают при формировании URL. В частности, пробелы или знаки препинания требуют особой кодировки. Например, пробел можно закодировать как %20 или заменить на +.
Следите за обновлениями
Правила валидаторов HTML5 могут меняться с течением времени, поэтому код, который ранее проходил проверку, сейчас может быть отклонен. Постоянно проверяйте наличие обновлений валидатора и следите за обсуждениями на профессиональных форумах.
Бонус
Тщательное кодирование URL важно не только для соблюдения стандартов HTML5, но и для обеспечения безопасности сайта и оптимизации загрузки веб-шрифтов.
Альтернативные решения
Разделите ссылки
Если кодирование URL кажется вам сложным, можно разбить URL Google Fonts на несколько отдельных ссылок, как показано ниже:
<!-- Разделяем ссылки для удобства -->
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif" rel="stylesheet">Используйте @import в CSS
Альтернативой служит использование @import в CSS-файлах:
/* Подключаем шрифты через @import для удобства */
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,300,800,700,400italic');
@import url('https://fonts.googleapis.com/css?family=PT+Serif:400,400italic');
@import url('https://fonts.googleapis.com/css?family=Bree+Serif');Это поможет достичь компактности и эффективности вашего CSS.
Визуализация
Представьте себя архитектором структуры вашего сайта:
Блок 1: <head>...</head>
Блок 2: <body>...</body>
Блок 3: Внешняя ссылка на Google Fonts
Существующая проблема:
🏗️ 3: Внешняя ссылка на Google Fonts 🚫 Нарушает валидацию структуры HTML5
Решение:
💡 Используйте корректное кодирование символов URL:
| Оригинальный символ | Кодированный символ |
|---|---|
| %20 (пробел) | + или %20 |
{ | %7B |
} | %7D |
Теперь структура вашего сайта валидна и корректно настроена.
Полезные материалы
- Служба проверки разметки W3C — официальный валидатор HTML.
- Google Fonts — инструмент для выбора и применения шрифтов в веб-разработке.
- Стандарт HTML — информация об использовании элемента 'link' в HTML5.
- Начало работы с API Google Fonts — инструкция по настройке веб-шрифтов через API Google Fonts.
- Кодировки символов в HTML — рекомендации по использованию кодировок символов в HTML.
- Использование @font-face в CSS на сайте CSS-Tricks — подробное руководство по работе с @import и @font-face для Google Fonts.