[{"data":1,"prerenderedAt":1636},["ShallowReactive",2],{"$fa_5ajE4cV4iD6TGeJKvabHNMv3e0MSwWGAcCWiOWKhc":3,"$fMMUdSFktwQFqMVGPrTtt3EC5yheBp7PzwIqznamFcMo":91,"$fc0LoAJgqXDLbKKd2JS_NpM4SuzBK8EycUXINSg09CKU":94,"$fM3ea55k6lKMPOTM84llDB26VSQDVVbxiQuSBFQw9P_c":99,"$f1Prj1xEczHja_-L7FyIGgRHd5_cSWHo7r6AE5aheAik":444,"$fI5fDmvm-5tr9wcH0eHaKZa1j3y_FQIQaHHPqbZxAHJE":665,"mdc--wnk2ee-key":685,"mdc-o162ax-key":697,"mdc-oqm1mf-key":706,"mdc-uvbep0-key":714,"mdc--4tcl70-key":722,"mdc--dq3d1-key":730,"mdc-9vvov2-key":738,"mdc--wmapgk-key":753,"mdc--146qh6-key":792,"mdc--2gacxf-key":800,"mdc--l707ud-key":965,"mdc-v11u2-key":973,"mdc-h5eraz-key":1185,"mdc--lmm7h3-key":1208,"mdc-39lfqv-key":1263,"mdc-sg09wi-key":1271,"mdc--wkmh7p-key":1428,"mdc--sx7dku-key":1451,"mdc-46koa1-key":1628},{"content":4,"quizQuestionContent":62,"type":81,"pageMeta":82},[5,9,13,16,20,24,27,30,33,36,40,43,46,50,53,56,59],{"id":6,"value":7,"isTypeH1":8},"1951","Что такое HTML: основа структуры веб-страниц",true,{"id":10,"value":11,"anchor":12,"isTypeH2":8},"4535","Что такое HTML","what-is-html",{"id":14,"value":15,"isTypeParagraph":8},"10424","HTML (HyperText Markup Language) — язык разметки, предназначенный для описания структуры и смысла (семантики) содержимого веб‑страницы: заголовков, абзацев, списков, ссылок, изображений, форм и прочих частей документа.\n\nHTML не является языком программирования: в нём нет вычислительной модели с переменными, циклами и ветвлениями как у JavaScript, поэтому HTML описывает “что это такое” (например, “это заголовок”, “это навигация”, “это ссылка”), а не “что делать”.\n\nСовременное понимание HTML строится вокруг веб‑платформы:\n- HTML задаёт структурный каркас и смысл.\n- CSS задаёт представление (оформление).\n- JavaScript задаёт поведение (интерактивность) и может изменять структуру через DOM.",{"id":17,"description":18,"titleAlert":19,"isTypeAlertInfo":8},"689","HTML развивается как Living Standard: спецификация обновляется непрерывно, поэтому “актуальность” определяется не номером версии, а текущим состоянием стандарта и поддержкой в браузерах.",null,{"id":21,"value":22,"anchor":23,"isTypeH2":8},"4536","Из чего состоит HTML-документ","html-document-anatomy",{"id":25,"value":26,"isTypeParagraph":8},"10425","HTML‑документ — это текст, который браузер читает (парсит) и превращает во внутреннюю модель DOM (Document Object Model), то есть дерево узлов, с которым работают рендеринг, стили и скрипты.\n\nКлючевые понятия:\n- Элемент: логическая часть документа, например `p`, `a`, `header`, `main`, `article`, `section`, `button`.\n- Теги: синтаксическая запись элемента; обычно есть открывающий и закрывающий, например `p` … `\u003C/p>`.\n- Атрибуты: параметры элемента в открывающем теге, например `href`, `src`, `alt`, `id`, `class`, `name`.\n- Текстовые узлы: текст внутри элементов; это отдельные узлы DOM.\n- Комментарии: существуют в исходнике и DOM, но не должны использоваться как носитель логики.\n\nБазовый скелет HTML‑страницы:\n```\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"ru\">\n  \u003Chead>\n    \u003Cmeta charset=\"utf-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    \u003Ctitle>пример\u003C/title>\n  \u003C/head>\n  \u003Cbody>\n    \u003Ch1>заголовок\u003C/h1>\n    \u003Cp>абзац с \u003Ca href=\"/about\">ссылкой\u003C/a>.\u003C/p>\n  \u003C/body>\n\u003C/html>\n```",{"id":28,"description":29,"titleAlert":19,"isTypeAlertWarning":8},"753","Неверное представление, что HTML нужен только для “визуальной вёрстки”, приводит к типичным проблемам: слабая доступность (accessibility), плохая индексация, сложность поддержки и переиспользования компонентов.",{"id":31,"value":32,"isTypeParagraph":8},"10426","Зачем нужен `\u003C!DOCTYPE html>`:\n- Он переключает браузер в стандартизованный режим рендеринга (вместо “quirks mode”), что снижает вероятность странностей в разметке и стилях.\n\nТипы элементов по форме записи:\n- Обычные (с парными тегами): `div`, `p`, `a`, `section`.\n- Пустые (void elements): `img`, `br`, `meta`, `link`, `input` (у них нет закрывающего тега и нельзя помещать внутрь содержимое).\n\nПример типичных пустых элементов:\n\n```\n\u003Cmeta charset=\"utf-8\">\n\u003Clink rel=\"stylesheet\" href=\"/styles.css\">\n\u003Cimg src=\"/logo.png\" alt=\"логотип\">\n\u003Cinput type=\"email\" name=\"email\">\n```\n\nАтрибуты по смыслу:\n- Глобальные: применимы почти везде (например, `id`, `class`, `hidden`, `title`, `lang`, `data-*`).\n- Булевы: наличие атрибута означает “включено”, например `disabled`, `checked`, `required`.\n\nПример булевых атрибутов:\n\n```\n\u003Cbutton disabled>недоступно\u003C/button>\n\u003Cinput type=\"checkbox\" checked>\n```",{"id":34,"description":35,"titleAlert":19,"isTypeAlertWarning":8},"754","Наличие `id` должно быть уникальным в пределах документа; повторение одинаковых `id` ломает предсказуемость поиска элементов и якорных ссылок.",{"id":37,"value":38,"anchor":39,"isTypeH2":8},"4537","Как HTML превращается в страницу (DOM, CSS, JS)","html-to-dom-css-js",{"id":41,"value":42,"isTypeParagraph":8},"10427","После получения HTML (обычно по HTTP) браузер запускает парсер, строит DOM и параллельно может запрашивать дополнительные ресурсы: CSS, изображения, шрифты, скрипты.\n\nСхема “HTML → отображение”:\n\n```\nHTML-текст\n  |\n  v\nПарсинг\n  |\n  v\nDOM-дерево \u003C---- JavaScript читает/изменяет DOM\n  |\n  v\nCSSOM (модель стилей) + расчёт стилей\n  |\n  v\nRender Tree (что реально рисуется)\n  |\n  v\nLayout (геометрия) -> Paint (рисование) -> Composite (сборка слоёв)\n```\n\nРоль JavaScript в контексте HTML:\n- JavaScript может создавать/удалять элементы, менять атрибуты, добавлять классы, подписываться на события (клик, ввод, отправка формы).\n- Любое изменение DOM/атрибутов потенциально влияет на стили и перерисовку.\n\nПример: изменение текста в DOM (важно: исходник HTML не переписывается, меняется DOM в памяти):\n```\n\u003Cp id=\"status\">загрузка...\u003C/p>\n\u003Cscript>\n  const el = document.getElementById('status');\n  el.textContent = 'готово';\n\u003C/script>\n\nВстраивание скриптов в середине документа без понимания порядка выполнения может приводить к ошибкам “элемент ещё не существует”; типовое решение — размещение `script` перед `\u003C/body>` или использование `defer` в `head`, например `script defer src=\"/app.js\"`.\n",{"id":44,"description":45,"titleAlert":19,"isTypeAlertInfo":8},"690","DOM — это не “HTML‑строка”, а объектная модель; поэтому сравнение “что написано в файле” и “что получилось в DOM” может отличаться из‑за правил парсинга и восстановления ошибок.",{"id":47,"value":48,"anchor":49,"isTypeH2":8},"4538","Семантика, доступность и типовые конструкции","semantics-accessibility-patterns",{"id":51,"value":52,"isTypeParagraph":8},"10428","Семантика — это выбор элементов по смыслу, а не по внешнему виду: `button` для действия, `a` для перехода по ссылке, `nav` для навигации, `main` для основного содержимого.\n\nПрактическое правило выбора:\n- Если происходит переход по URL, уместен `a` с `href`.\n- Если выполняется действие (открыть модалку, отправить запрос, переключить состояние), уместен `button`.\n- Если требуется просто контейнер без смысла, уместен `div` (но это крайний вариант, когда семантического элемента нет).\n\nПример семантической структуры страницы:\n\n```\n\u003Cheader>\n  \u003Cnav aria-label=\"основная навигация\">\n    \u003Ca href=\"/\">главная\u003C/a>\n    \u003Ca href=\"/articles\">статьи\u003C/a>\n    \u003Ca href=\"/contacts\">контакты\u003C/a>\n  \u003C/nav>\n\u003C/header>\n\n\u003Cmain>\n  \u003Carticle>\n    \u003Ch1>заголовок статьи\u003C/h1>\n\n    \u003Csection>\n      \u003Ch2>введение\u003C/h2>\n      \u003Cp>основная мысль и контекст.\u003C/p>\n    \u003C/section>\n\n    \u003Csection>\n      \u003Ch2>детали\u003C/h2>\n      \u003Cul>\n        \u003Cli>пункт списка\u003C/li>\n        \u003Cli>ещё пункт\u003C/li>\n      \u003C/ul>\n    \u003C/section>\n  \u003C/article>\n\u003C/main>\n\n\u003Cfooter>\n  \u003Cp>служебная информация\u003C/p>\n\u003C/footer>\n```\n\nДоступность (a11y) тесно связана с HTML, потому что:\n- Семантические элементы дают экранным дикторам и вспомогательным технологиям правильные роли.\n- Правильные подписи форм (label) делают поля понятными.\n- `alt` у изображений обеспечивает альтернативное описание.\n\nПример доступной формы:\n\n```\n\u003Cform action=\"/subscribe\" method=\"post\">\n  \u003Cfieldset>\n    \u003Clegend>подписка\u003C/legend>\n\n    \u003Clabel for=\"email\">email\u003C/label>\n    \u003Cinput id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required>\n\n    \u003Cbutton type=\"submit\">отправить\u003C/button>\n  \u003C/fieldset>\n\u003C/form>\n```\n\nПример изображения с альтернативным текстом:\n\n```\n\u003Cimg src=\"/team.jpg\" alt=\"команда проекта на встрече\">\n```\n",{"id":54,"description":55,"titleAlert":19,"isTypeAlertWarning":8},"755","Использование `div` вместо `button` для кликабельных элементов ухудшает доступность и управление с клавиатуры; даже при добавлении обработчика клика семантика и стандартное поведение теряются.",{"id":57,"value":58,"isTypeParagraph":8},"10429","Таблица: “что выбрать по смыслу”\n| Задача | Корректный элемент | Почему |\n|---|---|---|\n| Переход на страницу | `a` (с `href`) | Это ссылка, участвует в навигации и истории |\n| Запуск действия | `button` | Есть роль кнопки, клавиатурное управление, состояния |\n| Основной контент | `main` | Помогает структуре документа и навигации |\n| Самодостаточный материал | `article` | Материал можно читать отдельно (пост, карточка) |\n| Часть материала | `section` | Логический раздел с заголовком |\n| Навигация | `nav` | Явно обозначает меню/ссылки |",{"id":60,"value":61,"isTypeParagraph":8},"10430","Итого: HTML — основной язык разметки веба, описывающий структуру и семантику контента; браузер парсит HTML в DOM, а внешний вид обычно задаётся CSS, интерактивность — JavaScript.",{"id":63,"options":64,"hint":78,"solution":79,"description":80},"1180",[65,69,72,75],{"id":66,"label":67,"isCorrect":68},"4864","HTML — это протокол сетевого обмена, который определяет, как браузер отправляет запросы и получает ответы от сервера, включая заголовки и коды состояния.  ",false,{"id":70,"label":71,"isCorrect":8},"4865","HTML — это язык разметки, который задаёт структуру и смысл веб‑контента; браузер парсит его, строит DOM и затем отображает страницу вместе со стилями и скриптами.",{"id":73,"label":74,"isCorrect":68},"4866","HTML — это язык стилей, который отвечает за цвета, отступы и расположение блоков, а семантика и структура задаются отдельным языком разметки.",{"id":76,"label":77,"isCorrect":68},"4867","HTML — это язык программирования, предназначенный для вычислений в браузере; он содержит переменные, циклы и условия и напрямую исполняется движком как код.","Следует вспомнить три роли: HTML — структура и смысл, CSS — оформление, JavaScript — поведение; также важно помнить, что HTML преобразуется браузером в DOM.","**Правильный ответ: 2** - HTML — это язык разметки, который задаёт структуру и смысл веб‑контента; браузер парсит его, строит DOM и затем отображает страницу вместе со стилями и скриптами.","Что такое HTML?","quizQuestion",{"title":80,"description":83,"ogTitle":7,"ogDescription":83,"ogImageUrl":84,"canonical":19,"ogLocale":85,"ogSiteName":86,"ogImageType":87,"ogImageWidth":88,"ogImageHeight":89,"ogType":90,"ogUrl":19},"HTML — язык разметки, задающий смысл и структуру контента, который браузер парсит в DOM и отображает вместе с CSS и JS","/og-image.png","ru_RU","goodwebjob.ru","image_jpeg","1200","630","article",{"siteName":92,"siteUrl":93},"GOOD WEB JOB!","https://goodwebjob.ru",[95],{"label":96,"slug":97,"to":98},"Подготовка к тех.интервью","technical-interview","/technical-interview/where-to-begin",{"navigationList":100,"navigationSublist":108},[101,104],{"path":98,"isActive":68,"name":102,"icon":103,"isNavbarMobileDisabled":8},"С чего начать?","material-symbols:visibility-outline-rounded",{"path":105,"isActive":8,"name":106,"icon":107,"isNavbarMobileDisabled":68},"/technical-interview/tasks","Сборник задач","material-symbols:task-outline",[109,118,145,157,162,303,327,336,342,405,426,432],{"title":110,"list":111,"isOpened":68},"Bash",[112,115],{"name":113,"path":114,"isActive":68},"Дан фрагмент bash-скрипта: cd ~; mkdir foo... Что в нем происходит?","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":116,"path":117,"isActive":68},"Дан фрагмент bash-скрипта: target=$(ps -Af | grep $1 | head -n 1)...","/technical-interview/tasks/here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"title":119,"list":120,"isOpened":68},"CSS",[121,124,127,130,133,136,139,142],{"name":122,"path":123,"isActive":68},"Дан HTML-код. Какой будет цвет у текста «Some dummy text»?","/technical-interview/tasks/the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":125,"path":126,"isActive":68},"Есть шаблон HTML и CSS кода. Какой будет цвет у текста «Таким образом, постоянное»?","/technical-interview/tasks/there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":128,"path":129,"isActive":68},"Есть шаблон вложенного HTML кода. Какой будет цвет у текста «One more dummy text»?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":131,"path":132,"isActive":68},"Есть шаблон вложенного HTML кода. Будет ли display:block у body влиять на span?","/technical-interview/tasks/there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":134,"path":135,"isActive":68},"Есть HTML код. Будет ли font-weight на span влиять?","/technical-interview/tasks/there-is-an-html-code-will-font-weight-affect-span",{"name":137,"path":138,"isActive":68},"Flexbox и Grid, чем отличаются друг от друга?","/technical-interview/tasks/what-are-the-differences-between-flexbox-and-grid",{"name":140,"path":141,"isActive":68},"Заменяют ли Flexbox и Grid друг друга?","/technical-interview/tasks/do-flexbox-and-grid-replace-each-other",{"name":143,"path":144,"isActive":68},"Есть CSS и JS анимация. Какая между ними разница, что быстрее, что более удобно?","/technical-interview/tasks/there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"title":146,"list":147,"isOpened":68},"Git",[148,151,154],{"name":149,"path":150,"isActive":68},"Разрабатывал, взял закоммитил, запушил. Оказалось, что запушил не в ту ветку, точнее, коммит не в ту ветку. Какие действия?","/technical-interview/tasks/developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":152,"path":153,"isActive":68},"В git есть несколько вариантов слияния веток, какие? Чем отличаются?","/technical-interview/tasks/git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":155,"path":156,"isActive":68},"Какие существуют стратегии ветвления для работы команды? Что это такое?","/technical-interview/tasks/what-are-the-branching-strategies-for-the-team-what-is-it",{"title":158,"list":159,"isOpened":68},"HTML",[160],{"name":80,"path":161,"isActive":68},"/technical-interview/tasks/what-is-html",{"title":163,"list":164,"isOpened":68},"JavaScript",[165,168,171,174,177,180,183,186,189,192,195,198,201,204,207,210,213,216,219,222,225,228,231,234,237,240,243,246,249,252,255,258,261,264,267,270,273,276,279,282,285,288,291,294,297,300],{"name":166,"path":167,"isActive":68},"Какие логические значения в console.log будут получены?","/technical-interview/tasks/prototype-what-logical-values-will-be-received-in-console-log",{"name":169,"path":170,"isActive":68},"Почему опасно писать прямо в прототипы базовых типов?","/technical-interview/tasks/why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":172,"path":173,"isActive":68},"Что вернёт следующий код? Object.create(null).hasOwnProperty('toString')","/technical-interview/tasks/what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":175,"path":176,"isActive":68},"Какое значение выведет консоль с object.property?","/technical-interview/tasks/what-value-will-the-console-output-with-object-property",{"name":178,"path":179,"isActive":68},"Что выведется в console.log([arr[0](), arr[0]()])?","/technical-interview/tasks/what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":181,"path":182,"isActive":68},"Что выведет console.log в результате выполнения цикла while?","/technical-interview/tasks/what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":184,"path":185,"isActive":68},"Есть функция и объект. Напишите все известные вам способы, чтобы вывести в консоли значение x из объекта, используя функцию","/technical-interview/tasks/there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":187,"path":188,"isActive":68},"Что вернёт метод book.getUpperName()?","/technical-interview/tasks/what-will-the-book-get-upper-name-method-return",{"name":190,"path":191,"isActive":68},"Переменные объявлены следующим образом: a=3; b=«hello»;. Укажите правильное утверждение","/technical-interview/tasks/variables-are-declared-as-follows-specify-the-correct-statement",{"name":193,"path":194,"isActive":68},"Что выведет консоль в случае присвоения свойства массиву по строковому положительному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":196,"path":197,"isActive":68},"Что выведет консоль в случае присвоения свойства массиву по строковому отрицательному индексу?","/technical-interview/tasks/what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":199,"path":200,"isActive":68},"Что выведет консоль в случае удаления элемента массива с помощью оператора delete?","/technical-interview/tasks/what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":202,"path":203,"isActive":68},"Что вернёт этот код: typeof (function(){})()","/technical-interview/tasks/what-this-code-will-return-typeof-function",{"name":205,"path":206,"isActive":68},"Что получится в результате передачи объекта как аргумента в функцию и выполнения кода?","/technical-interview/tasks/what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":208,"path":209,"isActive":68},"Какие способы объявления функции есть в JavaScript?","/technical-interview/tasks/what-are-the-ways-to-declare-a-function-in-javascript",{"name":211,"path":212,"isActive":68},"Что такое this в JavaScript?","/technical-interview/tasks/what-is-this-in-javascript",{"name":214,"path":215,"isActive":68},"Что такое Event Loop, как работает?","/technical-interview/tasks/what-is-an-event-loop-and-how-does-it-work",{"name":217,"path":218,"isActive":68},"Что будет, если вызвать typeof на необъявленной переменной?","/technical-interview/tasks/what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":220,"path":221,"isActive":68},"Что показывает оператор typeof в JavaScript?","/technical-interview/tasks/what-does-the-typeof-operator-show-in-javascript",{"name":223,"path":224,"isActive":68},"Какие типы данных существует в JavaScript?","/technical-interview/tasks/what-types-of-data-exist-in-javascript",{"name":226,"path":227,"isActive":68},"Какую структуру использовать для хранения упорядоченного списка строк в JavaScript?","/technical-interview/tasks/what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":229,"path":230,"isActive":68},"Что вернет typeof для массива?","/technical-interview/tasks/what-will-typeof-return-for-an-array",{"name":232,"path":233,"isActive":68},"Почему оператор typeof, применённый к массиву, возвращает объект?","/technical-interview/tasks/why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":235,"path":236,"isActive":68},"Если нужно хранить список уникальных строк, какую структуру данных выбрать?","/technical-interview/tasks/if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":238,"path":239,"isActive":68},"Что возвращает typeof для new Set в JavaScript?","/technical-interview/tasks/what-does-typeof-return-for-new-set-in-javascript",{"name":241,"path":242,"isActive":68},"Почему в JavaScript два объекта с одинаковым содержимым при сравнении возвращают false?","/technical-interview/tasks/why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":244,"path":245,"isActive":68},"В чем разница между микро- и макро-тасками в JavaScript?","/technical-interview/tasks/what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":247,"path":248,"isActive":68},"arr.push(0) повлияет на массив так же, как если бы мы выполнили...","/technical-interview/tasks/arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":250,"path":251,"isActive":68},"Вернуть массив от 1 до n, где числа, кратные 3, заменены на 'fizz', кратные 5 - на 'buzz', а кратные и 3, и 5 одновременно - на 'fizzbuzz'","/technical-interview/tasks/returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":253,"path":254,"isActive":68},"Дана строка: 'one.two.three.four.five'. Необходимо из строки сделать вложенный объект","/technical-interview/tasks/the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":256,"path":257,"isActive":68},"Дано дерево (вложенный объект), надо найти сумму всех вершин","/technical-interview/tasks/given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":259,"path":260,"isActive":68},"Для каждого вложенного объекта нужно добавить свойство level, которое равняется числу - номер вложенности","/technical-interview/tasks/for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":262,"path":263,"isActive":68},"Для каждой ветви дерева записать номер вложенности данной ветви","/technical-interview/tasks/for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":265,"path":266,"isActive":68},"Есть массив, в котором лежат объекты с датами, необходимо отсортировать даты по возрастанию","/technical-interview/tasks/there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":268,"path":269,"isActive":68},"Есть слова в массиве, необходимо определить, состоят ли они из одних и тех же букв","/technical-interview/tasks/there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":271,"path":272,"isActive":68},"Есть строка, состоящая из разных скобок, необходимо проверить, закрыты ли все","/technical-interview/tasks/there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":274,"path":275,"isActive":68}," Найти в массиве неповторяющиеся числа","/technical-interview/tasks/find-non-repeating-numbers-in-an-array",{"name":277,"path":278,"isActive":68},"Напишите функцию, который сделает из массива объект","/technical-interview/tasks/write-a-function-that-will-make-an-object-out-of-an-array",{"name":280,"path":281,"isActive":68},"Необходимо проверить, являются ли две строки анаграммами друг друга","/technical-interview/tasks/checks-whether-two-strings-are-anagrams-of-each-other",{"name":283,"path":284,"isActive":68},"Нечётные числа должны отсортироваться по возрастанию, а чётные должны остаться на своих местах","/technical-interview/tasks/odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":286,"path":287,"isActive":68},"Определить, является ли слово палиндромом","/technical-interview/tasks/determines-whether-a-word-is-a-palindrome",{"name":289,"path":290,"isActive":68},"«Расплющивание» массива","/technical-interview/tasks/flattening-the-array",{"name":292,"path":293,"isActive":68},"Реализовать функцию, принимающую аргументы \"*\", \"1\", \"b\", \"1c\" и возвращающую строку \"1*b*1c\"","/technical-interview/tasks/implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":295,"path":296,"isActive":68},"Сжатие строк","/technical-interview/tasks/string-compression",{"name":298,"path":299,"isActive":68},"Уникализация значений в массиве","/technical-interview/tasks/unifying-values-in-an-array",{"name":301,"path":302,"isActive":68},"Числа от 1 до 100 находятся в массиве, они хаотично перемешанные, но в нём не хватает одного числа из этой последовательности. Необходимо найти его","/technical-interview/tasks/the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"title":304,"list":305,"isOpened":68},"React",[306,309,312,315,318,321,324],{"name":307,"path":308,"isActive":68},"Для чего нужен React, какие он решает проблемы?","/technical-interview/tasks/what-is-react-used-for-and-what-problems-does-it-solve",{"name":310,"path":311,"isActive":68},"Какой механизм лежит в основе оптимизации обновлений DOM в React?","/technical-interview/tasks/what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":313,"path":314,"isActive":68},"Если убрать в React VDOM/Fiber, и вручную изменять DOM, разве это не оптимально?","/technical-interview/tasks/if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":316,"path":317,"isActive":68},"Есть блок кода. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":319,"path":320,"isActive":68},"Есть код, в котором список и кнопка. Что в реальном DOM изменится после нажатия на кнопку?","/technical-interview/tasks/there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":322,"path":323,"isActive":68},"Зачем нужен Redux (Mobx/Effector)? Зачем нужен менеджер состояния? Какие проблемы решает?","/technical-interview/tasks/why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":325,"path":326,"isActive":68},"Что мешает организовать централизованное состояние без менеджера состояния? Если организовать состояние механизмами реакта: контекстом, стейтом, в чем проблема? Что менеджеры состояния привносят?","/technical-interview/tasks/what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"title":328,"list":329,"isOpened":68},"Алгоритмы",[330,333],{"name":331,"path":332,"isActive":68},"Что такое алгоритмическая сложность?","/technical-interview/tasks/what-is-algorithmic-complexity",{"name":334,"path":335,"isActive":68},"Какая алгоритмическая сложность у \"быстрой сортировки\"?","/technical-interview/tasks/what-is-the-algorithmic-complexity-of-quick-sort",{"title":337,"list":338,"isOpened":68},"Дебаггинг",[339],{"name":340,"path":341,"isActive":68},"Как диагностировать и исправить нежелательное изменение цвета фона по клику на кнопку, если исходный код сайта запутан и недоступен для прямого чтения?","/technical-interview/tasks/how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"title":343,"list":344,"isOpened":68},"Компьютерные сети",[345,348,351,354,357,360,363,366,369,372,375,378,381,384,387,390,393,396,399,402],{"name":346,"path":347,"isActive":68},"Как браузер после ввода домена понимает, откуда брать сайт?","/technical-interview/tasks/how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":349,"path":350,"isActive":68},"Что такое DNS, как DNS находит нужный IP-адрес?","/technical-interview/tasks/what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":352,"path":353,"isActive":68},"Как домен попадает в DNS в таблицу соответствия: домен – ip","/technical-interview/tasks/how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":355,"path":356,"isActive":68},"Как браузер решает, какое соединение ему открывать, TCP или UDP?","/technical-interview/tasks/how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":358,"path":359,"isActive":68},"Ключевые отличия TCP и UDP","/technical-interview/tasks/key-differences-between-tcp-and-udp",{"name":361,"path":362,"isActive":68},"\"TCP/IP\" - кем является TCP, а кем IP в данном случае?","/technical-interview/tasks/tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":364,"path":365,"isActive":68},"Что такое HTTP и из чего состоит?","/technical-interview/tasks/what-is-http-and-what-does-it-consist-of",{"name":367,"path":368,"isActive":68},"Что такое заголовки в HTTP и зачем они нужны?","/technical-interview/tasks/what-are-http-headers-and-why-do-we-need-them",{"name":370,"path":371,"isActive":68},"Что такое параметры в HTTP?","/technical-interview/tasks/what-are-http-parameters",{"name":373,"path":374,"isActive":68},"Где находится HTML-код в структуре HTTP-ответа?","/technical-interview/tasks/where-is-the-html-code-located-in-the-http-response-structure",{"name":376,"path":377,"isActive":68},"Чем отличаются 1.0, 1.1, 2.0, 3.0 версии HTTP?","/technical-interview/tasks/what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":379,"path":380,"isActive":68},"Пользователь авторизован на сайте. Как сервер узнает об этом с последующими другими заходами, что «я – авторизованный пользователь»?","/technical-interview/tasks/the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":382,"path":383,"isActive":68},"Что такое cookie?","/technical-interview/tasks/what-is-a-cookie",{"name":385,"path":386,"isActive":68},"Кто является инициатором записи cookie в браузере?","/technical-interview/tasks/who-initiates-the-cookie-recording-in-the-browser",{"name":388,"path":389,"isActive":68},"Есть ли возможность с клиента (с браузера) управлять cookie?","/technical-interview/tasks/is-it-possible-to-manage-cookies-from-the-client-browser",{"name":391,"path":392,"isActive":68},"Верно ли утверждение, что злоумышленник, контролирующий роутер и прослушивающий трафик, может получить логины и пароли от сайтов, на которые заходит клиент?","/technical-interview/tasks/is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":394,"path":395,"isActive":68},"Всё, что идет по HTTPS – оно защищено?","/technical-interview/tasks/is-everything-that-goes-through-https-secure",{"name":397,"path":398,"isActive":68},"Все данные зашифрованы, используется https. Хакер взламывает dns и делает подмену одного ip на другой, на фишинговый сайт. В этом случае, злоумышленник может получить данные (логин \\ пароль)?","/technical-interview/tasks/all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":400,"path":401,"isActive":68},"Есть веб-приложение. Помимо HTTP, какие протоколы того же уровня (Application Layer) можно дополнительно использовать в веб-приложении в браузере?","/technical-interview/tasks/there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":403,"path":404,"isActive":68},"Каким способом может выполняться авторизация пользователя на сайте?","/technical-interview/tasks/how-can-a-user-be-authorized-on-a-website",{"title":406,"list":407,"isOpened":68},"Отрисовка в браузере",[408,411,414,417,420,423],{"name":409,"path":410,"isActive":68},"Что происходит, когда HTTP прислал HTML? Что браузер дальше делает c HTML с учетом того, что она валидная?","/technical-interview/tasks/what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":412,"path":413,"isActive":68},"Как браузер парсит JavaScript и изображения при рендеринге?","/technical-interview/tasks/how-the-browser-parses-javascript-and-images-when-rendering",{"name":415,"path":416,"isActive":68},"Что в браузере блокирует рендеринг страницы?","/technical-interview/tasks/what-is-blocking-the-page-rendering-in-the-browser",{"name":418,"path":419,"isActive":68},"Что такое DOM в браузере? Что такое CSSOM?","/technical-interview/tasks/what-is-dom-in-a-browser-what-is-cssom",{"name":421,"path":422,"isActive":68},"Что является узлами в DOM?","/technical-interview/tasks/what-are-nodes-in-the-dom",{"name":424,"path":425,"isActive":68},"Из чего состоит CSSOM?","/technical-interview/tasks/what-does-cssom-consist-of",{"title":427,"list":428,"isOpened":68},"Ревью кода",[429],{"name":430,"path":431,"isActive":68},"По каким характеристикам, ревьюер понимает, что данный код - хороший, а этот код - плохой?","/technical-interview/tasks/how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"title":433,"list":434,"isOpened":68},"Теория вероятности",[435,438,441],{"name":436,"path":437,"isActive":68},"В комнате три человека. Какова вероятность того, что хотя бы двое из них одного пола? То есть два и более.","/technical-interview/tasks/there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":439,"path":440,"isActive":68},"Есть монета. Ее подбрасывают пять раз подряд. Каждый раз записывается, что выпало - орел или решка. Сколько разных последовательностей орлов и решек может при этом получиться?","/technical-interview/tasks/there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":442,"path":443,"isActive":68},"Как гарантированно найти лёгкую фальшивую монету среди 8 за минимальное число взвешиваний на чашечных весах?","/technical-interview/tasks/how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"slugs":445},[446,449,451,453,455,458,461,463,465,467,469,471,474,476,478,480,482,484,486,488,490,492,494,496,498,500,502,504,506,508,510,512,514,516,518,520,522,524,526,528,530,532,534,536,538,540,541,543,545,547,549,551,554,556,558,560,562,564,566,568,570,572,574,576,578,580,582,584,586,588,590,592,594,596,598,600,602,604,606,608,610,612,614,616,618,620,622,624,626,628,630,632,634,636,638,640,642,644,646,648,650,652,654,655,657,659,661,663],{"name":447,"value":448},"Теоретические задания","theoretical-tasks",{"name":202,"value":450},"what-this-code-will-return-typeof-function",{"name":102,"value":452},"where-to-begin",{"name":169,"value":454},"why-is-it-dangerous-to-write-directly-to-the-prototypes-of-basic-types",{"name":456,"value":457},"Backend","backend",{"name":459,"value":460},"Frontend","frontend",{"name":166,"value":462},"prototype-what-logical-values-will-be-received-in-console-log",{"name":283,"value":464},"odd-numbers-should-be-sorted-in-ascending-order-and-even-numbers-should-remain-in-their-original-positions",{"name":274,"value":466},"find-non-repeating-numbers-in-an-array",{"name":247,"value":468},"arr-push-0-will-affect-the-array-in-the-same-way-as-if-we-performed",{"name":253,"value":470},"the-string-one-two-three-four-five-is-given-it-is-necessary-to-make-a-nested-object-out-of-the-string",{"name":472,"value":473},"Реализовать функцию, похоже как в Jquery","implement-a-function-similar-to-jquery",{"name":259,"value":475},"for-each-nested-object-you-need-to-add-the-level-property-which-is-equal-to-a-number-the-nesting-number",{"name":175,"value":477},"what-value-will-the-console-output-with-object-property",{"name":178,"value":479},"what-will-be-displayed-in-console-log-arr-0-arr-0",{"name":250,"value":481},"returns-an-array-from-1-to-n-replacing-numbers-that-are-multiples-of-3-with-fizz-numbers-that-are-multiples-of-5-with-buzz-and-numbers-that-are-multiples-of-both-3-and-5-with-fizzbuzz",{"name":280,"value":483},"checks-whether-two-strings-are-anagrams-of-each-other",{"name":286,"value":485},"determines-whether-a-word-is-a-palindrome",{"name":265,"value":487},"there-is-an-array-containing-objects-with-dates-that-need-to-be-sorted-by-date",{"name":292,"value":489},"implement-a-function-that-accepts-arguments-1-b-1c-and-the-return-string-1-b-1c",{"name":256,"value":491},"given-a-tree-nested-object-it-is-necessary-to-find-the-sum-of-all-vertices",{"name":262,"value":493},"for-each-branch-of-the-tree-write-down-the-nesting-number-of-this-branch",{"name":268,"value":495},"there-are-words-in-the-array-it-is-necessary-to-determine-whether-they-consist-of-the-same-letters",{"name":301,"value":497},"the-numbers-from-1-to-100-are-in-the-array-they-are-randomly-mixed-but-it-lacks-one-number-from-this-sequence-it-is-necessary-to-find-him",{"name":271,"value":499},"there-is-a-string-consisting-of-different-brackets-it-is-necessary-to-check-whether-all-are-closed",{"name":277,"value":501},"write-a-function-that-will-make-an-object-out-of-an-array",{"name":181,"value":503},"what-will-console-log-output-as-a-result-of-executing-the-while-loop",{"name":184,"value":505},"there-is-a-function-and-an-object-write-all-the-ways-you-know-to-output-the-value-of-x-from-an-object-in-the-console-using-the-function",{"name":196,"value":507},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-negative-string-index",{"name":199,"value":509},"what-will-the-console-output-if-an-array-element-is-deleted-using-the-delete-operator",{"name":298,"value":511},"unifying-values-in-an-array",{"name":289,"value":513},"flattening-the-array",{"name":187,"value":515},"what-will-the-book-get-upper-name-method-return",{"name":295,"value":517},"string-compression",{"name":193,"value":519},"what-will-the-console-display-if-a-property-is-assigned-to-an-array-using-a-positive-string-index",{"name":205,"value":521},"what-will-happen-when-an-object-is-passed-as-an-argument-to-a-function-and-the-code-is-executed",{"name":346,"value":523},"how-does-the-browser-know-where-to-get-the-website-after-entering-the-domain",{"name":352,"value":525},"how-does-a-domain-get-into-the-dns-mapping-table-domain-ip",{"name":355,"value":527},"how-does-a-browser-decide-whether-to-open-a-tcp-or-udp-connection",{"name":358,"value":529},"key-differences-between-tcp-and-udp",{"name":361,"value":531},"tcp-ip-who-is-tcp-and-who-is-ip-in-this-case",{"name":364,"value":533},"what-is-http-and-what-does-it-consist-of",{"name":367,"value":535},"what-are-http-headers-and-why-do-we-need-them",{"name":370,"value":537},"what-are-http-parameters",{"name":373,"value":539},"where-is-the-html-code-located-in-the-http-response-structure",{"name":80,"value":12},{"name":376,"value":542},"what-are-the-differences-between-http-versions-1-0-1-1-2-0-and-3-0",{"name":379,"value":544},"the-user-is-logged-in-on-the-website-how-does-the-server-know-that-i-am-an-authorized-user-when-the-user-logs-in-again",{"name":382,"value":546},"what-is-a-cookie",{"name":385,"value":548},"who-initiates-the-cookie-recording-in-the-browser",{"name":388,"value":550},"is-it-possible-to-manage-cookies-from-the-client-browser",{"name":552,"value":553},"Лайвкодинг","livecoding",{"name":172,"value":555},"what-will-the-following-code-return-object-create-null-has-own-property-to-string",{"name":394,"value":557},"is-everything-that-goes-through-https-secure",{"name":397,"value":559},"all-data-is-encrypted-https-is-used-let-s-assume-a-hacker-hacks-the-dns-and-makes-a-substitution-of-one-ip-for-another-a-phishing-site",{"name":400,"value":561},"there-is-a-web-application-in-addition-to-http-what-other-protocols-of-the-same-level-application-layer-can-be-used-in-the-web-application-in-browser",{"name":412,"value":563},"how-the-browser-parses-javascript-and-images-when-rendering",{"name":409,"value":565},"what-happens-when-http-sends-html-what-does-the-browser-do-with-this-html-given-that-it-is-valid",{"name":415,"value":567},"what-is-blocking-the-page-rendering-in-the-browser",{"name":418,"value":569},"what-is-dom-in-a-browser-what-is-cssom",{"name":421,"value":571},"what-are-nodes-in-the-dom",{"name":424,"value":573},"what-does-cssom-consist-of",{"name":122,"value":575},"the-html-code-is-given-what-will-be-the-color-of-the-some-dummy-text",{"name":125,"value":577},"there-is-a-template-for-html-and-css-code-what-color-will-the-text-thus-constant-have",{"name":128,"value":579},"there-is-a-template-for-embedded-html-code-what-will-be-the-color-of-the-one-more-dummy-text",{"name":131,"value":581},"there-is-a-template-for-embedded-html-code-will-there-be-a-display-does-bodys-block-affect-span",{"name":134,"value":583},"there-is-an-html-code-will-font-weight-affect-span",{"name":137,"value":585},"what-are-the-differences-between-flexbox-and-grid",{"name":140,"value":587},"do-flexbox-and-grid-replace-each-other",{"name":143,"value":589},"there-are-css-and-js-animations-what-is-the-difference-between-them-and-which-is-faster-and-more-convenient",{"name":106,"value":591},"tasks",{"name":208,"value":593},"what-are-the-ways-to-declare-a-function-in-javascript",{"name":211,"value":595},"what-is-this-in-javascript",{"name":214,"value":597},"what-is-an-event-loop-and-how-does-it-work",{"name":217,"value":599},"what-happens-if-you-call-typeof-on-an-undeclared-variable",{"name":220,"value":601},"what-does-the-typeof-operator-show-in-javascript",{"name":223,"value":603},"what-types-of-data-exist-in-javascript",{"name":226,"value":605},"what-is-the-best-structure-to-use-for-storing-an-ordered-list-of-strings-in-javascript",{"name":229,"value":607},"what-will-typeof-return-for-an-array",{"name":232,"value":609},"why-does-the-typeof-operator-applied-to-an-array-return-an-object",{"name":235,"value":611},"if-you-need-to-store-a-list-of-unique-strings-which-data-structure-should-i-choose",{"name":238,"value":613},"what-does-typeof-return-for-new-set-in-javascript",{"name":307,"value":615},"what-is-react-used-for-and-what-problems-does-it-solve",{"name":313,"value":617},"if-you-remove-the-vdom-fiber-in-react-and-manually-change-the-dom-isn-t-that-optimal",{"name":316,"value":619},"there-is-a-block-of-code-what-changes-in-the-real-dom-after-clicking-the-button",{"name":319,"value":621},"there-is-a-code-in-which-there-is-a-list-and-a-button-what-will-change-in-the-real-dom-after-clicking-on-the-button",{"name":322,"value":623},"why-do-we-need-redux-mobx-effector-why-do-we-need-a-state-manager-what-problems-does-it-solve",{"name":340,"value":625},"how-can-diagnose-and-fix-unwanted-background-color-changes-when-clicking-on-a-button-if-the-source-code-of-the-site-is-confusing-and-inaccessible-to-direct-reading",{"name":149,"value":627},"developed-it-committed-it-and-launched-it-it-turned-out-that-i-had-pushed-it-to-the-wrong-branch-or-rather-the-commit-was-in-the-wrong-branch-what-actions",{"name":152,"value":629},"git-has-several-options-for-merging-branches-which-ones-how-are-they-different",{"name":155,"value":631},"what-are-the-branching-strategies-for-the-team-what-is-it",{"name":430,"value":633},"how-does-a-reviewer-know-which-code-is-good-and-which-code-is-bad",{"name":113,"value":635},"here-is-a-fragment-of-a-bash-script-cd-mkdir-foo-what-is-happening-in-this-script",{"name":116,"value":637},"here-is-a-fragment-of-a-bash-script-target-ps-af-grep-1-head-n-1",{"name":331,"value":639},"what-is-algorithmic-complexity",{"name":334,"value":641},"what-is-the-algorithmic-complexity-of-quick-sort",{"name":241,"value":643},"why-do-two-objects-with-the-same-content-return-false-when-compared-in-javascript",{"name":403,"value":645},"how-can-a-user-be-authorized-on-a-website",{"name":244,"value":647},"what-is-the-difference-between-micro-and-macro-tasks-in-javascript",{"name":436,"value":649},"there-are-three-people-in-the-room-what-is-the-probability-that-at-least-two-of-them-are-of-the-same-sex-that-is-two-or-more",{"name":439,"value":651},"there-is-a-coin-it-is-tossed-five-times-in-a-row-each-time-it-is-recorded-whether-it-lands-on-heads-or-tails-how-many-different-sequences-of-heads-and-tails-can-be-obtained",{"name":442,"value":653},"how-can-you-guarantee-to-find-an-easy-fake-coin-among-8-in-the-minimum-number-of-weighings-on-a-balance-scale",{"name":96,"value":97},{"name":391,"value":656},"is-it-true-that-an-attacker-who-controls-a-router-and-listens-to-traffic-can-obtain-logins-and-passwords-from-websites-that-a-client-visits",{"name":349,"value":658},"what-is-dns-and-how-does-dns-find-the-correct-ip-address",{"name":190,"value":660},"variables-are-declared-as-follows-specify-the-correct-statement",{"name":310,"value":662},"what-is-the-underlying-mechanism-for-optimizing-dom-updates-in-react",{"name":325,"value":664},"what-prevents-you-from-organizing-a-centralized-state-without-a-state-manager-if-you-organize-the-state-using-react-context-and-state-mechanisms-what-is-the-problem-what-do-state-managers-add",{"cooperation":666,"copyright":669,"reportError":670,"socialNetwork":672},{"link":667,"title":668},"https://t.me/baurinanton","Сотрудничество","© “GOOD WEB JOB!”",{"label":671,"link":667},"Сообщить об ошибке",{"label":673,"socialNetworkList":674},"Мы в соцсетях:",[675,678,681],{"icon":19,"link":676,"title":677},"https://max.ru/u/f9LHodD0cOKMaukdnnahTeL5pwvjrPfUaZ4S8_1rsNy9I9qsmc9Ar3kP_y8","Max",{"icon":679,"link":667,"title":680},"ic:baseline-telegram","Telegram",{"icon":682,"link":683,"title":684},"ri:vk-fill","https://vk.com/baurinanton","VK",{"data":686,"body":687},{},{"type":688,"children":689},"root",[690],{"type":691,"tag":692,"props":693,"children":694},"element","p",{},[695],{"type":696,"value":80},"text",{"data":698,"body":699},{},{"type":688,"children":700},[701],{"type":691,"tag":692,"props":702,"children":703},{},[704],{"type":696,"value":705},"HTML — это протокол сетевого обмена, который определяет, как браузер отправляет запросы и получает ответы от сервера, включая заголовки и коды состояния.",{"data":707,"body":708},{},{"type":688,"children":709},[710],{"type":691,"tag":692,"props":711,"children":712},{},[713],{"type":696,"value":71},{"data":715,"body":716},{},{"type":688,"children":717},[718],{"type":691,"tag":692,"props":719,"children":720},{},[721],{"type":696,"value":74},{"data":723,"body":724},{},{"type":688,"children":725},[726],{"type":691,"tag":692,"props":727,"children":728},{},[729],{"type":696,"value":77},{"data":731,"body":732},{},{"type":688,"children":733},[734],{"type":691,"tag":692,"props":735,"children":736},{},[737],{"type":696,"value":78},{"data":739,"body":740},{},{"type":688,"children":741},[742],{"type":691,"tag":692,"props":743,"children":744},{},[745,751],{"type":691,"tag":746,"props":747,"children":748},"strong",{},[749],{"type":696,"value":750},"Правильный ответ: 2",{"type":696,"value":752}," - HTML — это язык разметки, который задаёт структуру и смысл веб‑контента; браузер парсит его, строит DOM и затем отображает страницу вместе со стилями и скриптами.",{"data":754,"body":755},{},{"type":688,"children":756},[757,762,767,772],{"type":691,"tag":692,"props":758,"children":759},{},[760],{"type":696,"value":761},"HTML (HyperText Markup Language) — язык разметки, предназначенный для описания структуры и смысла (семантики) содержимого веб‑страницы: заголовков, абзацев, списков, ссылок, изображений, форм и прочих частей документа.",{"type":691,"tag":692,"props":763,"children":764},{},[765],{"type":696,"value":766},"HTML не является языком программирования: в нём нет вычислительной модели с переменными, циклами и ветвлениями как у JavaScript, поэтому HTML описывает “что это такое” (например, “это заголовок”, “это навигация”, “это ссылка”), а не “что делать”.",{"type":691,"tag":692,"props":768,"children":769},{},[770],{"type":696,"value":771},"Современное понимание HTML строится вокруг веб‑платформы:",{"type":691,"tag":773,"props":774,"children":775},"ul",{},[776,782,787],{"type":691,"tag":777,"props":778,"children":779},"li",{},[780],{"type":696,"value":781},"HTML задаёт структурный каркас и смысл.",{"type":691,"tag":777,"props":783,"children":784},{},[785],{"type":696,"value":786},"CSS задаёт представление (оформление).",{"type":691,"tag":777,"props":788,"children":789},{},[790],{"type":696,"value":791},"JavaScript задаёт поведение (интерактивность) и может изменять структуру через DOM.",{"data":793,"body":794},{},{"type":688,"children":795},[796],{"type":691,"tag":692,"props":797,"children":798},{},[799],{"type":696,"value":18},{"data":801,"body":802},{},{"type":688,"children":803},[804,809,814,948,953],{"type":691,"tag":692,"props":805,"children":806},{},[807],{"type":696,"value":808},"HTML‑документ — это текст, который браузер читает (парсит) и превращает во внутреннюю модель DOM (Document Object Model), то есть дерево узлов, с которым работают рендеринг, стили и скрипты.",{"type":691,"tag":692,"props":810,"children":811},{},[812],{"type":696,"value":813},"Ключевые понятия:",{"type":691,"tag":773,"props":815,"children":816},{},[817,872,891,938,943],{"type":691,"tag":777,"props":818,"children":819},{},[820,822,828,830,836,837,843,844,850,851,856,857,863,864,870],{"type":696,"value":821},"Элемент: логическая часть документа, например ",{"type":691,"tag":823,"props":824,"children":826},"code",{"className":825},[],[827],{"type":696,"value":692},{"type":696,"value":829},", ",{"type":691,"tag":823,"props":831,"children":833},{"className":832},[],[834],{"type":696,"value":835},"a",{"type":696,"value":829},{"type":691,"tag":823,"props":838,"children":840},{"className":839},[],[841],{"type":696,"value":842},"header",{"type":696,"value":829},{"type":691,"tag":823,"props":845,"children":847},{"className":846},[],[848],{"type":696,"value":849},"main",{"type":696,"value":829},{"type":691,"tag":823,"props":852,"children":854},{"className":853},[],[855],{"type":696,"value":90},{"type":696,"value":829},{"type":691,"tag":823,"props":858,"children":860},{"className":859},[],[861],{"type":696,"value":862},"section",{"type":696,"value":829},{"type":691,"tag":823,"props":865,"children":867},{"className":866},[],[868],{"type":696,"value":869},"button",{"type":696,"value":871},".",{"type":691,"tag":777,"props":873,"children":874},{},[875,877,882,884,890],{"type":696,"value":876},"Теги: синтаксическая запись элемента; обычно есть открывающий и закрывающий, например ",{"type":691,"tag":823,"props":878,"children":880},{"className":879},[],[881],{"type":696,"value":692},{"type":696,"value":883}," … ",{"type":691,"tag":823,"props":885,"children":887},{"className":886},[],[888],{"type":696,"value":889},"\u003C/p>",{"type":696,"value":871},{"type":691,"tag":777,"props":892,"children":893},{},[894,896,902,903,909,910,916,917,923,924,930,931,937],{"type":696,"value":895},"Атрибуты: параметры элемента в открывающем теге, например ",{"type":691,"tag":823,"props":897,"children":899},{"className":898},[],[900],{"type":696,"value":901},"href",{"type":696,"value":829},{"type":691,"tag":823,"props":904,"children":906},{"className":905},[],[907],{"type":696,"value":908},"src",{"type":696,"value":829},{"type":691,"tag":823,"props":911,"children":913},{"className":912},[],[914],{"type":696,"value":915},"alt",{"type":696,"value":829},{"type":691,"tag":823,"props":918,"children":920},{"className":919},[],[921],{"type":696,"value":922},"id",{"type":696,"value":829},{"type":691,"tag":823,"props":925,"children":927},{"className":926},[],[928],{"type":696,"value":929},"class",{"type":696,"value":829},{"type":691,"tag":823,"props":932,"children":934},{"className":933},[],[935],{"type":696,"value":936},"name",{"type":696,"value":871},{"type":691,"tag":777,"props":939,"children":940},{},[941],{"type":696,"value":942},"Текстовые узлы: текст внутри элементов; это отдельные узлы DOM.",{"type":691,"tag":777,"props":944,"children":945},{},[946],{"type":696,"value":947},"Комментарии: существуют в исходнике и DOM, но не должны использоваться как носитель логики.",{"type":691,"tag":692,"props":949,"children":950},{},[951],{"type":696,"value":952},"Базовый скелет HTML‑страницы:",{"type":691,"tag":954,"props":955,"children":959},"pre",{"className":956,"code":958,"language":696},[957],"language-text","\u003C!DOCTYPE html>\n\u003Chtml lang=\"ru\">\n  \u003Chead>\n    \u003Cmeta charset=\"utf-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    \u003Ctitle>пример\u003C/title>\n  \u003C/head>\n  \u003Cbody>\n    \u003Ch1>заголовок\u003C/h1>\n    \u003Cp>абзац с \u003Ca href=\"/about\">ссылкой\u003C/a>.\u003C/p>\n  \u003C/body>\n\u003C/html>\n",[960],{"type":691,"tag":823,"props":961,"children":963},{"__ignoreMap":962},"",[964],{"type":696,"value":958},{"data":966,"body":967},{},{"type":688,"children":968},[969],{"type":691,"tag":692,"props":970,"children":971},{},[972],{"type":696,"value":29},{"data":974,"body":975},{},{"type":688,"children":976},[977,990,998,1003,1077,1082,1091,1096,1171,1176],{"type":691,"tag":692,"props":978,"children":979},{},[980,982,988],{"type":696,"value":981},"Зачем нужен ",{"type":691,"tag":823,"props":983,"children":985},{"className":984},[],[986],{"type":696,"value":987},"\u003C!DOCTYPE html>",{"type":696,"value":989},":",{"type":691,"tag":773,"props":991,"children":992},{},[993],{"type":691,"tag":777,"props":994,"children":995},{},[996],{"type":696,"value":997},"Он переключает браузер в стандартизованный режим рендеринга (вместо “quirks mode”), что снижает вероятность странностей в разметке и стилях.",{"type":691,"tag":692,"props":999,"children":1000},{},[1001],{"type":696,"value":1002},"Типы элементов по форме записи:",{"type":691,"tag":773,"props":1004,"children":1005},{},[1006,1036],{"type":691,"tag":777,"props":1007,"children":1008},{},[1009,1011,1017,1018,1023,1024,1029,1030,1035],{"type":696,"value":1010},"Обычные (с парными тегами): ",{"type":691,"tag":823,"props":1012,"children":1014},{"className":1013},[],[1015],{"type":696,"value":1016},"div",{"type":696,"value":829},{"type":691,"tag":823,"props":1019,"children":1021},{"className":1020},[],[1022],{"type":696,"value":692},{"type":696,"value":829},{"type":691,"tag":823,"props":1025,"children":1027},{"className":1026},[],[1028],{"type":696,"value":835},{"type":696,"value":829},{"type":691,"tag":823,"props":1031,"children":1033},{"className":1032},[],[1034],{"type":696,"value":862},{"type":696,"value":871},{"type":691,"tag":777,"props":1037,"children":1038},{},[1039,1041,1047,1048,1054,1055,1061,1062,1068,1069,1075],{"type":696,"value":1040},"Пустые (void elements): ",{"type":691,"tag":823,"props":1042,"children":1044},{"className":1043},[],[1045],{"type":696,"value":1046},"img",{"type":696,"value":829},{"type":691,"tag":823,"props":1049,"children":1051},{"className":1050},[],[1052],{"type":696,"value":1053},"br",{"type":696,"value":829},{"type":691,"tag":823,"props":1056,"children":1058},{"className":1057},[],[1059],{"type":696,"value":1060},"meta",{"type":696,"value":829},{"type":691,"tag":823,"props":1063,"children":1065},{"className":1064},[],[1066],{"type":696,"value":1067},"link",{"type":696,"value":829},{"type":691,"tag":823,"props":1070,"children":1072},{"className":1071},[],[1073],{"type":696,"value":1074},"input",{"type":696,"value":1076}," (у них нет закрывающего тега и нельзя помещать внутрь содержимое).",{"type":691,"tag":692,"props":1078,"children":1079},{},[1080],{"type":696,"value":1081},"Пример типичных пустых элементов:",{"type":691,"tag":954,"props":1083,"children":1086},{"className":1084,"code":1085,"language":696},[957],"\u003Cmeta charset=\"utf-8\">\n\u003Clink rel=\"stylesheet\" href=\"/styles.css\">\n\u003Cimg src=\"/logo.png\" alt=\"логотип\">\n\u003Cinput type=\"email\" name=\"email\">\n",[1087],{"type":691,"tag":823,"props":1088,"children":1089},{"__ignoreMap":962},[1090],{"type":696,"value":1085},{"type":691,"tag":692,"props":1092,"children":1093},{},[1094],{"type":696,"value":1095},"Атрибуты по смыслу:",{"type":691,"tag":773,"props":1097,"children":1098},{},[1099,1145],{"type":691,"tag":777,"props":1100,"children":1101},{},[1102,1104,1109,1110,1115,1116,1122,1123,1129,1130,1136,1137,1143],{"type":696,"value":1103},"Глобальные: применимы почти везде (например, ",{"type":691,"tag":823,"props":1105,"children":1107},{"className":1106},[],[1108],{"type":696,"value":922},{"type":696,"value":829},{"type":691,"tag":823,"props":1111,"children":1113},{"className":1112},[],[1114],{"type":696,"value":929},{"type":696,"value":829},{"type":691,"tag":823,"props":1117,"children":1119},{"className":1118},[],[1120],{"type":696,"value":1121},"hidden",{"type":696,"value":829},{"type":691,"tag":823,"props":1124,"children":1126},{"className":1125},[],[1127],{"type":696,"value":1128},"title",{"type":696,"value":829},{"type":691,"tag":823,"props":1131,"children":1133},{"className":1132},[],[1134],{"type":696,"value":1135},"lang",{"type":696,"value":829},{"type":691,"tag":823,"props":1138,"children":1140},{"className":1139},[],[1141],{"type":696,"value":1142},"data-*",{"type":696,"value":1144},").",{"type":691,"tag":777,"props":1146,"children":1147},{},[1148,1150,1156,1157,1163,1164,1170],{"type":696,"value":1149},"Булевы: наличие атрибута означает “включено”, например ",{"type":691,"tag":823,"props":1151,"children":1153},{"className":1152},[],[1154],{"type":696,"value":1155},"disabled",{"type":696,"value":829},{"type":691,"tag":823,"props":1158,"children":1160},{"className":1159},[],[1161],{"type":696,"value":1162},"checked",{"type":696,"value":829},{"type":691,"tag":823,"props":1165,"children":1167},{"className":1166},[],[1168],{"type":696,"value":1169},"required",{"type":696,"value":871},{"type":691,"tag":692,"props":1172,"children":1173},{},[1174],{"type":696,"value":1175},"Пример булевых атрибутов:",{"type":691,"tag":954,"props":1177,"children":1180},{"className":1178,"code":1179,"language":696},[957],"\u003Cbutton disabled>недоступно\u003C/button>\n\u003Cinput type=\"checkbox\" checked>\n",[1181],{"type":691,"tag":823,"props":1182,"children":1183},{"__ignoreMap":962},[1184],{"type":696,"value":1179},{"data":1186,"body":1187},{},{"type":688,"children":1188},[1189],{"type":691,"tag":692,"props":1190,"children":1191},{},[1192,1194,1199,1201,1206],{"type":696,"value":1193},"Наличие ",{"type":691,"tag":823,"props":1195,"children":1197},{"className":1196},[],[1198],{"type":696,"value":922},{"type":696,"value":1200}," должно быть уникальным в пределах документа; повторение одинаковых ",{"type":691,"tag":823,"props":1202,"children":1204},{"className":1203},[],[1205],{"type":696,"value":922},{"type":696,"value":1207}," ломает предсказуемость поиска элементов и якорных ссылок.",{"data":1209,"body":1210},{},{"type":688,"children":1211},[1212,1217,1222,1231,1236,1249,1254],{"type":691,"tag":692,"props":1213,"children":1214},{},[1215],{"type":696,"value":1216},"После получения HTML (обычно по HTTP) браузер запускает парсер, строит DOM и параллельно может запрашивать дополнительные ресурсы: CSS, изображения, шрифты, скрипты.",{"type":691,"tag":692,"props":1218,"children":1219},{},[1220],{"type":696,"value":1221},"Схема “HTML → отображение”:",{"type":691,"tag":954,"props":1223,"children":1226},{"className":1224,"code":1225,"language":696},[957],"HTML-текст\n  |\n  v\nПарсинг\n  |\n  v\nDOM-дерево \u003C---- JavaScript читает/изменяет DOM\n  |\n  v\nCSSOM (модель стилей) + расчёт стилей\n  |\n  v\nRender Tree (что реально рисуется)\n  |\n  v\nLayout (геометрия) -> Paint (рисование) -> Composite (сборка слоёв)\n",[1227],{"type":691,"tag":823,"props":1228,"children":1229},{"__ignoreMap":962},[1230],{"type":696,"value":1225},{"type":691,"tag":692,"props":1232,"children":1233},{},[1234],{"type":696,"value":1235},"Роль JavaScript в контексте HTML:",{"type":691,"tag":773,"props":1237,"children":1238},{},[1239,1244],{"type":691,"tag":777,"props":1240,"children":1241},{},[1242],{"type":696,"value":1243},"JavaScript может создавать/удалять элементы, менять атрибуты, добавлять классы, подписываться на события (клик, ввод, отправка формы).",{"type":691,"tag":777,"props":1245,"children":1246},{},[1247],{"type":696,"value":1248},"Любое изменение DOM/атрибутов потенциально влияет на стили и перерисовку.",{"type":691,"tag":692,"props":1250,"children":1251},{},[1252],{"type":696,"value":1253},"Пример: изменение текста в DOM (важно: исходник HTML не переписывается, меняется DOM в памяти):",{"type":691,"tag":954,"props":1255,"children":1258},{"className":1256,"code":1257,"language":696},[957],"\u003Cp id=\"status\">загрузка...\u003C/p>\n\u003Cscript>\n  const el = document.getElementById('status');\n  el.textContent = 'готово';\n\u003C/script>\n\nВстраивание скриптов в середине документа без понимания порядка выполнения может приводить к ошибкам “элемент ещё не существует”; типовое решение — размещение `script` перед `\u003C/body>` или использование `defer` в `head`, например `script defer src=\"/app.js\"`.\n",[1259],{"type":691,"tag":823,"props":1260,"children":1261},{"__ignoreMap":962},[1262],{"type":696,"value":1257},{"data":1264,"body":1265},{},{"type":688,"children":1266},[1267],{"type":691,"tag":692,"props":1268,"children":1269},{},[1270],{"type":696,"value":45},{"data":1272,"body":1273},{},{"type":688,"children":1274},[1275,1309,1314,1358,1363,1372,1377,1400,1405,1414,1419],{"type":691,"tag":692,"props":1276,"children":1277},{},[1278,1280,1285,1287,1292,1294,1300,1302,1307],{"type":696,"value":1279},"Семантика — это выбор элементов по смыслу, а не по внешнему виду: ",{"type":691,"tag":823,"props":1281,"children":1283},{"className":1282},[],[1284],{"type":696,"value":869},{"type":696,"value":1286}," для действия, ",{"type":691,"tag":823,"props":1288,"children":1290},{"className":1289},[],[1291],{"type":696,"value":835},{"type":696,"value":1293}," для перехода по ссылке, ",{"type":691,"tag":823,"props":1295,"children":1297},{"className":1296},[],[1298],{"type":696,"value":1299},"nav",{"type":696,"value":1301}," для навигации, ",{"type":691,"tag":823,"props":1303,"children":1305},{"className":1304},[],[1306],{"type":696,"value":849},{"type":696,"value":1308}," для основного содержимого.",{"type":691,"tag":692,"props":1310,"children":1311},{},[1312],{"type":696,"value":1313},"Практическое правило выбора:",{"type":691,"tag":773,"props":1315,"children":1316},{},[1317,1335,1346],{"type":691,"tag":777,"props":1318,"children":1319},{},[1320,1322,1327,1329,1334],{"type":696,"value":1321},"Если происходит переход по URL, уместен ",{"type":691,"tag":823,"props":1323,"children":1325},{"className":1324},[],[1326],{"type":696,"value":835},{"type":696,"value":1328}," с ",{"type":691,"tag":823,"props":1330,"children":1332},{"className":1331},[],[1333],{"type":696,"value":901},{"type":696,"value":871},{"type":691,"tag":777,"props":1336,"children":1337},{},[1338,1340,1345],{"type":696,"value":1339},"Если выполняется действие (открыть модалку, отправить запрос, переключить состояние), уместен ",{"type":691,"tag":823,"props":1341,"children":1343},{"className":1342},[],[1344],{"type":696,"value":869},{"type":696,"value":871},{"type":691,"tag":777,"props":1347,"children":1348},{},[1349,1351,1356],{"type":696,"value":1350},"Если требуется просто контейнер без смысла, уместен ",{"type":691,"tag":823,"props":1352,"children":1354},{"className":1353},[],[1355],{"type":696,"value":1016},{"type":696,"value":1357}," (но это крайний вариант, когда семантического элемента нет).",{"type":691,"tag":692,"props":1359,"children":1360},{},[1361],{"type":696,"value":1362},"Пример семантической структуры страницы:",{"type":691,"tag":954,"props":1364,"children":1367},{"className":1365,"code":1366,"language":696},[957],"\u003Cheader>\n  \u003Cnav aria-label=\"основная навигация\">\n    \u003Ca href=\"/\">главная\u003C/a>\n    \u003Ca href=\"/articles\">статьи\u003C/a>\n    \u003Ca href=\"/contacts\">контакты\u003C/a>\n  \u003C/nav>\n\u003C/header>\n\n\u003Cmain>\n  \u003Carticle>\n    \u003Ch1>заголовок статьи\u003C/h1>\n\n    \u003Csection>\n      \u003Ch2>введение\u003C/h2>\n      \u003Cp>основная мысль и контекст.\u003C/p>\n    \u003C/section>\n\n    \u003Csection>\n      \u003Ch2>детали\u003C/h2>\n      \u003Cul>\n        \u003Cli>пункт списка\u003C/li>\n        \u003Cli>ещё пункт\u003C/li>\n      \u003C/ul>\n    \u003C/section>\n  \u003C/article>\n\u003C/main>\n\n\u003Cfooter>\n  \u003Cp>служебная информация\u003C/p>\n\u003C/footer>\n",[1368],{"type":691,"tag":823,"props":1369,"children":1370},{"__ignoreMap":962},[1371],{"type":696,"value":1366},{"type":691,"tag":692,"props":1373,"children":1374},{},[1375],{"type":696,"value":1376},"Доступность (a11y) тесно связана с HTML, потому что:",{"type":691,"tag":773,"props":1378,"children":1379},{},[1380,1385,1390],{"type":691,"tag":777,"props":1381,"children":1382},{},[1383],{"type":696,"value":1384},"Семантические элементы дают экранным дикторам и вспомогательным технологиям правильные роли.",{"type":691,"tag":777,"props":1386,"children":1387},{},[1388],{"type":696,"value":1389},"Правильные подписи форм (label) делают поля понятными.",{"type":691,"tag":777,"props":1391,"children":1392},{},[1393,1398],{"type":691,"tag":823,"props":1394,"children":1396},{"className":1395},[],[1397],{"type":696,"value":915},{"type":696,"value":1399}," у изображений обеспечивает альтернативное описание.",{"type":691,"tag":692,"props":1401,"children":1402},{},[1403],{"type":696,"value":1404},"Пример доступной формы:",{"type":691,"tag":954,"props":1406,"children":1409},{"className":1407,"code":1408,"language":696},[957],"\u003Cform action=\"/subscribe\" method=\"post\">\n  \u003Cfieldset>\n    \u003Clegend>подписка\u003C/legend>\n\n    \u003Clabel for=\"email\">email\u003C/label>\n    \u003Cinput id=\"email\" name=\"email\" type=\"email\" autocomplete=\"email\" required>\n\n    \u003Cbutton type=\"submit\">отправить\u003C/button>\n  \u003C/fieldset>\n\u003C/form>\n",[1410],{"type":691,"tag":823,"props":1411,"children":1412},{"__ignoreMap":962},[1413],{"type":696,"value":1408},{"type":691,"tag":692,"props":1415,"children":1416},{},[1417],{"type":696,"value":1418},"Пример изображения с альтернативным текстом:",{"type":691,"tag":954,"props":1420,"children":1423},{"className":1421,"code":1422,"language":696},[957],"\u003Cimg src=\"/team.jpg\" alt=\"команда проекта на встрече\">\n",[1424],{"type":691,"tag":823,"props":1425,"children":1426},{"__ignoreMap":962},[1427],{"type":696,"value":1422},{"data":1429,"body":1430},{},{"type":688,"children":1431},[1432],{"type":691,"tag":692,"props":1433,"children":1434},{},[1435,1437,1442,1444,1449],{"type":696,"value":1436},"Использование ",{"type":691,"tag":823,"props":1438,"children":1440},{"className":1439},[],[1441],{"type":696,"value":1016},{"type":696,"value":1443}," вместо ",{"type":691,"tag":823,"props":1445,"children":1447},{"className":1446},[],[1448],{"type":696,"value":869},{"type":696,"value":1450}," для кликабельных элементов ухудшает доступность и управление с клавиатуры; даже при добавлении обработчика клика семантика и стандартное поведение теряются.",{"data":1452,"body":1453},{},{"type":688,"children":1454},[1455,1460],{"type":691,"tag":692,"props":1456,"children":1457},{},[1458],{"type":696,"value":1459},"Таблица: “что выбрать по смыслу”",{"type":691,"tag":1461,"props":1462,"children":1463},"table",{},[1464,1488],{"type":691,"tag":1465,"props":1466,"children":1467},"thead",{},[1468],{"type":691,"tag":1469,"props":1470,"children":1471},"tr",{},[1472,1478,1483],{"type":691,"tag":1473,"props":1474,"children":1475},"th",{},[1476],{"type":696,"value":1477},"Задача",{"type":691,"tag":1473,"props":1479,"children":1480},{},[1481],{"type":696,"value":1482},"Корректный элемент",{"type":691,"tag":1473,"props":1484,"children":1485},{},[1486],{"type":696,"value":1487},"Почему",{"type":691,"tag":1489,"props":1490,"children":1491},"tbody",{},[1492,1523,1544,1565,1586,1607],{"type":691,"tag":1469,"props":1493,"children":1494},{},[1495,1501,1518],{"type":691,"tag":1496,"props":1497,"children":1498},"td",{},[1499],{"type":696,"value":1500},"Переход на страницу",{"type":691,"tag":1496,"props":1502,"children":1503},{},[1504,1509,1511,1516],{"type":691,"tag":823,"props":1505,"children":1507},{"className":1506},[],[1508],{"type":696,"value":835},{"type":696,"value":1510}," (с ",{"type":691,"tag":823,"props":1512,"children":1514},{"className":1513},[],[1515],{"type":696,"value":901},{"type":696,"value":1517},")",{"type":691,"tag":1496,"props":1519,"children":1520},{},[1521],{"type":696,"value":1522},"Это ссылка, участвует в навигации и истории",{"type":691,"tag":1469,"props":1524,"children":1525},{},[1526,1531,1539],{"type":691,"tag":1496,"props":1527,"children":1528},{},[1529],{"type":696,"value":1530},"Запуск действия",{"type":691,"tag":1496,"props":1532,"children":1533},{},[1534],{"type":691,"tag":823,"props":1535,"children":1537},{"className":1536},[],[1538],{"type":696,"value":869},{"type":691,"tag":1496,"props":1540,"children":1541},{},[1542],{"type":696,"value":1543},"Есть роль кнопки, клавиатурное управление, состояния",{"type":691,"tag":1469,"props":1545,"children":1546},{},[1547,1552,1560],{"type":691,"tag":1496,"props":1548,"children":1549},{},[1550],{"type":696,"value":1551},"Основной контент",{"type":691,"tag":1496,"props":1553,"children":1554},{},[1555],{"type":691,"tag":823,"props":1556,"children":1558},{"className":1557},[],[1559],{"type":696,"value":849},{"type":691,"tag":1496,"props":1561,"children":1562},{},[1563],{"type":696,"value":1564},"Помогает структуре документа и навигации",{"type":691,"tag":1469,"props":1566,"children":1567},{},[1568,1573,1581],{"type":691,"tag":1496,"props":1569,"children":1570},{},[1571],{"type":696,"value":1572},"Самодостаточный материал",{"type":691,"tag":1496,"props":1574,"children":1575},{},[1576],{"type":691,"tag":823,"props":1577,"children":1579},{"className":1578},[],[1580],{"type":696,"value":90},{"type":691,"tag":1496,"props":1582,"children":1583},{},[1584],{"type":696,"value":1585},"Материал можно читать отдельно (пост, карточка)",{"type":691,"tag":1469,"props":1587,"children":1588},{},[1589,1594,1602],{"type":691,"tag":1496,"props":1590,"children":1591},{},[1592],{"type":696,"value":1593},"Часть материала",{"type":691,"tag":1496,"props":1595,"children":1596},{},[1597],{"type":691,"tag":823,"props":1598,"children":1600},{"className":1599},[],[1601],{"type":696,"value":862},{"type":691,"tag":1496,"props":1603,"children":1604},{},[1605],{"type":696,"value":1606},"Логический раздел с заголовком",{"type":691,"tag":1469,"props":1608,"children":1609},{},[1610,1615,1623],{"type":691,"tag":1496,"props":1611,"children":1612},{},[1613],{"type":696,"value":1614},"Навигация",{"type":691,"tag":1496,"props":1616,"children":1617},{},[1618],{"type":691,"tag":823,"props":1619,"children":1621},{"className":1620},[],[1622],{"type":696,"value":1299},{"type":691,"tag":1496,"props":1624,"children":1625},{},[1626],{"type":696,"value":1627},"Явно обозначает меню/ссылки",{"data":1629,"body":1630},{},{"type":688,"children":1631},[1632],{"type":691,"tag":692,"props":1633,"children":1634},{},[1635],{"type":696,"value":61},1775735659933]