Валидность и семантичность HTML
Валидность и семантичность HTML кода определяют качество сайта с точки зрения поисковых систем.
Валидность HTML‑верстки — это её соответствие стандартам организации W3C. Отсутствие ошибок в вёрстке документа — один из основных показателей её качества. Автоматическая проверка вёрстки на ошибки может быть проведена как с помощью онлайн‑сервиса W3C, так и с помощью различных программ-валидаторов.
При этом соблюдение стандартов не обязательно для того, чтобы сайт отображался в браузерах. Такая ситуация сложилась потому, что очень много сайтов в интернете сделаны непрофессионалами и эти стандарты на них не соблюдены. Производители браузеров заинтересованы в максимальной доступности информации и вынуждены отображать даже самые «криво» написанные сайты. Однако это не означает, что в соблюдении стандартов нет смысла: качество отображения валидных документов обычно значительно выше, а поисковые системы надёжнее разбирают чистую разметку.
Семантичность HTML‑документа — это способность документа передать смысловое и логическое содержание при отключении CSS, JavaScript и графики. Эта характеристика зависит от профессионализма верстальщика и требует от него дополнительных усилий. Семантичность — ещё один важный критерий оценки качества сайта поисковыми системами. В HTML5 появились теги, которые увеличили возможности семантической разметки документов.
Тематические статьи
Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют метаданные о содержании. Широко известными являются форматы Schema.org, Open Graph и микроформаты.
По данному списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.
Вёрстка независимыми блоками — это методология, которая была сформулирована разработчиками Яндекса. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.
Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
HTML — это язык для структурирования и представления содержимого. HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, утверждённая W3C и развивающаяся как живой стандарт. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML‑разметки, без которых скорость загрузки и отрисовки будет ниже.
Графические интерфейсы современных сайтов и веб‑приложений разрабатываются всего на трёх языках — HTML, CSS, JavaScript. Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML и CSS, во фронтенд-разработке используют языки, которые браузер не исполняет напрямую: TypeScript, Dart и Kotlin компилируются в JavaScript или WebAssembly.
Кеширование статических ресурсов (картинок, скриптов, стилей) и неизменяющихся страниц на стороне браузера может сэкономить время загрузки страниц, если пользователь посещает сайт многократно или за визит просматривает несколько страниц, которые используют одинаковые ресурсы.
Загрузка контента при помощи Ajax и навигация, построенная на этой схеме, позволяют значительно повысить отзывчивость интерфейса разрабатываемого сайта или веб‑приложения. Однако такой подход заставляет решать проблемы, связанные с отображением адреса в браузере.