Веб-стандарты — что это такое во frontend-разработке

Коротко

Общие открытые правила, по которым устроены HTML, CSS, JavaScript, HTTP и другие технологии веба, чтобы один и тот же сайт одинаково работал в разных браузерах.

Что такое «Веб-стандарты»

В конце 1990-х сайты помечали значками «лучше всего смотреть в Internet Explorer» или «оптимизировано для Netscape»: браузеры конкурировали собственными несовместимыми возможностями. Движение за веб-стандарты добилось, чтобы производители реализовывали общие спецификации, а разработчики писали по ним, а не под конкретный браузер. Сегодня это норма, и разница между браузерами касается в основном свежих возможностей.

Кто что стандартизирует

WHATWG — HTML, DOM, Fetch, URL и другие «живые стандарты», которые обновляются непрерывно.
W3C — CSS, рекомендации по доступности WCAG, SVG, многие браузерные API.
Ecma International, комитет TC39 — язык JavaScript (стандарт ECMAScript), новая редакция выходит ежегодно.
IETF — сетевые протоколы: HTTP, TLS, формат адресов URI.

Как узнать, можно ли уже пользоваться возможностью

Наличие спецификации не означает поддержку. Проверяют по таблицам caniuse.com и справочнику MDN. В MDN есть отметка Baseline: возможность считается доступной, когда она работает во всех основных браузерах — Chrome, Edge, Firefox и Safari, — и «широко доступной» спустя примерно два с половиной года после этого. Новые возможности подключают по принципу прогрессивного улучшения: без них сайт работает, с ними — лучше.

Пример: первая строка по стандарту

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Компания-пример — контакты</title>
</head>

Короткий доктайп включает стандартный режим отображения. Без него браузер переходит в режим совместимости со старыми сайтами, где по-другому считаются размеры блоков и таблиц, и вёрстка начинает вести себя странно.

Что это даёт владельцу сайта

Сайт, сделанный по стандартам, дольше живёт без переделок: обновление браузера не ломает вёрстку, которая не опиралась на ошибки и особенности конкретной версии. Стандартную семантическую разметку лучше понимают поисковые роботы и экранные дикторы. А код без «хаков» под отдельные браузеры проще передать другому разработчику.