Английская лексика · Веб-разработка

Английские термины веб-разработки — перевод и примеры

HTML, CSS, JavaScript, сообщения браузера и документация веб-фреймворков постоянно знакомят разработчика с английскими словами. Русские определения и разобранные примеры помогут понять запросы, интерфейсы, развёртывание и другие задачи веб-разработки.

  • 100 терминов
  • 11 тем
  • 58 базовых терминов
  • 201 примеров

Основы веба

  • front endсуществительноеклиентская часть, фронтенд

    Часть сайта или веб-приложения, которую пользователь видит и с которой взаимодействует в браузере; обычно она создаётся с помощью HTML, CSS и JavaScript.

  • back endсуществительноесерверная часть, бэкенд

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

  • full stackприлагательноефулстек, разработка полного стека

    Охватывающий и клиентскую, и серверную части веб-приложения: от пользовательского интерфейса до сервера и базы данных.

  • browserсуществительноебраузер

    Программа, например Chrome, Firefox, Safari или Edge, которая загружает веб-страницы и преобразует их код в отображаемый и интерактивный интерфейс.

  • URLсокращениеURL, веб-адрес

    Uniform Resource Locator — полный адрес страницы или файла в интернете, например https://example.com/blog?page=2.

  • serverсуществительноесервер

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

  • clientсуществительноеклиент, клиентская сторона

    Сторона соединения, запрашивающая данные, обычно браузер или мобильное приложение, в отличие от отвечающего сервера.

  • web appсуществительноевеб-приложение

    Приложение, работающее в веб-браузере, а не установленное на устройстве, например веб-почта, карты или инструмент управления проектами.

  • developer toolsсуществительноеинструменты разработчика, средства разработчика

    Встроенные в браузеры инструменты, позволяющие проверять HTML и CSS, отлаживать JavaScript, следить за сетевыми запросами и измерять производительность.

  • cross-browserприлагательноекроссбраузерный, работающий в разных браузерах

    Работающий одинаково в разных браузерах, например Chrome, Firefox, Safari и Edge, их версиях и на разных устройствах.

HTML и разметка

  • HTMLсокращениеHTML, язык гипертекстовой разметки

    HyperText Markup Language — стандартный язык описания структуры и содержимого веб-страницы, например заголовков, абзацев, ссылок и изображений.

  • elementсуществительноеэлемент HTML, элемент

    Отдельная составная часть HTML-страницы, например абзац, изображение или кнопка; обычно записывается как открывающий тег, содержимое и закрывающий тег.

  • tagсуществительноетег, HTML-тег

    Фрагмент HTML-кода в угловых скобках, например <h1> или </p>, который отмечает начало или конец элемента.

  • attributeсуществительноеатрибут HTML, атрибут

    Дополнительные сведения в виде имени и значения внутри открывающего HTML-тега, например href у ссылки или alt у изображения.

  • classсуществительноеатрибут class, класс CSS

    Атрибут HTML с одним или несколькими именами элемента, по которым CSS и JavaScript находят и оформляют группы элементов.

  • headingсуществительноезаголовок, заголовок раздела

    Название страницы или раздела, размеченное элементами h1–h6: h1 обозначает главный заголовок, остальные — уровни ниже.

  • formсуществительноеформа, веб-форма

    Часть страницы, где пользователь вводит сведения, например в форме входа, поиска или обратной связи, после чего они отправляются на сервер.

  • input fieldсуществительноеполе ввода, поле формы

    Поле или элемент управления в форме, куда пользователь вводит или выбирает значение, например имя, адрес электронной почты, пароль или дату.

  • semantic HTMLсуществительноесемантический HTML, семантическая разметка HTML

    HTML, в котором элементы используют в соответствии с их смыслом — например nav, main, article и button, — вместо универсальных div и span для всего подряд.

CSS и компоновка

  • CSSсокращениеCSS, каскадные таблицы стилей

    Cascading Style Sheets — язык, который задаёт внешний вид HTML, включая цвета, шрифты, отступы, расположение элементов и анимацию.

  • selectorсуществительноеселектор

    Часть правила CSS, указывающая, к каким элементам применяются стили, например p, .button или #header.

  • responsive designсуществительноеадаптивный дизайн, отзывчивый дизайн

    Подход к созданию страниц, при котором одна и та же компоновка подстраивается под экраны любого размера — от телефонов и планшетов до больших мониторов.

  • propertyсуществительноесвойство CSS, свойство

    В CSS — название настраиваемой характеристики стиля, например color, margin или display, которой всегда соответствует значение.

  • stylesheetсуществительноетаблица стилей, файл стилей

    Файл или блок правил CSS, описывающих внешний вид страницы; большинство сайтов подключают один или несколько внешних файлов .css.

  • layoutсуществительноекомпоновка, макет

    Способ размещения элементов на странице: где находятся колонки, меню, изображения и текст и как они перемещаются при изменении размера экрана.

  • flexboxсуществительноеFlexbox, флексбокс

    Метод компоновки CSS для размещения элементов в одной строке или колонке и управления их ростом, сжатием, выравниванием и распределением пространства.

  • CSS gridсуществительноеCSS Grid, сетка CSS

    Система компоновки CSS для одновременного размещения элементов в строках и колонках; подходит для макетов целых страниц и галерей карточек.

  • media queryсуществительноемедиазапрос

    Правило CSS, применяющее стили только при выполнении условия, например минимальной ширины экрана, включённого тёмного режима или печати.

  • box modelсуществительноеблочная модель, модель блока CSS

    Представление CSS о каждом элементе как о прямоугольном блоке из содержимого, внутренних отступов, границы и внешних отступов, вместе определяющих его размер и расстояние до соседей.

  • marginсуществительноевнешний отступ, margin

    Пространство за границей элемента, отодвигающее от него другие элементы.

  • paddingсуществительноевнутренний отступ, padding

    Пространство внутри элемента между содержимым и границей, не позволяющее содержимому вплотную подходить к краям.

  • breakpointсуществительноеконтрольная ширина, точка адаптивного перехода

    Ширина экрана, при которой адаптивная компоновка меняется, например с одной колонки на телефоне на три на компьютере.

  • viewportсуществительноеобласть просмотра, вьюпорт

    Видимая область веб-страницы внутри окна браузера или экрана телефона; её размер меняется при изменении окна или повороте телефона.

  • specificityсуществительноеспецифичность, вес CSS-селектора

    Правило CSS, определяющее, какой стиль победит, когда несколько правил подходят одному элементу: селекторы по ID важнее селекторов по классу, а те — селекторов по элементу.

JavaScript, фреймворки и инструменты

  • JavaScriptсуществительноеJavaScript, Джаваскрипт

    Язык программирования, который выполняется во всех веб-браузерах и делает страницы интерактивными; с Node.js он также работает на серверах.

  • DOMсокращениеDOM, объектная модель документа

    Document Object Model — дерево объектов, которое браузер строит на основе HTML-страницы и которое JavaScript может читать и менять, пока страница открыта.

  • frameworkсуществительноефреймворк, программная платформа

    Готовый набор кода, инструментов и правил для создания приложений, задающий структуру проекта; например Angular, Vue, Next.js или Laravel.

  • libraryсуществительноебиблиотека кода, библиотека

    Набор готового кода, добавляемого в проект и вызываемого при необходимости, например для дат, графиков или анимаций.

  • componentсуществительноекомпонент

    Повторно используемая самостоятельная часть пользовательского интерфейса, например кнопка, модальное окно или карточка товара, со своей разметкой, стилями и логикой.

  • eventсуществительноесобытие

    Происходящее в браузере действие, на которое может реагировать код: например, щелчок, нажатие клавиши, отправка формы или завершение загрузки страницы.

  • event listenerсуществительноеобработчик события, слушатель события

    Функция, ожидающая определённое событие на элементе, например щелчок или нажатие клавиши, и запускающаяся при его наступлении.

  • asynchronousприлагательноеасинхронный

    Так описывают код, который запускает задачу, например загрузку данных, и продолжает выполнять другой код, не дожидаясь её завершения.

  • promiseсуществительноепромис, обещание

    Объект JavaScript, представляющий ещё не готовый результат, например данные с сервера, который позднее может быть успешно получен или завершиться ошибкой.

  • renderглаголотрисовать, сформировать страницу

    Преобразовать код и данные в отображаемый пользователю результат: браузер рисует страницу, сервер формирует HTML.

  • stateсуществительноесостояние, state

    Данные, хранящиеся в приложении или компоненте в данный момент, например признак открытого меню или введённый пользователем текст; они определяют, что отображается.

  • single-page applicationсуществительноеодностраничное приложение, SPA

    Веб-приложение, которое загружает одну HTML-страницу, а затем меняет содержимое с помощью JavaScript при переходах пользователя, не загружая каждый раз новую страницу.

  • npmсуществительноеnpm, менеджер пакетов npm

    Стандартный менеджер пакетов JavaScript и онлайн-реестр, из которого он устанавливает пакеты; используется, например, командой npm install.

  • dependencyсуществительноезависимость, внешний пакет

    Внешний пакет или библиотека, необходимая проекту для работы и перечисленная, например, в package.json.

  • TypeScriptсуществительноеTypeScript, Тайпскрипт

    Язык программирования на основе JavaScript, добавляющий типы, благодаря которым многие ошибки обнаруживаются во время написания кода, а не при его выполнении.

  • bundlerсуществительноесборщик, бандлер

    Инструмент, объединяющий множество файлов JavaScript, CSS и других ресурсов вместе с их зависимостями в несколько оптимизированных файлов для быстрой загрузки браузером.

HTTP и API

  • HTTPсокращениеHTTP, протокол передачи гипертекста

    Hypertext Transfer Protocol — набор правил, по которым браузеры и серверы обмениваются запросами и ответами в интернете.

  • APIсокращениеAPI, программный интерфейс приложения

    Определённый способ, которым одна программа запрашивает данные или действия у другой, например веб-API, возвращающий JSON.

  • requestсуществительноезапрос, обращение к серверу

    Сообщение, которое клиент отправляет серверу за страницей, изображением или данными либо для сохранения изменения.

  • responseсуществительноеответ, ответ сервера

    Сообщение сервера в ответ на запрос; содержит код состояния, заголовки и обычно тело, например HTML или JSON.

  • JSONсокращениеJSON, формат JSON

    JavaScript Object Notation — простой текстовый формат данных с ключами и значениями в фигурных скобках, используемый большинством веб-API.

  • endpointсуществительноеконечная точка API, эндпоинт

    Конкретный URL API, принимающий запросы одного типа данных или действия, например /api/users или /api/orders/42.

  • status codeсуществительноекод состояния HTTP, статус-код

    Трёхзначное число в HTTP-ответе, показывающее результат: например, 200 — успех, 404 — не найдено, 500 — ошибка сервера.

  • fetchглаголзапрашивать и получать данные, fetch

    Запрашивать и получать данные с сервера или из API, например новые сообщения или список товаров, часто уже после открытия страницы.

  • REST APIсуществительноеREST API, REST-интерфейс

    API в стиле REST, где у каждого ресурса свой URL, а стандартные HTTP-методы GET, POST и DELETE выполняют над ним действия.

  • HTTP methodсуществительноеHTTP-метод, метод HTTP

    Слово в начале HTTP-запроса, указывающее, что клиент хочет сделать: например, GET — прочитать, POST — создать, DELETE — удалить.

  • headerсуществительноезаголовок HTTP, HTTP-заголовок

    Пара «имя — значение», передаваемая в HTTP-запросе или ответе и содержащая дополнительные сведения, например Content-Type, Authorization или Cache-Control.

Серверная часть и данные

  • databaseсуществительноебаза данных

    Упорядоченное хранилище данных, например о пользователях, заказах или публикациях, куда серверная часть сохраняет данные, откуда быстро выполняет поиск и где обновляет их.

  • sessionсуществительноесеанс, сессия

    Период, в течение которого сервер помнит вошедшего пользователя, обычно по идентификатору в cookie, до выхода пользователя или истечения сеанса.

  • server-sideприлагательноена стороне сервера, серверный

    Происходящий на сервере, а не в браузере пользователя, например выполнение кода, проверка данных или рендеринг на сервере.

  • environment variableсуществительноепеременная окружения

    Именованная настройка, например URL базы данных или ключ API, передаваемая приложению извне кода, чтобы её значение могло различаться в разных средах.

Хостинг, домены и развёртывание

  • domain nameсуществительноедоменное имя, домен

    Понятный человеку адрес сайта, например example.com, который вводят вместо числового IP-адреса.

  • hostingсуществительноехостинг, размещение сайта

    Услуга, которая хранит файлы и код сайта на подключённых к интернету серверах, чтобы сайт был доступен посетителям.

  • deployглаголразвернуть, выложить на сервер

    Разместить новую версию сайта или приложения на сервере, чтобы она стала доступна пользователям, обычно автоматически.

  • SSL certificateсуществительноеSSL-сертификат, сертификат SSL

    Цифровой файл, установленный на сервере, который подтверждает подлинность сайта и позволяет браузеру установить зашифрованное HTTPS-соединение.

  • DNSсокращениеDNS, система доменных имён

    Domain Name System — справочник интернета, который преобразует доменные имена, например example.com, в IP-адреса серверов.

  • buildсуществительноесборка, собрать проект

    Автоматический этап преобразования исходного кода в файлы для production, например компиляцией, объединением и минификацией; также результат этого этапа.

  • web serverсуществительноевеб-сервер

    Программа, например Nginx или Apache, принимающая HTTP-запросы и отдающая веб-страницы и файлы; так также называют компьютер, на котором она работает.

  • staging environmentсуществительноетестовая среда, staging-среда

    Копия работающего сайта, максимально приближённая к production, где проверяют новые версии до показа реальным пользователям.

Производительность сайтов

  • load timeсуществительноевремя загрузки

    Время, за которое страница загружается и появляется на экране в пригодном для использования состоянии; обычно измеряется в секундах или миллисекундах.

  • cacheсуществительноекэш, кэшировать

    Место временного хранения копий файлов или данных, чтобы быстрее выдавать их повторно, например в браузере, CDN или на сервере.

  • CDNсокращениеCDN, сеть доставки контента

    Content Delivery Network — сеть серверов по всему миру, хранящих копии файлов сайта и доставляющих их с узла, ближайшего к каждому пользователю.

  • lazy loadingсуществительноеленивая загрузка, отложенная загрузка

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

  • minifyглаголминифицировать, сжимать код минификацией

    Уменьшать размер файлов кода, удаляя пробелы, комментарии и переносы строк и сокращая имена, не меняя поведения кода.

  • image optimizationсуществительноеоптимизация изображений

    Уменьшение размера файлов изображений без заметного ухудшения их вида, например с помощью сжатия, изменения размеров и современных форматов.

  • Core Web VitalsсуществительноеCore Web Vitals, основные интернет-показатели

    Три метрики Google, измеряющие реальный пользовательский опыт на странице: загрузку (LCP), отзывчивость (INP) и визуальную стабильность (CLS).

Доступность

  • accessibilityсуществительноедоступность, веб-доступность

    Практика создания сайтов, которыми могут пользоваться все люди, в том числе незрячие и глухие, люди с ограниченной подвижностью и пользователи вспомогательных технологий.

  • alt textсуществительноеальтернативный текст, текст alt

    Краткое текстовое описание изображения, добавленное атрибутом alt: программы чтения с экрана произносят его, а браузеры показывают, если изображение не загрузилось.

  • screen readerсуществительноепрограмма чтения с экрана, скринридер

    Программа, которая озвучивает содержимое экрана или передаёт его на брайлевский дисплей; в основном используется незрячими людьми и людьми с нарушениями зрения.

  • ARIAсокращениеARIA, набор атрибутов доступности ARIA

    Accessible Rich Internet Applications — набор HTML-атрибутов, например role и aria-label, предоставляющих вспомогательным технологиям дополнительные сведения об элементах.

  • keyboard navigationсуществительноенавигация с клавиатуры, управление клавиатурой

    Использование сайта только с клавиатуры: переход между ссылками, кнопками и полями клавишей Tab и активация клавишами Enter или Space.

  • contrast ratioсуществительноекоэффициент контрастности, контрастное отношение

    Числовое соотношение яркости текста и его фона: высокий коэффициент, например 7:1, легче читать, чем низкий, например 2:1.

SEO для разработчиков

  • SEOсокращениеSEO, поисковая оптимизация

    Search Engine Optimization — работа над тем, чтобы страницы сайта находили, правильно понимали и показывали выше в поисковых системах, например Google.

  • meta tagсуществительноеметатег, тег meta

    HTML-тег в элементе head, сообщающий браузерам и поисковым системам сведения о странице, например её описание или настройки области просмотра.

  • sitemapсуществительноекарта сайта, файл sitemap

    Файл, обычно sitemap.xml, содержащий список страниц сайта, чтобы поисковые системы могли легче находить и обходить их.

  • crawlглаголсканировать сайт, обходить страницы

    Автоматически посещать страницы сайта, переходить по ссылкам и загружать их содержимое, чтобы поисковая система могла добавить его в индекс.

  • indexглаголиндексировать страницу, индексация страницы

    Сохранить и упорядочить просканированную страницу в поисковой системе, чтобы она могла появиться в результатах поиска.

Веб-безопасность

  • authenticationсуществительноеаутентификация, проверка подлинности пользователя

    Процесс проверки личности пользователя, например по паролю, одноразовому коду или входу через Google либо Apple.

  • HTTPSсокращениеHTTPS, защищённый HTTP

    Защищённая версия HTTP: она шифрует соединение браузера с сервером с помощью TLS, чтобы посторонние не могли прочитать или изменить данные.

  • cross-site scriptingсуществительноемежсайтовый скриптинг, XSS-атака

    Атака, при которой злоумышленник внедряет вредоносный JavaScript в страницу, которую открывают другие пользователи, например через комментарий; скрипт запускается в их браузерах.

  • SQL injectionсуществительноеSQL-инъекция, внедрение SQL-кода

    Атака, при которой пользователь вводит SQL-код в форму или URL, заставляя базу данных выполнить его; это может привести к раскрытию или удалению данных.

  • CORSсокращениеCORS, междоменный обмен ресурсами

    Cross-Origin Resource Sharing: правила браузера, позволяющие серверу указать, каким другим сайтам (источникам) JavaScript может читать его ответы.

  • CSRFсокращениеCSRF, межсайтовая подделка запроса

    Атака, которая заставляет браузер вошедшего в систему пользователя отправить нежелательный запрос доверенному сайту, например изменить адрес электронной почты.

  • hashглаголхешировать, хеш

    Преобразовать данные, например пароль, односторонней функцией в строку фиксированной длины, из которой нельзя прочитать исходное значение.

Короткий тест: знаете ли вы эти термины?

Десять вопросов из словаря. Выберите правильное значение каждого термина и проверьте результат.

Как изучать лексику: Веб-разработка

  • Читайте сообщения консоли и ищите незнакомые термины в документации браузера или фреймворка.
  • Запоминайте слова в сочетаниях: clear the cache, deploy to staging, send a request.
  • Различайте бытовое и техническое значение слов: padding в CSS обозначает внутренний отступ.
  • Используйте новые выражения в коротких описаниях изменений и комментариях к задачам.

Частые вопросы

Какие английские слова нужны начинающему веб-разработчику?

Начните с browser, server, element, selector, request, response и API. Затем добавьте термины компоновки, фреймворков, производительности, доступности и безопасности.

Как лучше учить английский для веб-разработки?

Читайте документацию, сообщения об ошибках и обсуждения задач. Выписывайте короткие сочетания и используйте их в собственных комментариях: например, clear the cache или deploy to staging.

Как правильно писать: front end, front-end или frontend?

Встречаются все три формы. В традиционном оформлении front end — существительное, а front-end ставится перед другим существительным: a front-end developer. В технических текстах также распространено frontend; внутри одного текста придерживайтесь выбранного стиля.

Зачем знать русские и английские варианты?

Русский перевод проясняет смысл, а английский нужен для документации и поиска ошибок. Например, browser — браузер, server — сервер, accessibility — доступность; конкретное значение уточняется по контексту.

В русскоязычной команде использовать русские или английские термины веб-разработки?

Обычно используют оба варианта: «браузер», «сервер», «доступность» соседствуют с frontend, deploy, cache и component. Важно понимать английские термины, чтобы читать документацию и искать решения; в разговоре выбирайте привычные команде слова и придерживайтесь их.

Закрепляйте лексику чтением

Тексты подходящего уровня помогают запоминать новые слова. Выберите бесплатные книги на английском: