[{"data":1,"prerenderedAt":3983},["ShallowReactive",2],{"topic:aidt-mag-frontend:topic-01":3},{"content":4,"pz":2480,"lr":2469,"additional":3537,"courseMeta":3903},{"id":5,"title":6,"body":7,"course_slug":2468,"description":17,"env_label":2469,"env_url":2469,"extension":2470,"group":2469,"is_course_project":2471,"is_index":2471,"level":2469,"meta":2472,"navigation":2473,"path":2474,"section":2475,"seo":2476,"stem":2477,"topic_number":402,"topic_slug":2478,"__hash__":2479},"courses\u002Fcourses\u002Faidt-mag-frontend\u002Ftopic-01-content.md","Веб и HTML: основы",{"type":8,"value":9,"toc":2426},"minimark",[10,14,18,23,28,40,65,68,72,114,125,129,136,146,169,189,192,196,199,252,275,285,299,302,311,314,323,326,335,338,342,345,348,351,366,370,374,381,392,432,435,444,456,467,471,482,491,494,515,564,568,602,680,691,695,706,710,713,813,816,825,828,835,839,842,996,1003,1016,1023,1032,1046,1051,1077,1085,1090,1147,1153,1171,1175,1178,1181,1226,1229,1261,1265,1269,1303,1306,1338,1363,1366,1403,1406,1741,1758,1761,1838,1841,1986,1990,1999,2204,2217,2221,2225,2230,2262,2269,2276,2280,2290,2293,2301,2305,2314,2329,2368,2371,2375,2378,2394,2397,2401,2422],[11,12,6],"h1",{"id":13},"веб-и-html-основы",[15,16,17],"p",{},"Курс начинается с языка разметки HTML — фундамента, на котором держится клиентская часть любого веб-приложения. Прежде чем перейти к самому языку, обратимся к контексту: что такое веб, как устроена доставка документа от сервера к браузеру, какие организации стандартизируют веб-технологии. Эти сведения часто остаются за рамками курсов фронтенд-разработки, но без них непонятно, почему HTML устроен именно так и почему современные практики выглядят как выглядят.",[19,20,22],"h2",{"id":21},"базовые-понятия-веба","Базовые понятия веба",[24,25,27],"h3",{"id":26},"гипертекст-и-гипермедиа","Гипертекст и гипермедиа",[15,29,30,31,35,36,39],{},"Гипертекст (англ. ",[32,33,34],"em",{},"hypertext",") — это методика связи электронных текстовых документов с помощью интерактивных элементов — гиперссылок (англ. ",[32,37,38],{},"hyperlink","), позволяющая читателю самостоятельно выбирать последовательность просмотра. По размещённым в тексте ссылкам читатель переходит к другим документам или к иным фрагментам того же документа; порядок такого перемещения он определяет сам.",[15,41,42,43,46,47,60,61,64],{},"Идея нелинейного чтения возникла ещё в докомпьютерную эпоху, но воплощение в современном виде стало возможным с развитием вычислительной техники. Термин ",[32,44,45],{},"гипертекст"," был введён математиком и философом Тедом Нельсоном в 1965 году в докладе «Complex Information Processing: A File Structure for the Complex, the Changing and the Indeterminate» ",[48,49,52],"sup",{"className":50},[51],"cite",[53,54,56],"a",{"href":55},"#ref-1",[57,58,59],"span",{},"1",". Несколько позже тем же автором был предложен расширенный термин гипермедиа (англ. ",[32,62,63],{},"hypermedia",") — концепция распространялась не только на текст, но и на другие виды электронного контента, — однако в обиходе закрепился именно первоначальный вариант.",[15,66,67],{},"Идеи Нельсона при его непосредственном участии воплотились в проекте гипертекстовой системы Xanadu, которая существует по сей день, но сколь-либо значимого распространения не получила. Несмотря на это, сама концепция гипертекста оказалась востребованной — особенно в научной среде, где она облегчала поиск и консолидацию больших объёмов информации.",[24,69,71],{"id":70},"всемирная-паутина-от-идеи-до-современного-состояния","Всемирная паутина: от идеи до современного состояния",[15,73,74,75,78,79,82,83,92,93,96,97,100,101,104,105,109,110,113],{},"В 1989 году в Европейской организации по ядерным исследованиям (фр. ",[32,76,77],{},"Organisation européenne pour la recherche nucléaire","; аббревиатура CERN сохранилась от исторического названия ",[32,80,81],{},"Conseil Européen pour la Recherche Nucléaire"," — временного совета 1952–1954 годов) исследователи Тим Бернерс-Ли и Роберт Кайо работали над информационной системой для структурирования служебной информации с использованием гипертекста ",[48,84,86],{"className":85},[51],[53,87,89],{"href":88},"#ref-2",[57,90,91],{},"2",". Результатом стал язык разметки документов ",[32,94,95],{},"HyperText Markup Language"," (HTML) и протокол передачи данных ",[32,98,99],{},"HyperText Transfer Protocol"," (HTTP). Параллельно Бернерс-Ли предложил концепцию Всемирной паутины (англ. ",[32,102,103],{},"World Wide Web",", WWW) — распределённой системы доступа к семантически связанным документам, расположенным на разных компьютерах единой сети, — а также написал первый в мире HTTP-сервер ",[106,107,108],"code",{},"httpd"," и программу-клиент, веб-браузер (англ. ",[32,111,112],{},"web browser",") WorldWideWeb (позднее переименованный в Nexus, чтобы избежать путаницы с самой паутиной).",[15,115,116,117,120,121,124],{},"К 1992 году благодаря распространению вычислительной техники и стандартизации межсетевого обмена набирала обороты тенденция укрупнения университетских и исследовательских сетей в единую глобальную сеть. Её прообразом была ARPANET (1969), созданная по заказу Министерства обороны США; опорной магистралью, объединившей региональные сети в гражданский Internet, стала NSFNet (1985) — сеть Национального научного фонда США (англ. ",[32,118,119],{},"National Science Foundation",", NSF). Концепция WWW была удачно имплементирована как сервис в развивающейся глобальной сети, а базовая механика — ",[32,122,123],{},"«пользователь вводит в браузере адрес HTML-документа (URL) → используя протокол HTTP, браузер отправляет запрос по этому URL на веб-сервер → веб-сервер возвращает HTML-документ»"," — практически без изменений используется по сей день.",[24,126,128],{"id":127},"url-и-http-как-основа-доступа-к-ресурсам","URL и HTTP как основа доступа к ресурсам",[15,130,131,132,135],{},"Бернерс-Ли также является автором ",[32,133,134],{},"Uniform Resource Locator"," (URL) — единообразного указателя местонахождения ресурса. URL представляет собой последовательность символов, определяющую протокол передачи данных, доменное имя и путь к конкретному ресурсу:",[137,138,143],"pre",{"className":139,"code":141,"language":142},[140],"language-text","https:\u002F\u002Fexample.org\u002Farticles\u002Fintro.html?lang=ru#section-2\n","text",[106,144,141],{"__ignoreMap":145},"",[15,147,148,149,152,153,156,157,160,161,164,165,168],{},"В этом адресе различимы пять частей: схема (",[106,150,151],{},"https","), хост (",[106,154,155],{},"example.org","), путь (",[106,158,159],{},"\u002Farticles\u002Fintro.html","), параметры запроса (",[106,162,163],{},"?lang=ru",") и фрагмент (",[106,166,167],{},"#section-2","). Параметры запроса позволяют передавать дополнительные данные между клиентом и сервером, фрагмент адресует часть документа на стороне клиента и серверу не отправляется.",[15,170,171,172,175,176,175,179,175,182,175,185,188],{},"HTTP — это прикладной протокол по схеме «запрос — ответ». Клиент (браузер) отправляет запрос, описывающий желаемое действие методом (",[106,173,174],{},"GET",", ",[106,177,178],{},"POST",[106,180,181],{},"PUT",[106,183,184],{},"PATCH",[106,186,187],{},"DELETE",") и адресом, а сервер возвращает ответ со статус-кодом и телом сообщения. Подробное рассмотрение протокола, методов, статус-кодов и заголовков мы отложим до темы 8, посвящённой API-клиенту; пока ограничимся пониманием, что HTTP — основной транспорт, по которому браузер получает HTML-документы, изображения, стили и скрипты.",[15,190,191],{},"В разговорной практике термины «HTTP-сервер» и «веб-сервер» часто используются как синонимы и обозначают программный продукт, реализующий работу с протоколом HTTP (nginx, Apache httpd, Caddy). При необходимости уточняют контекст: говорят о веб-сервере как о хосте (физической или виртуальной машине) с установленным на нём HTTP-сервером и обслуживаемым контентом, либо как о самом ПО.",[24,193,195],{"id":194},"архитектура-браузера-движок-рендеринг-javascript-интерпретатор","Архитектура браузера: движок, рендеринг, JavaScript-интерпретатор",[15,197,198],{},"Веб-браузер — это клиентское приложение, которое получает доступ к веб-страницам и отображает их пользователю. Современные браузеры являются очень сложными программными продуктами; их архитектура может различаться в деталях, но как правило включает следующие компоненты:",[200,201,202,210,217,224,231,238,245],"ul",{},[203,204,205,206,209],"li",{},"пользовательский интерфейс (англ. ",[32,207,208],{},"user interface",", UI) — адресная строка, меню навигации, меню закладок и т. д.;",[203,211,212,213,216],{},"движок браузера (англ. ",[32,214,215],{},"browser engine",") — согласует действия между пользовательским интерфейсом и движком рендеринга;",[203,218,219,220,223],{},"движок рендеринга (англ. ",[32,221,222],{},"rendering engine",") — отвечает за отображение контента: разбирает (парсит) HTML и CSS и отображает результат на экране;",[203,225,226,227,230],{},"модуль сетевого взаимодействия (англ. ",[32,228,229],{},"networking module",") — обслуживает сетевые вызовы (например, HTTP-запросы);",[203,232,233,234,237],{},"бэкенд пользовательского интерфейса (англ. ",[32,235,236],{},"UI backend",") — отрисовывает базовые виджеты (выпадающие списки, поля ввода, флажки), абстрагируя различия операционных систем;",[203,239,240,241,244],{},"интерпретатор JavaScript, JavaScript-движок (англ. ",[32,242,243],{},"JavaScript engine",") — парсит и выполняет код на JavaScript;",[203,246,247,248,251],{},"модуль хранения данных (англ. ",[32,249,250],{},"Data storage module",") — отвечает за локальное хранение файлов cookie, данных Web Storage, IndexedDB и т. п.",[15,253,254,255,264,265,274],{},"Изучение устройства браузеров не является целью курса, но для лучшего понимания процессов веб-разработки полезно ознакомиться со статьями Tali Garsiel ",[48,256,258],{"className":257},[51],[53,259,261],{"href":260},"#ref-3",[57,262,263],{},"3"," и Mariko Kosaka ",[48,266,268],{"className":267},[51],[53,269,271],{"href":270},"#ref-4",[57,272,273],{},"4",".",[15,276,277,278,284],{},"На момент подготовки пособия наиболее распространённые браузеры (по данным независимой службы анализа веб-трафика ",[53,279,283],{"href":280,"rel":281},"https:\u002F\u002Fgs.statcounter.com\u002Fbrowser-market-share",[282],"nofollow","StatCounter",") перечислены ниже.",[286,287,288,289,288,295],"figure",{},"\n  ",[290,291],"img",{"src":292,"alt":293,"width":294},"\u002Fimg\u002Faidt-mag-frontend\u002Ftopic-01\u002Fbrowser_logo_chrome.svg","Логотип Google Chrome",50,[296,297,298],"figcaption",{},"Google Chrome",[15,300,301],{},"Chrome использует движок рендеринга Blink (форк WebKit) и высокопроизводительный JavaScript-движок V8. Реализована многопроцессная архитектура: каждая вкладка работает в отдельном процессе, что повышает стабильность и облегчает изоляцию (sandboxing). Технология Site Isolation изолирует сайты друг от друга в памяти. Chrome активно поддерживает передовые веб-стандарты — WebAssembly, WebRTC, PWA, HTTP\u002F3.",[286,303,288,304,288,308],{},[290,305],{"src":306,"alt":307,"width":294},"\u002Fimg\u002Faidt-mag-frontend\u002Ftopic-01\u002Fbrowser_logo_safari.svg","Логотип Apple Safari",[296,309,310],{},"Apple Safari",[15,312,313],{},"Safari работает на движке WebKit, который Apple оптимизирует для производительности и энергоэффективности на macOS и iOS. JavaScript исполняется движком JavaScriptCore (Nitro). Safari ориентирован на низкое энергопотребление и поддерживает Intelligent Tracking Prevention (ITP) — систему защиты от отслеживания. Safari известен консервативным подходом к внедрению новых веб-стандартов, из-за чего разработчикам приходится учитывать его ограничения.",[286,315,288,316,288,320],{},[290,317],{"src":318,"alt":319,"width":294},"\u002Fimg\u002Faidt-mag-frontend\u002Ftopic-01\u002Fbrowser_logo_edge.svg","Логотип Microsoft Edge",[296,321,322],{},"Microsoft Edge",[15,324,325],{},"С 2020 года Microsoft Edge основан на Chromium и использует те же Blink и V8, что и Chrome; ранее работал на собственном движке EdgeHTML. Edge обеспечивает более низкое потребление оперативной памяти благодаря системе Sleeping Tabs и поддерживает технологию Application Guard для виртуализации вкладок. На основе Chromium Edge поддерживает практически все современные веб-стандарты и расширения из Chrome Web Store.",[286,327,288,328,288,332],{},[290,329],{"src":330,"alt":331,"width":294},"\u002Fimg\u002Faidt-mag-frontend\u002Ftopic-01\u002Fbrowser_logo_firefox.svg","Логотип Mozilla Firefox",[296,333,334],{},"Mozilla Firefox",[15,336,337],{},"Firefox использует движок Gecko и JavaScript-движок SpiderMonkey. Технология Quantum обеспечивает многопоточный рендеринг. Firefox традиционно играет роль независимой реализации стандартов, не привязанной к Chromium, и активно поддерживает WebAssembly, WebRTC, HTTP\u002F3, TLS 1.3, а также расширения на основе WebExtensions API.",[24,339,341],{"id":340},"стандартизация-w3c-whatwg-html-как-living-standard","Стандартизация: W3C, WHATWG, HTML как Living Standard",[15,343,344],{},"Одна из ключевых организаций, отвечающих за стандартизацию веб-технологий, — W3C (World Wide Web Consortium). W3C — международная организация, основанная в 1994 году Тимом Бернерсом-Ли. Её основная задача — разработка и продвижение стандартов, обеспечивающих развитие интернета как открытой и доступной среды. Члены W3C включают крупные IT-компании (Google, Microsoft, Apple, Mozilla), академические учреждения и независимых экспертов. W3C разрабатывает спецификации, известные как W3C Recommendations, которые становятся официальными стандартами после обсуждения и тестирования. Эти рекомендации охватывают HTML, CSS, DOM, WCAG, Web APIs, SVG, Semantic Web и другие технологии.",[15,346,347],{},"Разработка нового стандарта проходит несколько этапов: Working Draft (черновик) → Candidate Recommendation (кандидат в рекомендации) → Proposed Recommendation (предложенная рекомендация) → W3C Recommendation (официальная рекомендация).",[15,349,350],{},"Параллельно с W3C над стандартами веба работает консорциум WHATWG (Web Hypertext Application Technology Working Group), основанный в 2004 году разработчиками браузеров Apple, Mozilla и Opera в ответ на медленный темп работы W3C. Современный HTML развивается именно в WHATWG, как непрерывно обновляемый Living Standard, без зафиксированных «версий». Ранее принятая нумерация (HTML 4.01, HTML5) сегодня используется скорее как маркетинговый и методический ярлык; формальный источник истины — спецификация WHATWG. Долгое время W3C и WHATWG публиковали параллельные, местами расходящиеся версии HTML и DOM, что создавало путаницу для разработчиков. В 2019 году организации подписали соглашение, по которому WHATWG стал единственным держателем спецификаций HTML и DOM, а W3C сосредоточилась на других направлениях — CSS, WCAG, Web APIs.",[15,352,353,354,359,360,365],{},"Несмотря на разработанные стандарты, разные браузерные движки интерпретируют код несколько по-разному, поэтому веб-страницы могут выглядеть в браузерах не идентично. Это породило практики кросс-браузерной вёрстки и кросс-браузерного тестирования. В 2021 году основные производители браузеров инициировали проект ",[53,355,358],{"href":356,"rel":357},"https:\u002F\u002Fweb.dev\u002Fblog\u002Fcompat2021",[282],"Compat 2021",", направленный на улучшение совместимости. Годом позже стартовал ",[53,361,364],{"href":362,"rel":363},"https:\u002F\u002Fwpt.fyi\u002Finterop-2022",[282],"Interop 2022",", в рамках которого вендоры договорились поэтапно доводить поддержку заранее оговорённого объёма веб-технологий до идентичной работы во всех браузерах. Год за годом расхождения сокращаются.",[19,367,369],{"id":368},"язык-html-и-его-роль","Язык HTML и его роль",[24,371,373],{"id":372},"html-как-язык-разметки-контента-а-не-оформления","HTML как язык разметки контента, а не оформления",[15,375,376,377,380],{},"HTML — это язык разметки, который используется для структурирования контента в электронных документах с помощью элементов, определяемых тегами (англ. ",[32,378,379],{},"tag","). Браузер интерпретирует теги и отображает содержимое в соответствии с их назначением. То есть, «оборачивая» ту или иную часть документа в определённый тег, разработчик передаёт браузеру инструкцию: что это за фрагмент и как его отобразить.",[15,382,383,384,387,388,391],{},"Наглядный пример — теги ",[106,385,386],{},"\u003Ch1>"," и ",[106,389,390],{},"\u003Cp>",", размечающие заголовок и абзац:",[137,393,397],{"className":394,"code":395,"language":396,"meta":145,"style":145},"language-html shiki shiki-themes github-light github-dark","\u003Ch1>Великолепный заголовок\u003C\u002Fh1>\n\u003Cp>Не менее потрясающий абзац.\u003C\u002Fp>\n","html",[106,398,399,418],{"__ignoreMap":145},[57,400,403,407,410,413,415],{"class":401,"line":402},"line",1,[57,404,406],{"class":405},"sVt8B","\u003C",[57,408,11],{"class":409},"s9eBZ",[57,411,412],{"class":405},">Великолепный заголовок\u003C\u002F",[57,414,11],{"class":409},[57,416,417],{"class":405},">\n",[57,419,421,423,425,428,430],{"class":401,"line":420},2,[57,422,406],{"class":405},[57,424,15],{"class":409},[57,426,427],{"class":405},">Не менее потрясающий абзац.\u003C\u002F",[57,429,15],{"class":409},[57,431,417],{"class":405},[15,433,434],{},"Браузер отобразит:",[286,436,288,437,288,441],{},[290,438],{"src":439,"alt":440},"\u002Fimg\u002Faidt-mag-frontend\u002Ftopic-01\u002Fhtml_render_example.svg","Заголовок и абзац, отрендеренные браузером по умолчанию",[296,442,443],{},"Результат отображения заголовка и абзаца с применением браузерных стилей по умолчанию",[15,445,446,447,387,449,451,452,455],{},"Несмотря на то, что текст заголовка и абзаца визуально различается, сам HTML не позволяет управлять начертанием, кеглем, отступами и прочими параметрами отображения. Для этого служит язык стилизации CSS, который мы рассмотрим в теме 2. Различие в отображении ",[106,448,386],{},[106,450,390],{}," объясняется тем, что браузер применяет к ним собственный стиль по умолчанию (англ. ",[32,453,454],{},"user-agent stylesheet",").",[15,457,458,459,462,463,466],{},"Здесь и далее под HTML-документом мы будем понимать код на языке HTML, помещённый в файл с расширением ",[106,460,461],{},".html"," или ",[106,464,465],{},".htm",", а под веб-страницей — результат рендера этого документа браузером, с применением CSS-стилизации и исполняемого JavaScript-кода, если они были использованы.",[24,468,470],{"id":469},"структура-html-элемента-открывающий-и-закрывающий-теги-атрибуты-содержимое","Структура HTML-элемента: открывающий и закрывающий теги, атрибуты, содержимое",[15,472,473,474,477,478,481],{},"Рассмотрим структуру HTML-элемента на примере элемента ",[106,475,476],{},"\u003Ca>"," (англ. ",[32,479,480],{},"anchor",", якорь), который предназначен для создания ссылок.",[286,483,288,484,288,488],{},[290,485],{"src":486,"alt":487},"\u002Fimg\u002Faidt-mag-frontend\u002Ftopic-01\u002Fhtml_tag_structure.svg","Схема HTML-элемента: открывающий тег с атрибутами, содержимое, закрывающий тег",[296,489,490],{},"Структура HTML-элемента: открывающий тег с атрибутами, содержимое, закрывающий тег",[15,492,493],{},"HTML-элемент состоит из:",[200,495,496,505,512],{},[203,497,498,499,387,501,504],{},"открывающего и закрывающего тегов (",[106,500,476],{},[106,502,503],{},"\u003C\u002Fa>",");",[203,506,507,508,511],{},"атрибутов в открывающем теге — пар вида ",[106,509,510],{},"имя=\"значение\"",", описывающих параметры элемента. Многие атрибуты применимы ко всем элементам, но часть атрибутов специфична для конкретных тегов. Полный перечень атрибутов, определённых стандартом, доступен в справочнике MDN;",[203,513,514],{},"содержимого — текста или вложенных элементов, к которым применяется тег.",[15,516,517,518,520,521,477,524,527,528,531,532,535,536,539,540,543,544,547,548,551,552,555,556,559,560,563],{},"У тега ",[106,519,476],{}," ключевой атрибут — ",[106,522,523],{},"href",[32,525,526],{},"hypertext reference","), задающий адрес перехода. В значении допустим не только веб-URL: ",[106,529,530],{},"href=\"mailto:author@example.org\""," откроет почтовый клиент, ",[106,533,534],{},"href=\"tel:+79991234567\""," — приложение для звонка, ",[106,537,538],{},"href=\"#section-2\""," прокрутит страницу к элементу с ",[106,541,542],{},"id=\"section-2\"",". Атрибут ",[106,545,546],{},"target=\"_blank\""," открывает ссылку в новой вкладке; при этом в ",[106,549,550],{},"rel"," принято указывать ",[106,553,554],{},"noopener"," (и для надёжности ",[106,557,558],{},"noreferrer","), иначе целевая страница получает через ",[106,561,562],{},"window.opener"," доступ к текущей — потенциальная уязвимость.",[24,565,567],{"id":566},"парные-и-пустые-элементы","Парные и пустые элементы",[15,569,570,571,573,574,577,578,581,582,585,586,589,590,593,594,597,598,601],{},"Тег ",[106,572,476],{}," является парным: его открывающая и закрывающая части обрамляют содержимое. Однако существуют и пустые (англ. ",[32,575,576],{},"void",") элементы, у которых нет содержимого и нет закрывающего тега. Типичные примеры — изображение ",[106,579,580],{},"\u003Cimg>",", перенос строки ",[106,583,584],{},"\u003Cbr>",", горизонтальная линия ",[106,587,588],{},"\u003Chr>",", поле ввода ",[106,591,592],{},"\u003Cinput>",", метатег ",[106,595,596],{},"\u003Cmeta>",", ссылка на ресурс ",[106,599,600],{},"\u003Clink>",". Такие элементы целиком описываются одним тегом и набором атрибутов:",[137,603,605],{"className":394,"code":604,"language":396,"meta":145,"style":145},"\u003Cimg src=\"logo.svg\" alt=\"Логотип компании\">\n\u003Cinput type=\"email\" name=\"contact\" required>\n\u003Cmeta charset=\"UTF-8\">\n",[106,606,607,634,662],{"__ignoreMap":145},[57,608,609,611,613,617,620,624,627,629,632],{"class":401,"line":402},[57,610,406],{"class":405},[57,612,290],{"class":409},[57,614,616],{"class":615},"sScJk"," src",[57,618,619],{"class":405},"=",[57,621,623],{"class":622},"sZZnC","\"logo.svg\"",[57,625,626],{"class":615}," alt",[57,628,619],{"class":405},[57,630,631],{"class":622},"\"Логотип компании\"",[57,633,417],{"class":405},[57,635,636,638,641,644,646,649,652,654,657,660],{"class":401,"line":420},[57,637,406],{"class":405},[57,639,640],{"class":409},"input",[57,642,643],{"class":615}," type",[57,645,619],{"class":405},[57,647,648],{"class":622},"\"email\"",[57,650,651],{"class":615}," name",[57,653,619],{"class":405},[57,655,656],{"class":622},"\"contact\"",[57,658,659],{"class":615}," required",[57,661,417],{"class":405},[57,663,665,667,670,673,675,678],{"class":401,"line":664},3,[57,666,406],{"class":405},[57,668,669],{"class":409},"meta",[57,671,672],{"class":615}," charset",[57,674,619],{"class":405},[57,676,677],{"class":622},"\"UTF-8\"",[57,679,417],{"class":405},[15,681,682,683,686,687,690],{},"В XHTML и XML-совместимой записи подобные теги принято завершать косой чертой (",[106,684,685],{},"\u003Cbr \u002F>",") — отсюда ещё одно распространённое название, «самозакрывающиеся» (англ. ",[32,688,689],{},"self-closing","). В современном HTML5 слеш в пустом теге парсером допускается, но игнорируется и на поведение не влияет, поэтому такая запись считается избыточной.",[24,692,694],{"id":693},"комментарии","Комментарии",[15,696,697,698,701,702,705],{},"Любой фрагмент HTML можно заключить в комментарий вида ",[106,699,700],{},"\u003C!-- ... -->",". Содержимое комментария не отображается на странице и не влияет на разметку, но видно в исходном коде и в DevTools. Комментарии используются для пояснений в разметке (обозначить начало секции, оставить TODO для команды) и временного отключения участков, которые жалко удалять окончательно. Главное ограничение — комментарии нельзя вкладывать друг в друга: парсер закроет внешний на первой же встреченной последовательности ",[106,703,704],{},"-->",", и остаток уйдёт в обычный текст страницы.",[24,707,709],{"id":708},"вложенность-элементов-и-иерархическая-модель-документа","Вложенность элементов и иерархическая модель документа",[15,711,712],{},"HTML позволяет вкладывать одни элементы в другие, образуя иерархическую структуру страницы. Вложенность важна для правильного отображения и логической организации контента. Пример:",[137,714,716],{"className":394,"code":715,"language":396,"meta":145,"style":145},"\u003Cdiv id=\"el-1\">\n    Элемент 1\n    \u003Cdiv id=\"el-2\">\n        Элемент 2\n    \u003C\u002Fdiv>\n    \u003Cdiv id=\"el-3\">\n        Элемент 3\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n",[106,717,718,735,740,756,762,772,788,794,803],{"__ignoreMap":145},[57,719,720,722,725,728,730,733],{"class":401,"line":402},[57,721,406],{"class":405},[57,723,724],{"class":409},"div",[57,726,727],{"class":615}," id",[57,729,619],{"class":405},[57,731,732],{"class":622},"\"el-1\"",[57,734,417],{"class":405},[57,736,737],{"class":401,"line":420},[57,738,739],{"class":405},"    Элемент 1\n",[57,741,742,745,747,749,751,754],{"class":401,"line":664},[57,743,744],{"class":405},"    \u003C",[57,746,724],{"class":409},[57,748,727],{"class":615},[57,750,619],{"class":405},[57,752,753],{"class":622},"\"el-2\"",[57,755,417],{"class":405},[57,757,759],{"class":401,"line":758},4,[57,760,761],{"class":405},"        Элемент 2\n",[57,763,765,768,770],{"class":401,"line":764},5,[57,766,767],{"class":405},"    \u003C\u002F",[57,769,724],{"class":409},[57,771,417],{"class":405},[57,773,775,777,779,781,783,786],{"class":401,"line":774},6,[57,776,744],{"class":405},[57,778,724],{"class":409},[57,780,727],{"class":615},[57,782,619],{"class":405},[57,784,785],{"class":622},"\"el-3\"",[57,787,417],{"class":405},[57,789,791],{"class":401,"line":790},7,[57,792,793],{"class":405},"        Элемент 3\n",[57,795,797,799,801],{"class":401,"line":796},8,[57,798,767],{"class":405},[57,800,724],{"class":409},[57,802,417],{"class":405},[57,804,806,809,811],{"class":401,"line":805},9,[57,807,808],{"class":405},"\u003C\u002F",[57,810,724],{"class":409},[57,812,417],{"class":405},[15,814,815],{},"После небольшой стилизации браузер отобразит это так:",[286,817,288,818,288,822],{},[290,819],{"src":820,"alt":821},"\u002Fimg\u002Faidt-mag-frontend\u002Ftopic-01\u002Fhtml_inlay_sample.svg","Три вложенных контейнера: внешний и два внутренних",[296,823,824],{},"Вложенность HTML-элементов: внешний контейнер и два внутренних",[15,826,827],{},"По отношению к элементам 2 и 3 элемент 1 является родительским, а элементы 2 и 3 — дочерними по отношению к элементу 1. Совокупность таких отношений образует дерево документа: каждый элемент имеет ровно одного родителя (кроме корневого) и любое количество дочерних элементов. Это дерево лежит в основе всей последующей работы — на нём строятся CSS-селекторы, на нём же стоит DOM, через который JavaScript манипулирует страницей (тема 7).",[15,829,830,831,834],{},"Хорошим тоном при написании HTML-кода является явная демонстрация вложенности через отступы (англ. ",[32,832,833],{},"indent","), как показано в примере выше. Современные редакторы и форматировщики делают это автоматически.",[19,836,838],{"id":837},"структура-html-документа","Структура HTML-документа",[15,840,841],{},"Каждый HTML-документ имеет определённую структуру, состоящую из обязательных и вспомогательных элементов. Рассмотрим базовый пример:",[137,843,845],{"className":394,"code":844,"language":396,"meta":145,"style":145},"\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.0\">\n    \u003Ctitle>Вдохновляющий заголовок страницы\u003C\u002Ftitle>\n\u003C\u002Fhead>\n\u003Cbody>\n    \u003Ch1>Великолепный заголовок\u003C\u002Fh1>\n    \u003Cp>Не менее потрясающий абзац.\u003C\u002Fp>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[106,846,847,860,876,885,899,922,936,944,953,965,978,987],{"__ignoreMap":145},[57,848,849,852,855,858],{"class":401,"line":402},[57,850,851],{"class":405},"\u003C!",[57,853,854],{"class":409},"DOCTYPE",[57,856,857],{"class":615}," html",[57,859,417],{"class":405},[57,861,862,864,866,869,871,874],{"class":401,"line":420},[57,863,406],{"class":405},[57,865,396],{"class":409},[57,867,868],{"class":615}," lang",[57,870,619],{"class":405},[57,872,873],{"class":622},"\"ru\"",[57,875,417],{"class":405},[57,877,878,880,883],{"class":401,"line":664},[57,879,406],{"class":405},[57,881,882],{"class":409},"head",[57,884,417],{"class":405},[57,886,887,889,891,893,895,897],{"class":401,"line":758},[57,888,744],{"class":405},[57,890,669],{"class":409},[57,892,672],{"class":615},[57,894,619],{"class":405},[57,896,677],{"class":622},[57,898,417],{"class":405},[57,900,901,903,905,907,909,912,915,917,920],{"class":401,"line":764},[57,902,744],{"class":405},[57,904,669],{"class":409},[57,906,651],{"class":615},[57,908,619],{"class":405},[57,910,911],{"class":622},"\"viewport\"",[57,913,914],{"class":615}," content",[57,916,619],{"class":405},[57,918,919],{"class":622},"\"width=device-width, initial-scale=1.0\"",[57,921,417],{"class":405},[57,923,924,926,929,932,934],{"class":401,"line":774},[57,925,744],{"class":405},[57,927,928],{"class":409},"title",[57,930,931],{"class":405},">Вдохновляющий заголовок страницы\u003C\u002F",[57,933,928],{"class":409},[57,935,417],{"class":405},[57,937,938,940,942],{"class":401,"line":790},[57,939,808],{"class":405},[57,941,882],{"class":409},[57,943,417],{"class":405},[57,945,946,948,951],{"class":401,"line":796},[57,947,406],{"class":405},[57,949,950],{"class":409},"body",[57,952,417],{"class":405},[57,954,955,957,959,961,963],{"class":401,"line":805},[57,956,744],{"class":405},[57,958,11],{"class":409},[57,960,412],{"class":405},[57,962,11],{"class":409},[57,964,417],{"class":405},[57,966,968,970,972,974,976],{"class":401,"line":967},10,[57,969,744],{"class":405},[57,971,15],{"class":409},[57,973,427],{"class":405},[57,975,15],{"class":409},[57,977,417],{"class":405},[57,979,981,983,985],{"class":401,"line":980},11,[57,982,808],{"class":405},[57,984,950],{"class":409},[57,986,417],{"class":405},[57,988,990,992,994],{"class":401,"line":989},12,[57,991,808],{"class":405},[57,993,396],{"class":409},[57,995,417],{"class":405},[24,997,999,1002],{"id":998},"doctype-и-режим-стандартов",[106,1000,1001],{},"\u003C!DOCTYPE>"," и режим стандартов",[15,1004,1005,1007,1008,1011,1012,1015],{},[106,1006,1001],{}," (",[32,1009,1010],{},"document type",") — объявление типа документа, в котором указывается тип и версия языка разметки для корректной обработки последующего содержимого браузером. Правильное объявление типа критически важно: при его отсутствии или некорректной форме браузер переходит в режим совместимости (англ. ",[32,1013,1014],{},"quirks mode","), имитирующий поведение старых версий браузеров. Это сделано, чтобы не сломать унаследованные сайты двадцатилетней давности, но почти гарантированно приведёт к неправильной интерпретации актуального HTML- и CSS-кода.",[15,1017,1018,1019,1022],{},"В современной практике используется HTML5, которому соответствует лаконичная инструкция ",[106,1020,1021],{},"\u003C!DOCTYPE html>"," — её и следует ставить первой строкой любого нового документа. Для более старых версий HTML и XHTML существовали свои громоздкие формы записи, которые сегодня встречаются только в исторических документах.",[15,1024,1025,1026,1031],{},"Проверить разметку на соответствие спецификации можно официальным валидатором W3C — ",[53,1027,1030],{"href":1028,"rel":1029},"https:\u002F\u002Fvalidator.w3.org\u002F",[282],"validator.w3.org",". Он принимает URL, файл или фрагмент кода и возвращает перечень нарушений: незакрытые теги, недопустимая вложенность, неизвестные атрибуты, проблемы с доступностью. Прогонять через валидатор готовые страницы — полезная привычка: часть ошибок браузеры молча «прощают», но они всплывают позже в виде странных артефактов рендера или проблем с доступностью.",[24,1033,1035,1036,1039,1040,387,1043],{"id":1034},"корневой-элемент-html-атрибуты-lang-и-dir","Корневой элемент ",[106,1037,1038],{},"\u003Chtml>",", атрибуты ",[106,1041,1042],{},"lang",[106,1044,1045],{},"dir",[15,1047,1048,1050],{},[106,1049,1038],{}," — корневой элемент, внутри которого размещается весь контент страницы. Из его атрибутов в практике важны прежде всего:",[200,1052,1053,1064],{},[203,1054,1055,1057,1058,1060,1061,1063],{},[106,1056,1042],{}," — указывает язык содержимого документа. В нашем примере значение ",[106,1059,873],{}," соответствует русскому языку. Атрибут позволяет браузеру корректно применить типографические правила (вид кавычек, расстановка переносов), а ассистивным технологиям — выбрать правильный движок синтеза речи. Указывать ",[106,1062,1042],{}," — обязательная практика;",[203,1065,1066,1068,1069,1072,1073,1076],{},[106,1067,1045],{}," — направление текста: ",[106,1070,1071],{},"ltr"," (слева направо, значение по умолчанию) или ",[106,1074,1075],{},"rtl"," (справа налево, для арабского, иврита и др.).",[24,1078,1080,1081,1084],{"id":1079},"раздел-head-кодировка-viewport-заголовок-подключение-ресурсов","Раздел ",[106,1082,1083],{},"\u003Chead>",": кодировка, viewport, заголовок, подключение ресурсов",[15,1086,1087,1089],{},[106,1088,1083],{}," содержит метаинформацию о документе, не отображаемую как контент страницы. Типовое наполнение:",[200,1091,1092,1098,1104,1110,1116],{},[203,1093,1094,1097],{},[106,1095,1096],{},"\u003Cmeta charset=\"UTF-8\">"," — кодировка документа. UTF-8 сегодня является де-факто стандартом, обеспечивающим корректное отображение символов любых письменностей;",[203,1099,1100,1103],{},[106,1101,1102],{},"\u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">"," — управляет масштабом страницы на мобильных устройствах. Без этого тега мобильные браузеры покажут страницу в режиме «как на настольном компьютере» с уменьшенным масштабом, что для современных адаптивных сайтов нежелательно;",[203,1105,1106,1109],{},[106,1107,1108],{},"\u003Ctitle>"," — заголовок страницы, отображается на вкладке браузера, в результатах поиска и в подписях ссылок при шаринге;",[203,1111,1112,1115],{},[106,1113,1114],{},"\u003Clink rel=\"stylesheet\" href=\"styles.css\">"," — подключение внешнего файла со стилями;",[203,1117,1118,1121,1122,1125,1126,1129,1130,1133,1134,1136,1137,462,1139,1142,1143,1146],{},[106,1119,1120],{},"\u003Cscript src=\"script.js\" defer>\u003C\u002Fscript>"," — подключение внешнего JavaScript-файла. Атрибут ",[106,1123,1124],{},"defer"," откладывает выполнение скрипта до построения дерева документа. Скрипт может подключаться и в ",[106,1127,1128],{},"\u003Cbody>"," (обычно в самом конце, чтобы не блокировать рендер контента), но современная практика — размещать ",[106,1131,1132],{},"\u003Cscript>"," в ",[106,1135,1083],{}," с атрибутом ",[106,1138,1124],{},[106,1140,1141],{},"async",". Для ES-модулей используется запись ",[106,1144,1145],{},"\u003Cscript src=\"script.js\" type=\"module\">\u003C\u002Fscript>","; подробнее о модулях — в теме 6.",[24,1148,1080,1150,1152],{"id":1149},"раздел-body-видимый-контент-страницы",[106,1151,1128],{},": видимый контент страницы",[15,1154,1155,1157,1158,1160,1161,1163,1164,1166,1167,462,1169,455],{},[106,1156,1128],{}," содержит основное содержимое веб-страницы — текст, изображения, ссылки, формы, мультимедиа. Всё, что пользователь увидит на странице, должно располагаться здесь. У ",[106,1159,1128],{}," нет жёстких ограничений на состав, кроме одного: внутри ",[106,1162,1128],{}," не размещают теги, относящиеся к разделу ",[106,1165,1083],{}," (например, ",[106,1168,596],{},[106,1170,1108],{},[24,1172,1174],{"id":1173},"базовые-блочные-и-строчные-элементы","Базовые блочные и строчные элементы",[15,1176,1177],{},"Поток документа — естественный порядок размещения элементов перед применением стилей. Браузер рендерит HTML сверху вниз, располагая элементы в порядке их появления в коде. Этот процесс называется нормальным потоком документа.",[15,1179,1180],{},"По умолчанию браузер размещает элементы в одном из двух базовых режимов, определяемом типом элемента:",[200,1182,1183,1205],{},[203,1184,1185,1186,1189,1190,175,1193,175,1195,1197,1198,175,1201,1204],{},"блочные (англ. ",[32,1187,1188],{},"block",") элементы занимают всю доступную ширину родительского контейнера и начинаются с новой строки, располагаясь друг под другом. Даже если ширина блочного элемента явно задана и рядом мог бы поместиться такой же, в потоке они выстраиваются один под другим. Блочные элементы могут содержать как другие блочные, так и строчные элементы. Примеры: ",[106,1191,1192],{},"\u003Cdiv>",[106,1194,390],{},[106,1196,386],{},"–",[106,1199,1200],{},"\u003Ch6>",[106,1202,1203],{},"\u003Csection>",";",[203,1206,1207,1208,1211,1212,1214,1215,175,1218,175,1220,175,1223,274],{},"строчные (англ. ",[32,1209,1210],{},"inline",") элементы занимают только необходимую ширину и не создают разрывов строк. Несколько строчных элементов стремятся уместиться на одной строке, насколько хватает ширины родителя; при недостатке ширины текст переносится на следующую строку. Как правило, строчные элементы содержат текст или другие строчные элементы; из этого правила есть исключения (например, у ",[106,1213,476],{}," в HTML5 прозрачная модель содержимого, и он может оборачивать блочные элементы), но на первых порах ориентироваться на упрощённое правило удобно. Примеры: ",[106,1216,1217],{},"\u003Cspan>",[106,1219,476],{},[106,1221,1222],{},"\u003Cq>",[106,1224,1225],{},"\u003Ccode>",[15,1227,1228],{},"Нормальный поток и его поведение мы детально рассмотрим в теме 3, посвящённой layout. Пока достаточно понимать, что разделение на блочные и строчные элементы — это базовая настройка отображения, которую затем можно переопределить с помощью CSS.",[15,1230,1231,1232,1235,1236,175,1239,175,1242,1245,1246,1249,1250,1253,1254,1257,1258,1260],{},"В HTML возможно использование специальных символов — мнемоник (англ. ",[32,1233,1234],{},"named character references","). В первую очередь они нужны для знаков, конфликтующих с синтаксисом самого HTML: ",[106,1237,1238],{},"<",[106,1240,1241],{},">",[106,1243,1244],{},"&",". Кроме того, мнемоники вроде ",[106,1247,1248],{},"©"," (©), ",[106,1251,1252],{},"—"," (—), ",[106,1255,1256],{}," "," (неразрывный пробел) исторически применялись для типографических символов, отсутствующих на клавиатуре. При кодировке UTF-8 все эти знаки можно и удобнее записывать в исходнике напрямую; мнемоника ",[106,1259,1256],{}," остаётся востребованной, поскольку сам неразрывный пробел в коде визуально неотличим от обычного.",[19,1262,1264],{"id":1263},"семантическая-разметка","Семантическая разметка",[24,1266,1268],{"id":1267},"зачем-нужна-семантика-доступность-seo-ассистивные-технологии","Зачем нужна семантика: доступность, SEO, ассистивные технологии",[15,1270,1271,1272,1274,1275,1277,1278,1281,1282,175,1285,175,1288,175,1291,175,1293,175,1296,175,1299,1302],{},"Семантическая разметка — способ структурирования веб-страницы с использованием элементов, которые ясно передают смысл их содержимого. Большинство HTML-тегов уже несут семантическую нагрузку: ",[106,1273,386],{}," отмечает заголовок первого уровня, ",[106,1276,390],{}," — абзац, ",[106,1279,1280],{},"\u003Cul>"," — ненумерованный список. В HTML5 были добавлены специальные секционирующие теги — ",[106,1283,1284],{},"\u003Cheader>",[106,1286,1287],{},"\u003Cnav>",[106,1289,1290],{},"\u003Cmain>",[106,1292,1203],{},[106,1294,1295],{},"\u003Carticle>",[106,1297,1298],{},"\u003Caside>",[106,1300,1301],{},"\u003Cfooter>"," — позволяющие выразить не только смысл отдельных фрагментов, но и общую структуру страницы.",[15,1304,1305],{},"Семантичная разметка преследует три практические цели:",[200,1307,1308,1326,1333],{},[203,1309,1310,1311,1314,1315,1318,1319,1322,1323,1325],{},"доступность (англ. ",[32,1312,1313],{},"accessibility","): ассистивные технологии, в первую очередь программы чтения с экрана (англ. ",[32,1316,1317],{},"screen reader","), используют семантическую разметку для построения навигации по странице. Пользователь скринридера может перейти к следующему ",[106,1320,1321],{},"\u003Ch2>"," или попасть в основной блок ",[106,1324,1290],{}," одной командой — но только если эти элементы расставлены;",[203,1327,1328,1329,1332],{},"поисковая оптимизация (англ. ",[32,1330,1331],{},"Search Engine Optimization",", SEO): поисковые роботы используют семантическую разметку для понимания иерархии и важности контента;",[203,1334,1335,1336,274],{},"сопровождаемость кода: разметка с осмысленными именами тегов читается быстрее, чем сплошное полотно из ",[106,1337,1192],{},[24,1339,1341,1342,175,1345,175,1348,175,1351,175,1354,175,1357,175,1360],{"id":1340},"секционирующие-элементы-header-nav-main-article-section-aside-footer","Секционирующие элементы: ",[106,1343,1344],{},"header",[106,1346,1347],{},"nav",[106,1349,1350],{},"main",[106,1352,1353],{},"article",[106,1355,1356],{},"section",[106,1358,1359],{},"aside",[106,1361,1362],{},"footer",[15,1364,1365],{},"Секционирующие теги используются для определения структуры страницы и организации контента в крупные смысловые блоки:",[200,1367,1368,1373,1378,1383,1388,1393,1398],{},[203,1369,1370,1372],{},[106,1371,1284],{}," — заголовочная часть страницы или отдельного раздела;",[203,1374,1375,1377],{},[106,1376,1287],{}," — основная навигация сайта;",[203,1379,1380,1382],{},[106,1381,1290],{}," — основной контент страницы (уникальный для каждой страницы; на странице должен быть ровно один такой элемент);",[203,1384,1385,1387],{},[106,1386,1203],{}," — логически связанный раздел контента;",[203,1389,1390,1392],{},[106,1391,1295],{}," — независимый контент, который имеет смысл и вне страницы (статья, пост блога, карточка товара);",[203,1394,1395,1397],{},[106,1396,1298],{}," — боковой блок с дополнительной информацией, связанной с основным контентом косвенно (врезки, сноски, справочные блоки);",[203,1399,1400,1402],{},[106,1401,1301],{}," — нижняя часть страницы или раздела с контактами, копирайтом, ссылками.",[15,1404,1405],{},"Пример типового использования:",[137,1407,1409],{"className":394,"code":1408,"language":396,"meta":145,"style":145},"\u003Cheader>\n    \u003Ch1>Название отличного сайта\u003C\u002Fh1>\n    \u003Cnav>\n        \u003Cul>\n            \u003Cli>\u003Ca href=\"\u002F\">Главная\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"\u002Fabout\">О нас\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fnav>\n\u003C\u002Fheader>\n\u003Cmain>\n    \u003Csection>\n        \u003Ch2>Наши услуги\u003C\u002Fh2>\n        \u003Cp>Мы предоставляем лучшие решения.\u003C\u002Fp>\n    \u003C\u002Fsection>\n    \u003Caside>\n        \u003Ch3>Полезные ссылки\u003C\u002Fh3>\n        \u003Cul>\n            \u003Cli>\u003Ca href=\"\u002Fblog\">Блог\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"\u002Fcontacts\">Контакты\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Faside>\n\u003C\u002Fmain>\n\u003Cfooter>\n    \u003Cp>© 2026 Все права защищены.\u003C\u002Fp>\n\u003C\u002Ffooter>\n",[106,1410,1411,1419,1432,1440,1449,1481,1509,1518,1526,1534,1542,1550,1563,1577,1586,1595,1609,1618,1647,1676,1685,1694,1703,1712,1732],{"__ignoreMap":145},[57,1412,1413,1415,1417],{"class":401,"line":402},[57,1414,406],{"class":405},[57,1416,1344],{"class":409},[57,1418,417],{"class":405},[57,1420,1421,1423,1425,1428,1430],{"class":401,"line":420},[57,1422,744],{"class":405},[57,1424,11],{"class":409},[57,1426,1427],{"class":405},">Название отличного сайта\u003C\u002F",[57,1429,11],{"class":409},[57,1431,417],{"class":405},[57,1433,1434,1436,1438],{"class":401,"line":664},[57,1435,744],{"class":405},[57,1437,1347],{"class":409},[57,1439,417],{"class":405},[57,1441,1442,1445,1447],{"class":401,"line":758},[57,1443,1444],{"class":405},"        \u003C",[57,1446,200],{"class":409},[57,1448,417],{"class":405},[57,1450,1451,1454,1456,1459,1461,1464,1466,1469,1472,1474,1477,1479],{"class":401,"line":764},[57,1452,1453],{"class":405},"            \u003C",[57,1455,203],{"class":409},[57,1457,1458],{"class":405},">\u003C",[57,1460,53],{"class":409},[57,1462,1463],{"class":615}," href",[57,1465,619],{"class":405},[57,1467,1468],{"class":622},"\"\u002F\"",[57,1470,1471],{"class":405},">Главная\u003C\u002F",[57,1473,53],{"class":409},[57,1475,1476],{"class":405},">\u003C\u002F",[57,1478,203],{"class":409},[57,1480,417],{"class":405},[57,1482,1483,1485,1487,1489,1491,1493,1495,1498,1501,1503,1505,1507],{"class":401,"line":774},[57,1484,1453],{"class":405},[57,1486,203],{"class":409},[57,1488,1458],{"class":405},[57,1490,53],{"class":409},[57,1492,1463],{"class":615},[57,1494,619],{"class":405},[57,1496,1497],{"class":622},"\"\u002Fabout\"",[57,1499,1500],{"class":405},">О нас\u003C\u002F",[57,1502,53],{"class":409},[57,1504,1476],{"class":405},[57,1506,203],{"class":409},[57,1508,417],{"class":405},[57,1510,1511,1514,1516],{"class":401,"line":790},[57,1512,1513],{"class":405},"        \u003C\u002F",[57,1515,200],{"class":409},[57,1517,417],{"class":405},[57,1519,1520,1522,1524],{"class":401,"line":796},[57,1521,767],{"class":405},[57,1523,1347],{"class":409},[57,1525,417],{"class":405},[57,1527,1528,1530,1532],{"class":401,"line":805},[57,1529,808],{"class":405},[57,1531,1344],{"class":409},[57,1533,417],{"class":405},[57,1535,1536,1538,1540],{"class":401,"line":967},[57,1537,406],{"class":405},[57,1539,1350],{"class":409},[57,1541,417],{"class":405},[57,1543,1544,1546,1548],{"class":401,"line":980},[57,1545,744],{"class":405},[57,1547,1356],{"class":409},[57,1549,417],{"class":405},[57,1551,1552,1554,1556,1559,1561],{"class":401,"line":989},[57,1553,1444],{"class":405},[57,1555,19],{"class":409},[57,1557,1558],{"class":405},">Наши услуги\u003C\u002F",[57,1560,19],{"class":409},[57,1562,417],{"class":405},[57,1564,1566,1568,1570,1573,1575],{"class":401,"line":1565},13,[57,1567,1444],{"class":405},[57,1569,15],{"class":409},[57,1571,1572],{"class":405},">Мы предоставляем лучшие решения.\u003C\u002F",[57,1574,15],{"class":409},[57,1576,417],{"class":405},[57,1578,1580,1582,1584],{"class":401,"line":1579},14,[57,1581,767],{"class":405},[57,1583,1356],{"class":409},[57,1585,417],{"class":405},[57,1587,1589,1591,1593],{"class":401,"line":1588},15,[57,1590,744],{"class":405},[57,1592,1359],{"class":409},[57,1594,417],{"class":405},[57,1596,1598,1600,1602,1605,1607],{"class":401,"line":1597},16,[57,1599,1444],{"class":405},[57,1601,24],{"class":409},[57,1603,1604],{"class":405},">Полезные ссылки\u003C\u002F",[57,1606,24],{"class":409},[57,1608,417],{"class":405},[57,1610,1612,1614,1616],{"class":401,"line":1611},17,[57,1613,1444],{"class":405},[57,1615,200],{"class":409},[57,1617,417],{"class":405},[57,1619,1621,1623,1625,1627,1629,1631,1633,1636,1639,1641,1643,1645],{"class":401,"line":1620},18,[57,1622,1453],{"class":405},[57,1624,203],{"class":409},[57,1626,1458],{"class":405},[57,1628,53],{"class":409},[57,1630,1463],{"class":615},[57,1632,619],{"class":405},[57,1634,1635],{"class":622},"\"\u002Fblog\"",[57,1637,1638],{"class":405},">Блог\u003C\u002F",[57,1640,53],{"class":409},[57,1642,1476],{"class":405},[57,1644,203],{"class":409},[57,1646,417],{"class":405},[57,1648,1650,1652,1654,1656,1658,1660,1662,1665,1668,1670,1672,1674],{"class":401,"line":1649},19,[57,1651,1453],{"class":405},[57,1653,203],{"class":409},[57,1655,1458],{"class":405},[57,1657,53],{"class":409},[57,1659,1463],{"class":615},[57,1661,619],{"class":405},[57,1663,1664],{"class":622},"\"\u002Fcontacts\"",[57,1666,1667],{"class":405},">Контакты\u003C\u002F",[57,1669,53],{"class":409},[57,1671,1476],{"class":405},[57,1673,203],{"class":409},[57,1675,417],{"class":405},[57,1677,1679,1681,1683],{"class":401,"line":1678},20,[57,1680,1513],{"class":405},[57,1682,200],{"class":409},[57,1684,417],{"class":405},[57,1686,1688,1690,1692],{"class":401,"line":1687},21,[57,1689,767],{"class":405},[57,1691,1359],{"class":409},[57,1693,417],{"class":405},[57,1695,1697,1699,1701],{"class":401,"line":1696},22,[57,1698,808],{"class":405},[57,1700,1350],{"class":409},[57,1702,417],{"class":405},[57,1704,1706,1708,1710],{"class":401,"line":1705},23,[57,1707,406],{"class":405},[57,1709,1362],{"class":409},[57,1711,417],{"class":405},[57,1713,1715,1717,1719,1722,1725,1728,1730],{"class":401,"line":1714},24,[57,1716,744],{"class":405},[57,1718,15],{"class":409},[57,1720,1721],{"class":405},">",[57,1723,1248],{"class":1724},"sj4cs",[57,1726,1727],{"class":405}," 2026 Все права защищены.\u003C\u002F",[57,1729,15],{"class":409},[57,1731,417],{"class":405},[57,1733,1735,1737,1739],{"class":401,"line":1734},25,[57,1736,808],{"class":405},[57,1738,1362],{"class":409},[57,1740,417],{"class":405},[24,1742,1744,1745,175,1747,175,1749,175,1752,175,1755],{"id":1743},"текстовые-и-групповые-элементы-figure-figcaption-details-summary-dialog","Текстовые и групповые элементы: ",[106,1746,286],{},[106,1748,296],{},[106,1750,1751],{},"details",[106,1753,1754],{},"summary",[106,1756,1757],{},"dialog",[15,1759,1760],{},"Помимо секционирующих, в HTML5 есть набор текстовых и групповых элементов для разметки отдельных смысловых единиц:",[200,1762,1763,1769,1778,1793,1805,1811,1820,1826,1832],{},[203,1764,1765,1768],{},[106,1766,1767],{},"\u003Cfigure>"," — контейнер для иллюстраций, схем, фотографий, фрагментов кода, таблиц, на которые ссылается основной текст;",[203,1770,1771,1774,1775,1777],{},[106,1772,1773],{},"\u003Cfigcaption>"," — подпись к содержимому ",[106,1776,1767],{},", обычно первый или последний дочерний элемент;",[203,1779,1780,387,1783,1786,1787,1789,1790,1792],{},[106,1781,1782],{},"\u003Cdetails>",[106,1784,1785],{},"\u003Csummary>"," — раскрывающийся блок: пользователь видит ",[106,1788,1785],{},", а развёрнутое содержимое ",[106,1791,1782],{}," показывается по клику. Готовая встроенная функциональность аккордеона без JavaScript;",[203,1794,1795,1798,1799,1802,1803,1204],{},[106,1796,1797],{},"\u003Cdialog>"," — модальное или немодальное диалоговое окно, открываемое через DOM-метод ",[106,1800,1801],{},"showModal()",". Современная замена ручных реализаций модальных окон поверх ",[106,1804,1192],{},[203,1806,1807,1810],{},[106,1808,1809],{},"\u003Cmark>"," — выделение фрагмента, который требует внимания читателя (например, найденный поиском текст);",[203,1812,1813,1816,1817,504],{},[106,1814,1815],{},"\u003Ctime>"," — дата или время в машинно-читаемой форме (",[106,1818,1819],{},"\u003Ctime datetime=\"2026-04-22\">22 апреля 2026\u003C\u002Ftime>",[203,1821,1822,1825],{},[106,1823,1824],{},"\u003Caddress>"," — контактная информация автора или владельца раздела;",[203,1827,1828,1831],{},[106,1829,1830],{},"\u003Ccite>"," — указание на источник или название цитируемой работы;",[203,1833,1834,1837],{},[106,1835,1836],{},"\u003Cblockquote>"," — блочная цитата большого объёма.",[15,1839,1840],{},"Пример сочетания нескольких контентных элементов:",[137,1842,1844],{"className":394,"code":1843,"language":396,"meta":145,"style":145},"\u003Carticle>\n    \u003Cfigure>\n        \u003Cimg src=\"cover.jpg\" alt=\"Обложка статьи\">\n        \u003Cfigcaption>Обложка статьи\u003C\u002Ffigcaption>\n    \u003C\u002Ffigure>\n    \u003Cp>Дата публикации: \u003Ctime datetime=\"2026-04-22\">22 апреля 2026\u003C\u002Ftime>\u003C\u002Fp>\n    \u003Cdetails>\n        \u003Csummary>Аннотация\u003C\u002Fsummary>\n        \u003Cp>Краткое содержание статьи, раскрываемое по клику.\u003C\u002Fp>\n    \u003C\u002Fdetails>\n\u003C\u002Farticle>\n",[106,1845,1846,1854,1862,1884,1897,1905,1936,1944,1957,1970,1978],{"__ignoreMap":145},[57,1847,1848,1850,1852],{"class":401,"line":402},[57,1849,406],{"class":405},[57,1851,1353],{"class":409},[57,1853,417],{"class":405},[57,1855,1856,1858,1860],{"class":401,"line":420},[57,1857,744],{"class":405},[57,1859,286],{"class":409},[57,1861,417],{"class":405},[57,1863,1864,1866,1868,1870,1872,1875,1877,1879,1882],{"class":401,"line":664},[57,1865,1444],{"class":405},[57,1867,290],{"class":409},[57,1869,616],{"class":615},[57,1871,619],{"class":405},[57,1873,1874],{"class":622},"\"cover.jpg\"",[57,1876,626],{"class":615},[57,1878,619],{"class":405},[57,1880,1881],{"class":622},"\"Обложка статьи\"",[57,1883,417],{"class":405},[57,1885,1886,1888,1890,1893,1895],{"class":401,"line":758},[57,1887,1444],{"class":405},[57,1889,296],{"class":409},[57,1891,1892],{"class":405},">Обложка статьи\u003C\u002F",[57,1894,296],{"class":409},[57,1896,417],{"class":405},[57,1898,1899,1901,1903],{"class":401,"line":764},[57,1900,767],{"class":405},[57,1902,286],{"class":409},[57,1904,417],{"class":405},[57,1906,1907,1909,1911,1914,1917,1920,1922,1925,1928,1930,1932,1934],{"class":401,"line":774},[57,1908,744],{"class":405},[57,1910,15],{"class":409},[57,1912,1913],{"class":405},">Дата публикации: \u003C",[57,1915,1916],{"class":409},"time",[57,1918,1919],{"class":615}," datetime",[57,1921,619],{"class":405},[57,1923,1924],{"class":622},"\"2026-04-22\"",[57,1926,1927],{"class":405},">22 апреля 2026\u003C\u002F",[57,1929,1916],{"class":409},[57,1931,1476],{"class":405},[57,1933,15],{"class":409},[57,1935,417],{"class":405},[57,1937,1938,1940,1942],{"class":401,"line":790},[57,1939,744],{"class":405},[57,1941,1751],{"class":409},[57,1943,417],{"class":405},[57,1945,1946,1948,1950,1953,1955],{"class":401,"line":796},[57,1947,1444],{"class":405},[57,1949,1754],{"class":409},[57,1951,1952],{"class":405},">Аннотация\u003C\u002F",[57,1954,1754],{"class":409},[57,1956,417],{"class":405},[57,1958,1959,1961,1963,1966,1968],{"class":401,"line":805},[57,1960,1444],{"class":405},[57,1962,15],{"class":409},[57,1964,1965],{"class":405},">Краткое содержание статьи, раскрываемое по клику.\u003C\u002F",[57,1967,15],{"class":409},[57,1969,417],{"class":405},[57,1971,1972,1974,1976],{"class":401,"line":967},[57,1973,767],{"class":405},[57,1975,1751],{"class":409},[57,1977,417],{"class":405},[57,1979,1980,1982,1984],{"class":401,"line":980},[57,1981,808],{"class":405},[57,1983,1353],{"class":409},[57,1985,417],{"class":405},[24,1987,1989],{"id":1988},"сравнение-семантичной-разметки-и-div-ада","Сравнение семантичной разметки и «div-ада»",[15,1991,1992,1993,1995,1996,1998],{},"Среди всех HTML-элементов отдельно стоит выделить ",[106,1994,1192],{},". Этот элемент — конструкционный контейнер: он не несёт семантического значения и без стилизации невидим для пользователя. Та же страница, что в примере выше, могла бы быть собрана исключительно на ",[106,1997,1192],{},":",[137,2000,2002],{"className":394,"code":2001,"language":396,"meta":145,"style":145},"\u003Cdiv>\n    \u003Ch1>Название отличного сайта\u003C\u002Fh1>\n    \u003Cdiv>\n        \u003Cul>\n            \u003Cli>\u003Ca href=\"\u002F\">Главная\u003C\u002Fa>\u003C\u002Fli>\n            \u003Cli>\u003Ca href=\"\u002Fabout\">О нас\u003C\u002Fa>\u003C\u002Fli>\n        \u003C\u002Ful>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv>\n    \u003Cdiv>\n        \u003Ch2>Наши услуги\u003C\u002Fh2>\n        \u003Cp>Мы предоставляем лучшие решения.\u003C\u002Fp>\n    \u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003Cdiv>\n    \u003Cp>© 2026 Все права защищены.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[106,2003,2004,2012,2024,2032,2040,2066,2092,2100,2108,2116,2124,2132,2144,2156,2164,2172,2180,2196],{"__ignoreMap":145},[57,2005,2006,2008,2010],{"class":401,"line":402},[57,2007,406],{"class":405},[57,2009,724],{"class":409},[57,2011,417],{"class":405},[57,2013,2014,2016,2018,2020,2022],{"class":401,"line":420},[57,2015,744],{"class":405},[57,2017,11],{"class":409},[57,2019,1427],{"class":405},[57,2021,11],{"class":409},[57,2023,417],{"class":405},[57,2025,2026,2028,2030],{"class":401,"line":664},[57,2027,744],{"class":405},[57,2029,724],{"class":409},[57,2031,417],{"class":405},[57,2033,2034,2036,2038],{"class":401,"line":758},[57,2035,1444],{"class":405},[57,2037,200],{"class":409},[57,2039,417],{"class":405},[57,2041,2042,2044,2046,2048,2050,2052,2054,2056,2058,2060,2062,2064],{"class":401,"line":764},[57,2043,1453],{"class":405},[57,2045,203],{"class":409},[57,2047,1458],{"class":405},[57,2049,53],{"class":409},[57,2051,1463],{"class":615},[57,2053,619],{"class":405},[57,2055,1468],{"class":622},[57,2057,1471],{"class":405},[57,2059,53],{"class":409},[57,2061,1476],{"class":405},[57,2063,203],{"class":409},[57,2065,417],{"class":405},[57,2067,2068,2070,2072,2074,2076,2078,2080,2082,2084,2086,2088,2090],{"class":401,"line":774},[57,2069,1453],{"class":405},[57,2071,203],{"class":409},[57,2073,1458],{"class":405},[57,2075,53],{"class":409},[57,2077,1463],{"class":615},[57,2079,619],{"class":405},[57,2081,1497],{"class":622},[57,2083,1500],{"class":405},[57,2085,53],{"class":409},[57,2087,1476],{"class":405},[57,2089,203],{"class":409},[57,2091,417],{"class":405},[57,2093,2094,2096,2098],{"class":401,"line":790},[57,2095,1513],{"class":405},[57,2097,200],{"class":409},[57,2099,417],{"class":405},[57,2101,2102,2104,2106],{"class":401,"line":796},[57,2103,767],{"class":405},[57,2105,724],{"class":409},[57,2107,417],{"class":405},[57,2109,2110,2112,2114],{"class":401,"line":805},[57,2111,808],{"class":405},[57,2113,724],{"class":409},[57,2115,417],{"class":405},[57,2117,2118,2120,2122],{"class":401,"line":967},[57,2119,406],{"class":405},[57,2121,724],{"class":409},[57,2123,417],{"class":405},[57,2125,2126,2128,2130],{"class":401,"line":980},[57,2127,744],{"class":405},[57,2129,724],{"class":409},[57,2131,417],{"class":405},[57,2133,2134,2136,2138,2140,2142],{"class":401,"line":989},[57,2135,1444],{"class":405},[57,2137,19],{"class":409},[57,2139,1558],{"class":405},[57,2141,19],{"class":409},[57,2143,417],{"class":405},[57,2145,2146,2148,2150,2152,2154],{"class":401,"line":1565},[57,2147,1444],{"class":405},[57,2149,15],{"class":409},[57,2151,1572],{"class":405},[57,2153,15],{"class":409},[57,2155,417],{"class":405},[57,2157,2158,2160,2162],{"class":401,"line":1579},[57,2159,767],{"class":405},[57,2161,724],{"class":409},[57,2163,417],{"class":405},[57,2165,2166,2168,2170],{"class":401,"line":1588},[57,2167,808],{"class":405},[57,2169,724],{"class":409},[57,2171,417],{"class":405},[57,2173,2174,2176,2178],{"class":401,"line":1597},[57,2175,406],{"class":405},[57,2177,724],{"class":409},[57,2179,417],{"class":405},[57,2181,2182,2184,2186,2188,2190,2192,2194],{"class":401,"line":1611},[57,2183,744],{"class":405},[57,2185,15],{"class":409},[57,2187,1721],{"class":405},[57,2189,1248],{"class":1724},[57,2191,1727],{"class":405},[57,2193,15],{"class":409},[57,2195,417],{"class":405},[57,2197,2198,2200,2202],{"class":401,"line":1620},[57,2199,808],{"class":405},[57,2201,724],{"class":409},[57,2203,417],{"class":405},[15,2205,2206,2207,2209,2210,2213,2214,2216],{},"Визуально после рендера обе страницы могут выглядеть идентично. Но, как несложно заметить, разметка на сплошных ",[106,2208,1192],{}," менее читаема, и — что важнее — она негативно влияет на SEO и доступность: поисковые роботы и скринридеры теряют возможность понять, где здесь шапка, где навигация, а где основной контент. Подобная практика получила в индустрии полуироничное название «div-ад» (англ. ",[32,2211,2212],{},"div soup",") и считается антипаттерном. Простое правило: если для смыслового блока существует подходящий семантический тег — использовать его, а к ",[106,2215,1192],{}," прибегать там, где нужен именно конструкционный контейнер для целей вёрстки.",[19,2218,2220],{"id":2219},"метаинформация-документа","Метаинформация документа",[24,2222,2224],{"id":2223},"метатеги-управления-рендерингом-и-индексацией","Метатеги управления рендерингом и индексацией",[15,2226,1080,2227,2229],{},[106,2228,1083],{}," помимо подключения ресурсов содержит набор метатегов, передающих браузеру и внешним системам сведения о документе. Среди практически значимых:",[200,2231,2232,2238,2250,2256],{},[203,2233,2234,2237],{},[106,2235,2236],{},"\u003Cmeta name=\"description\" content=\"...\">"," — короткое описание страницы, используемое поисковыми системами в качестве сниппета в результатах поиска. В пределах 150–160 символов;",[203,2239,2240,2243,2244,175,2247,2249],{},[106,2241,2242],{},"\u003Cmeta name=\"robots\" content=\"index, follow\">"," — инструкция поисковым роботам: индексировать ли страницу и переходить ли по ссылкам с неё. Значения ",[106,2245,2246],{},"noindex",[106,2248,282],{}," исключают страницу из индекса или запрещают переход по её ссылкам;",[203,2251,2252,2255],{},[106,2253,2254],{},"\u003Clink rel=\"canonical\" href=\"...\">"," — указание канонического URL страницы. Используется, когда одна и та же страница доступна по нескольким адресам, чтобы поисковые системы не считали их дубликатами;",[203,2257,2258,2261],{},[106,2259,2260],{},"\u003Clink rel=\"icon\" href=\"favicon.svg\">"," — пиктограмма страницы во вкладке браузера, в избранном, в результатах поиска.",[15,2263,2264,2265,2268],{},"Встречающийся в старой разметке ",[106,2266,2267],{},"\u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"," относился к режимам совместимости Internet Explorer; с выводом IE из поддержки в 2022 году тег стал историческим артефактом и в новой разметке не нужен.",[15,2270,2271,2272,2275],{},"Метатег ",[106,2273,2274],{},"\u003Cmeta name=\"keywords\">"," исторически использовался для перечисления поисковых запросов, по которым автор хотел бы видеть страницу в выдаче. Современные поисковые системы его игнорируют — он остался как памятник эпохе массового SEO-спама.",[24,2277,2279],{"id":2278},"системы-разметки-метаданных","Системы разметки метаданных",[15,2281,2282,2283,387,2285,1133,2287,2289],{},"Помимо базовых метатегов, которые читают сами браузеры и поисковые роботы, существует ряд внешних систем разметки — протоколов и словарей, с помощью которых страница сообщает о себе сторонним сервисам: соцсетям, мессенджерам, агрегаторам, поисковым движкам. Технически все они выражаются через те же ",[106,2284,596],{},[106,2286,600],{},[106,2288,1083],{}," либо через атрибуты прямо на содержательной разметке, но логически это отдельный слой «разметки про разметку».",[15,2291,2292],{},"Задачи, которые решают такие системы, сводятся к двум:",[200,2294,2295,2298],{},[203,2296,2297],{},"сформировать превью при публикации ссылки — карточку с заголовком, описанием и изображением в соцсетях, мессенджерах, поисковых сниппетах (этим занимается протокол Open Graph и родственные ему Twitter Cards);",[203,2299,2300],{},"описать содержимое страницы как структурированные сущности — товар, событие, рецепт, организацию, статью — в формате, который поисковые системы могут использовать для расширенных сниппетов и агрегаций (этим занимаются словарь schema.org и форматы его записи: JSON-LD, Microdata, RDFa).",[19,2302,2304],{"id":2303},"доступность-на-уровне-разметки","Доступность на уровне разметки",[15,2306,2307,2308,2310,2311,2313],{},"Доступность (англ. ",[32,2309,1313],{},", a11y) — свойство веб-страницы быть пригодной к восприятию пользователями с разными возможностями: незрячими и слабовидящими, людьми с моторными или когнитивными нарушениями, пользователями в условиях плохой сети или нестандартного устройства ввода. Практически это означает, что страница должна корректно работать не только при визуальном просмотре мышью, но и при навигации клавиатурой, при озвучивании программой чтения с экрана (англ. ",[32,2312,1317],{},"), при увеличенном масштабе, при контрастной теме. Разработка с учётом доступности — не отдельная опция для узкой аудитории, а часть нормального качества продукта: те же приёмы, которые делают страницу пригодной для скринридера, улучшают её SEO, облегчают автоматическое тестирование и делают интерфейс устойчивее к нестандартным условиям использования.",[15,2315,2316,2317,2320,2321,2324,2325,2328],{},"Международный стандарт доступности — ",[32,2318,2319],{},"Web Content Accessibility Guidelines"," (WCAG), разрабатываемый W3C в рамках инициативы WAI (Web Accessibility Initiative). WCAG определяет четыре базовых принципа — воспринимаемость, управляемость, понятность, надёжность — и формулирует проверяемые критерии соответствия на трёх уровнях: A, AA (целевой для большинства публичных сайтов) и AAA. Дополняет стандарт спецификация WAI-ARIA, описывающая роли (",[106,2322,2323],{},"role","), состояния и свойства (",[106,2326,2327],{},"aria-*","), которыми размечаются кастомные интерактивные виджеты, когда встроенной семантики HTML недостаточно.",[15,2330,2331,2332,1197,2334,2336,2337,2339,2340,2342,2343,2346,2347,2350,2351,2355,2356,2359,2360,175,2363,175,2365,2367],{},"На уровне разметки грамотная доступность держится на нескольких простых подходах: логический порядок элементов в HTML соответствует порядку, в котором контент должен восприниматься (CSS может переупорядочить его визуально, но скринридер читает исходник); заголовки ",[106,2333,386],{},[106,2335,1200],{}," образуют последовательную иерархию и работают для скринридера как навигация; семантические теги используются вместо анонимных ",[106,2338,1192],{}," (см. предыдущий раздел); у каждого ",[106,2341,580],{}," задан осмысленный ",[106,2344,2345],{},"alt"," (пустой ",[106,2348,2349],{},"alt=\"\""," — явный сигнал декоративности, отсутствующий атрибут — ошибка). Действует устойчивая формулировка, известная как ",[2352,2353,2354],"strong",{},"первое правило ARIA",": ",[32,2357,2358],{},"«Не используйте ARIA, если можно обойтись нативным HTML-элементом»",". Нативные ",[106,2361,2362],{},"\u003Cbutton>",[106,2364,476],{},[106,2366,592],{}," из коробки получают правильную семантику, поведение клавиатуры и фокус — ARIA нужен только там, где этих средств недостаточно.",[15,2369,2370],{},"Базовую проверку доступности дают бесплатные инструменты, доступные прямо в браузере: расширение axe DevTools, встроенный в Chrome DevTools аудит Lighthouse, вкладка Accessibility с деревом доступности. Они быстро ловят типовые нарушения, но не заменяют ручной проверки клавиатурой и реальным скринридером, которая остаётся стандартом.",[19,2372,2374],{"id":2373},"итоги-темы","Итоги темы",[15,2376,2377],{},"Веб-страница — это конечный результат цепочки «URL → HTTP-запрос → HTML-документ → рендер браузером». В этой цепочке HTML играет роль базового языка, описывающего структуру и смысл контента, тогда как оформление и поведение возложены на CSS и JavaScript. Современный HTML — это Living Standard, поддерживаемый WHATWG; его развитие синхронизируется с реализациями в основных браузерных движках (Blink, WebKit, Gecko) через инициативы вроде Interop.",[15,2379,2380,2381,175,2383,175,2385,2387,2388,2390,2391,2393],{},"Корректная разметка строится из трёх слоёв: правильная структура документа (DOCTYPE, ",[106,2382,1038],{},[106,2384,1083],{},[106,2386,1128],{},"), осмысленный выбор семантических тегов вместо сплошных ",[106,2389,1192],{}," и согласованная метаинформация. Поверх этой основы накладывается забота о доступности: логический порядок элементов, иерархия заголовков, осмысленные атрибуты ",[106,2392,2345],{},", минимально необходимое использование ARIA. Эти решения принимаются на самом раннем этапе и стоят дёшево, если о них помнить с первой строки разметки, и дорого — если возвращаться к ним постфактум.",[15,2395,2396],{},"В следующей теме мы перейдём к языку CSS и научимся управлять оформлением страницы, сохраняя смысловую структуру, заложенную здесь.",[19,2398,2400],{"id":2399},"литература","Литература",[2402,2403,2406,2410,2414,2418],"ol",{"className":2404},[2405],"references",[203,2407,2409],{"id":2408},"ref-1","Nelson T. H. A File Structure for the Complex, the Changing and the Indeterminate. — Proceedings of the 1965 20th National Conference, 1965, С. 84–100, DOI: 10.1145\u002F800197.806036.",[203,2411,2413],{"id":2412},"ref-2","Berners-Lee T. Information Management: A Proposal. — CERN, 1989, https:\u002F\u002Fwww.w3.org\u002FHistory\u002F1989\u002Fproposal.html.",[203,2415,2417],{"id":2416},"ref-3","Garsiel T., Irish P. How browsers work: Behind the scenes of modern web browsers. — 2011, http:\u002F\u002Ftaligarsiel.com\u002FProjects\u002Fhowbrowserswork1.htm.",[203,2419,2421],{"id":2420},"ref-4","Kosaka M. Inside look at modern web browser. — 2018, https:\u002F\u002Fdeveloper.chrome.com\u002Fblog\u002Finside-browser-part1.",[2423,2424,2425],"style",{},"html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}",{"title":145,"searchDepth":420,"depth":420,"links":2427},[2428,2435,2442,2453,2461,2465,2466,2467],{"id":21,"depth":420,"text":22,"children":2429},[2430,2431,2432,2433,2434],{"id":26,"depth":664,"text":27},{"id":70,"depth":664,"text":71},{"id":127,"depth":664,"text":128},{"id":194,"depth":664,"text":195},{"id":340,"depth":664,"text":341},{"id":368,"depth":420,"text":369,"children":2436},[2437,2438,2439,2440,2441],{"id":372,"depth":664,"text":373},{"id":469,"depth":664,"text":470},{"id":566,"depth":664,"text":567},{"id":693,"depth":664,"text":694},{"id":708,"depth":664,"text":709},{"id":837,"depth":420,"text":838,"children":2443},[2444,2446,2448,2450,2452],{"id":998,"depth":664,"text":2445},"\u003C!DOCTYPE> и режим стандартов",{"id":1034,"depth":664,"text":2447},"Корневой элемент \u003Chtml>, атрибуты lang и dir",{"id":1079,"depth":664,"text":2449},"Раздел \u003Chead>: кодировка, viewport, заголовок, подключение ресурсов",{"id":1149,"depth":664,"text":2451},"Раздел \u003Cbody>: видимый контент страницы",{"id":1173,"depth":664,"text":1174},{"id":1263,"depth":420,"text":1264,"children":2454},[2455,2456,2458,2460],{"id":1267,"depth":664,"text":1268},{"id":1340,"depth":664,"text":2457},"Секционирующие элементы: header, nav, main, article, section, aside, footer",{"id":1743,"depth":664,"text":2459},"Текстовые и групповые элементы: figure, figcaption, details, summary, dialog",{"id":1988,"depth":664,"text":1989},{"id":2219,"depth":420,"text":2220,"children":2462},[2463,2464],{"id":2223,"depth":664,"text":2224},{"id":2278,"depth":664,"text":2279},{"id":2303,"depth":420,"text":2304},{"id":2373,"depth":420,"text":2374},{"id":2399,"depth":420,"text":2400},"aidt-mag-frontend",null,"md",false,{},true,"\u002Fcourses\u002Faidt-mag-frontend\u002Ftopic-01-content","content",{"title":6,"description":17},"courses\u002Faidt-mag-frontend\u002Ftopic-01-content","topic-01","EFVy4cJTsczWJbICBxXDhbO_4ll9ChAiKAM8rORw3nE",{"id":2481,"title":2482,"body":2483,"course_slug":2468,"description":3528,"env_label":3529,"env_url":3530,"extension":2470,"group":2469,"is_course_project":2471,"is_index":2471,"level":2469,"meta":3531,"navigation":2473,"path":3532,"section":3533,"seo":3534,"stem":3535,"topic_number":402,"topic_slug":2478,"__hash__":3536},"courses\u002Fcourses\u002Faidt-mag-frontend\u002Ftopic-01-pz.md","Практическое занятие 1. Семантическая разметка дашборда «Личный кабинет магистранта»",{"type":8,"value":2484,"toc":3512},[2485,2488,2494,2500,2504,2507,2511,2514,2517,2534,2538,2541,2545,2612,2616,2626,2629,2693,2701,2714,2763,2771,2791,2795,2851,2855,2858,2862,2867,2920,2924,2939,2943,2946,2955,2958,3198,3204,3207,3242,3247,3264,3267,3270,3279,3283,3286,3343,3346,3353,3375,3382,3386,3389,3434,3438],[11,2486,2482],{"id":2487},"практическое-занятие-1-семантическая-разметка-дашборда-личный-кабинет-магистранта",[15,2489,2490,2493],{},[2352,2491,2492],{},"Объём:"," 2 академических часа",[15,2495,2496,2499],{},[2352,2497,2498],{},"Раздел курса:"," тема 1 «Введение в веб-стек, HTML, семантика»",[19,2501,2503],{"id":2502},"введение","Введение",[15,2505,2506],{},"Первое занятие — точка входа в работу с референсным проектом «Личный кабинет магистранта». Референсный проект используется в практикуме до того момента, пока у магистранта не появится собственный согласованный с научным руководителем макет; начиная с этого момента занятия идут уже на собственном проекте магистранта. На этом занятии мы намеренно ограничиваемся одним пластом — структурой документа: ни CSS, ни JavaScript ещё не подключаются. Такое ограничение позволяет увидеть, как браузер интерпретирует чистый HTML, какие user-agent-стили он применяет по умолчанию и почему семантика тегов имеет значение задолго до того, как появляется визуальное оформление.",[19,2508,2510],{"id":2509},"цель-работы","Цель работы",[15,2512,2513],{},"Собрать семантичный HTML-каркас главной страницы дашборда по Figma-макету и освоить базовый инструментарий фронтенд-разработчика: Emmet в редакторе, DevTools в браузере, валидатор разметки.",[15,2515,2516],{},"После выполнения работы магистрант сможет:",[200,2518,2519,2522,2525,2528,2531],{},[203,2520,2521],{},"разметить страницу-дашборд семантическими тегами HTML5 и обосновать выбор тегов для каждого блока;",[203,2523,2524],{},"использовать Emmet для разворачивания типовых конструкций разметки;",[203,2526,2527],{},"проводить аудит DOM-дерева и применённых user-agent-стилей в DevTools;",[203,2529,2530],{},"проходить Nu Html Checker без ошибок и осознанно принимать предупреждения;",[203,2532,2533],{},"сдавать работу через Merge Request в личном GitLab-проекте.",[19,2535,2537],{"id":2536},"теоретический-минимум","Теоретический минимум",[15,2539,2540],{},"Часть материала уже разобрана в теме и здесь сводится к короткой отсылке; остальное вводится прямо в задании, потому что в лекции не раскрывалось.",[24,2542,2544],{"id":2543},"из-лекционного-материала","Из лекционного материала",[200,2546,2547,2566,2584,2599],{},[203,2548,2549,2550,2552,2553,2555,2556,387,2558,2560,2561,387,2563,2565],{},"Структура HTML-документа: ",[106,2551,1001],{},", корневой элемент ",[106,2554,1038],{}," с атрибутами ",[106,2557,1042],{},[106,2559,1045],{},", разделы ",[106,2562,1083],{},[106,2564,1128],{}," — см. учебное пособие, тема 1, раздел «Структура HTML-документа».",[203,2567,2568,2569,175,2571,175,2573,175,2575,175,2577,175,2579,175,2581,2583],{},"Секционирующие элементы ",[106,2570,1284],{},[106,2572,1287],{},[106,2574,1290],{},[106,2576,1295],{},[106,2578,1203],{},[106,2580,1298],{},[106,2582,1301],{}," и правила их вложенности — там же, раздел «Семантическая разметка», подраздел «Секционирующие элементы».",[203,2585,2586,2587,2589,2590,175,2592,2589,2594,175,2596,2598],{},"Текстовые и групповые элементы ",[106,2588,1767],{}," \u002F ",[106,2591,1773],{},[106,2593,1782],{},[106,2595,1785],{},[106,2597,1797],{}," — там же, подраздел «Текстовые и групповые элементы».",[203,2600,2601,2602,175,2605,175,2608,2611],{},"Метатеги ",[106,2603,2604],{},"charset",[106,2606,2607],{},"viewport",[106,2609,2610],{},"description"," — раздел «Метаинформация документа».",[24,2613,2615],{"id":2614},"инструментарий-вводимый-на-занятии","Инструментарий, вводимый на занятии",[15,2617,2618,2621,2622,2625],{},[2352,2619,2620],{},"Редактор и Emmet."," Рабочий редактор курса — VS Code (подойдёт и любой другой с поддержкой Emmet: WebStorm, Sublime Text, Zed). ",[2352,2623,2624],{},"Emmet"," — плагин с набором сокращений, позволяющих разворачивать в валидный HTML целые фрагменты разметки одним нажатием Tab. В VS Code встроен без дополнительной установки.",[15,2627,2628],{},"Несколько базовых паттернов Emmet:",[200,2630,2631,2656,2665,2674,2680,2686],{},[203,2632,2633,2636,2637,175,2639,175,2642,2644,2645,387,2648,175,2651,2653,2654,1204],{},[106,2634,2635],{},"!"," + Tab → полный HTML5-каркас с ",[106,2638,1001],{},[106,2640,2641],{},"\u003Chtml lang>",[106,2643,1083],{}," с ",[106,2646,2647],{},"\u003Cmeta charset>",[106,2649,2650],{},"\u003Cmeta viewport>",[106,2652,1108],{},", пустым ",[106,2655,1128],{},[203,2657,2658,2661,2662,1204],{},[106,2659,2660],{},"div.card"," + Tab → ",[106,2663,2664],{},"\u003Cdiv class=\"card\">\u003C\u002Fdiv>",[203,2666,2667,2670,2671,1204],{},[106,2668,2669],{},"section#disciplines>h2+ul>li*6"," + Tab → секция с заголовком и списком из шести пустых ",[106,2672,2673],{},"\u003Cli>",[203,2675,2676,2679],{},[106,2677,2678],{},"header>nav>ul>li.nav-item*5>a"," + Tab → каркас шапки с навигацией из пяти пунктов;",[203,2681,2682,2685],{},[106,2683,2684],{},"article.card>h3{$$}+p*2"," + Tab → карточка с нумерованным заголовком и двумя параграфами;",[203,2687,2688,2689,2692],{},"оборачивание уже существующего HTML в тег — команда ",[32,2690,2691],{},"Emmet: Wrap with Abbreviation"," (Shift+Ctrl+P → ввод команды).",[15,2694,2695,2696,274],{},"Emmet избавляет от набора закрывающих тегов и атрибутов руками; осваивается за один вечер и дальше экономит часы. Подробный справочник — ",[53,2697,2700],{"href":2698,"rel":2699},"https:\u002F\u002Fdocs.emmet.io\u002Fcheat-sheet\u002F",[282],"docs.emmet.io\u002Fcheat-sheet",[15,2702,2703,2706,2707,462,2710,2713],{},[2352,2704,2705],{},"Браузерные DevTools."," Инструменты разработчика встроены во все современные браузеры. Открываются ",[32,2708,2709],{},"F12",[32,2711,2712],{},"Ctrl+Shift+I"," (Cmd+Opt+I в macOS). Вкладки, нужные на этом занятии:",[200,2715,2716,2722,2745,2751],{},[203,2717,2718,2721],{},[32,2719,2720],{},"Elements"," — дерево DOM после парсинга. Показывает реальную структуру документа, который отрисовал браузер (не путать с исходным текстом). Используется, чтобы проверить вложенность тегов, наличие непарных и ненужных элементов, разобраться в чужой вёрстке.",[203,2723,2724,2727,2728,2730,2731,2734,2735,2738,2739,2741,2742,2744],{},[32,2725,2726],{},"Styles"," (панель справа от ",[32,2729,2720],{},") — стили, применённые к выбранному элементу, включая ",[2352,2732,2733],{},"user-agent styles"," — браузерные стили по умолчанию. Блок ",[106,2736,2737],{},"user agent stylesheet"," показывает, почему, например, у ",[106,2740,1128],{}," отступ 8 px или у ",[106,2743,1280],{}," — маркеры и padding, хотя мы CSS не подключали. Эти стили станут предметом практического занятия 2.",[203,2746,2747,2750],{},[32,2748,2749],{},"Network"," — список всех HTTP-запросов страницы. Полезно, чтобы увидеть, какие ресурсы (изображения, шрифты) на самом деле подгружаются.",[203,2752,2753,2756,2757,387,2759,2762],{},[32,2754,2755],{},"Sources → Page"," — исходный HTML-текст страницы до парсинга. Сравнение ",[32,2758,2720],{},[32,2760,2761],{},"Sources"," показывает, какие ошибки разметки браузер «молча» починил.",[15,2764,2765,2766,274],{},"DevTools — основной рабочий инструмент фронтенд-разработчика; на каждом следующем занятии к нему будут добавляться новые вкладки и сценарии. Подробно — ",[53,2767,2770],{"href":2768,"rel":2769},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Fdevtools",[282],"developer.chrome.com\u002Fdocs\u002Fdevtools",[15,2772,2773,2776,2777,2782,2783,2786,2787,2790],{},[2352,2774,2775],{},"Nu Html Checker."," Эталонный валидатор разметки W3C, доступен на ",[53,2778,2781],{"href":2779,"rel":2780},"https:\u002F\u002Fvalidator.w3.org\u002Fnu\u002F",[282],"validator.w3.org\u002Fnu",". Принимает URL, загруженный файл или вставленный текст. Сообщения делятся на ",[32,2784,2785],{},"Error"," (нарушение спецификации — должно быть исправлено) и ",[32,2788,2789],{},"Warning"," (предупреждение о сомнительной практике — может быть принято осознанно). Для сдачи занятия нужны 0 ошибок; предупреждения допустимы при объяснении в отчёте.",[19,2792,2794],{"id":2793},"перечень-оснащения","Перечень оснащения",[200,2796,2797,2800,2803,2810,2841],{},[203,2798,2799],{},"VS Code 1.90+ либо аналог с поддержкой Emmet.",[203,2801,2802],{},"Chrome 120+ или Firefox 120+.",[203,2804,2805,2806,2809],{},"Установленный ",[106,2807,2808],{},"git",", доступ к GitLab кафедры (см. общие правила выполнения работ практикума).",[203,2811,2812,2815,2816,2824,2825,175,2828,175,2831,175,2834,175,2837,2840],{},[2352,2813,2814],{},"Макет дашборда в Figma:"," ",[53,2817,2820,2821],{"href":2818,"rel":2819},"https:\u002F\u002Fwww.figma.com\u002Fdesign\u002F6hsNYK2yR3ej9eKFSelbCX\u002Faidt-mag-frontend-sample?node-id=8-2",[282],"aidt-mag-frontend-sample, фрейм ",[106,2822,2823],{},"dashboard-student-light",". В макете уже проставлены имена слоёв, совпадающие с будущими семантическими тегами и классами (",[106,2826,2827],{},"app-header",[106,2829,2830],{},"sidebar",[106,2832,2833],{},"main-content",[106,2835,2836],{},"card-schedule",[106,2838,2839],{},"nav-home"," и т. д.) — используются как шпаргалка по структуре.",[203,2842,2843,2844,2847,2848,274],{},"Бриф и доменная модель референсного проекта — ",[106,2845,2846],{},"pz-env\u002Fbrief.md"," рядом с текстом занятия. В нём перечислены сущности (дисциплины, расписание, прогресс, дедлайны, уведомления, KPI магистранта), значения, которые подставляются в разметку, а также явно зафиксировано, чего на дашборде ",[2352,2849,2850],{},"нет",[19,2852,2854],{"id":2853},"порядок-выполнения-работы","Порядок выполнения работы",[15,2856,2857],{},"Работа состоит из трёх частей, которые выполняются последовательно: сначала каркас документа и метаинформация, затем семантическая разметка содержимого по макету, в завершение — отладка через DevTools и валидация. По итогам каждой части магистрант фиксирует промежуточный результат коммитом в рабочую ветку.",[24,2859,2861],{"id":2860},"часть-1-каркас-документа-и-метаинформация","Часть 1. Каркас документа и метаинформация",[2863,2864,2866],"h4",{"id":2865},"задание","Задание",[2402,2868,2869,2906,2913],{},[203,2870,2871,2872,2875,2876,2878,2879],{},"Откройте свой проект, создайте файл ",[106,2873,2874],{},"lab-01\u002Findex.html",". В пустом файле наберите ",[106,2877,2635],{}," и нажмите Tab — Emmet развернёт базовый HTML5-каркас. Доведите его до вида, соответствующего проекту:\n",[200,2880,2881,2890,2901],{},[203,2882,2883,2884,2887,2888,1204],{},"атрибут ",[106,2885,2886],{},"lang=\"ru\""," на ",[106,2889,1038],{},[203,2891,2892,387,2895,2644,2898,1204],{},[106,2893,2894],{},"\u003Cmeta charset=\"utf-8\">",[106,2896,2897],{},"\u003Cmeta name=\"viewport\">",[106,2899,2900],{},"width=device-width, initial-scale=1",[203,2902,2903,2905],{},[106,2904,1108],{}," формата «Дашборд — Личный кабинет магистранта ВГТУ».",[203,2907,2908,2909,2912],{},"Добавьте ",[106,2910,2911],{},"\u003Cmeta name=\"description\">"," — одно-два предложения о назначении страницы.",[203,2914,2915,2916,2919],{},"CSS и JavaScript на этом этапе ",[2352,2917,2918],{},"не подключайте",". Занятие оценивает разметку.",[2863,2921,2923],{"id":2922},"результат","Результат",[15,2925,2926,2929,2930,2932,2933,2935,2936,2938],{},[106,2927,2928],{},"index.html"," с заполненной шапкой ",[106,2931,1083],{},", открывается в браузере без ошибок консоли. Во вкладке ",[32,2934,2720],{}," DevTools структура ",[106,2937,1083],{}," читается сверху вниз без сюрпризов. Nu Html Checker на этом этапе проходит без ошибок парсинга.",[24,2940,2942],{"id":2941},"часть-2-структура-дашборда-по-макету","Часть 2. Структура дашборда по макету",[2863,2944,2866],{"id":2945},"задание-1",[15,2947,2948,2949,2951,2952,2954],{},"Откройте Figma-макет рядом с редактором. Используя его как визуальный референс, разметьте ",[106,2950,1128],{}," семантическими тегами. Следуйте именам слоёв в макете — они подсказывают, какой тег уместен в каждом месте. Сверьтесь с брифом (",[106,2953,2846],{},"), чтобы понимать, что означает каждый блок и какие данные он показывает.",[15,2956,2957],{},"Состав страницы определяется макетом. Минимальный набор:",[2402,2959,2960,3018,3072],{},[203,2961,2962,2971,2972,3011,3014,3015,3017],{},[2352,2963,2964,2965,2967,2968,2970],{},"Шапка приложения — ",[106,2966,1284],{}," со слоем ",[106,2969,2827],{}," в макете."," Содержит:",[200,2973,2974,2980,3001],{},[203,2975,2976,2977,1204],{},"логотип кафедры (знак + название) — обёрнут в ссылку ",[106,2978,2979],{},"\u003Ca href=\"\u002F\">",[203,2981,2982,2983,2986,2987,2990,2991,2589,2994,2997,2998,1204],{},"поле поиска — ",[106,2984,2985],{},"\u003Cinput type=\"search\">"," внутри ",[106,2988,2989],{},"\u003Cform role=\"search\">","; подсказка про сочетание ",[106,2992,2993],{},"Ctrl+K",[106,2995,2996],{},"Cmd+K"," оформляется внутри ",[106,2999,3000],{},"\u003Ckbd>",[203,3002,3003,3004,3007,3008,274],{},"действия в правой части (контейнер ",[106,3005,3006],{},"\u003Cdiv class=\"header-actions\">","): кнопка переключения темы, кнопка уведомлений с числовым бейджем, меню профиля — аватар плюс индикатор раскрытия. Действия — ",[106,3009,3010],{},"\u003Cbutton type=\"button\">",[3012,3013],"br",{},"Горизонтального текстового меню в шапке ",[2352,3016,2850],{}," (главная навигация — в сайдбаре).",[203,3019,3020,3027,3028,3030,3031,3033,3034,2589,3036,3038,3039,3041,3042,3045,3046,3049,3050,3053,3054,3057,3058,3061,3062,3065,3066,3068,3069,274],{},[2352,3021,3022,3023,2967,3025],{},"Сайдбар — ",[106,3024,1298],{},[106,3026,2830],{}," слева от основного контента. Это единственная навигация уровня приложения, поэтому внутри ",[106,3029,1298],{}," лежит ",[106,3032,1287],{}," со списком ",[106,3035,1280],{},[106,3037,2673],{}," из семи иконочных пунктов: ",[106,3040,2839],{}," (Дашборд), ",[106,3043,3044],{},"nav-profile"," (Профиль), ",[106,3047,3048],{},"nav-portfolio"," (Портфолио), ",[106,3051,3052],{},"nav-messages"," (Сообщения), ",[106,3055,3056],{},"nav-programs"," (Программы), ",[106,3059,3060],{},"nav-schedule"," (Расписание), ",[106,3063,3064],{},"nav-reference"," (Справочник). Текущий пункт (",[106,3067,2839],{},") помечается атрибутом ",[106,3070,3071],{},"aria-current=\"page\"",[203,3073,3074,3081],{},[2352,3075,3076,3077,2967,3079,274],{},"Основной контент — ",[106,3078,1290],{},[106,3080,2833],{},[200,3082,3083,3092,3098,3110,3134,3154,3176,3188],{},[203,3084,3085,3086,3033,3089,274],{},"Хлебные крошки «Главная \u002F Дашборд» — ",[106,3087,3088],{},"\u003Cnav aria-label=\"Хлебные крошки\">",[106,3090,3091],{},"\u003Col>",[203,3093,3094,3095,3097],{},"Заголовок первого уровня ",[106,3096,386],{}," с приветствием «Добро пожаловать, Иван».",[203,3099,3100,3101,3104,3105,462,3107,274],{},"Подзаголовок-строка: текущая дата в ",[106,3102,3103],{},"\u003Ctime datetime=\"…\">",", далее семестр в ",[106,3106,1217],{},[106,3108,3109],{},"\u003Csmall>",[203,3111,3112,1007,3115,3118,3119,3121,3122,3125,3126,3129,3130,3133],{},[2352,3113,3114],{},"Секция «KPI»",[106,3116,3117],{},"\u003Csection aria-label=\"Ключевые показатели\">"," без видимого заголовка) с четырьмя карточками-метриками: средний балл, активные курсы, сдано заданий, ближайший дедлайн. Каждая карточка — ",[106,3120,1295],{}," с заголовком (",[106,3123,3124],{},"\u003Ch3>","), иконкой и значением. Значение-число в ",[106,3127,3128],{},"\u003Cstrong>"," или отдельном ",[106,3131,3132],{},"\u003Cp class=\"metric\">"," — на усмотрение автора.",[203,3135,3136,3139,3140,2644,3142,3144,3145,3147,3148,3150,3151,274],{},[2352,3137,3138],{},"Секция «Расписание на сегодня»"," — ",[106,3141,1203],{},[106,3143,1321],{},". Список занятий — ",[106,3146,3091],{},". Каждая строка: время в ",[106,3149,3103],{},", название дисциплины, аудитория с преподавателем, тип занятия как ",[106,3152,3153],{},"\u003Cspan class=\"tag\">",[203,3155,3156,3139,3159,2644,3161,3163,3164,3167,3168,3171,3172,3175],{},[2352,3157,3158],{},"Секция «Прогресс по курсам»",[106,3160,1203],{},[106,3162,1321],{}," и списком. Каждый элемент: название дисциплины и индикатор ",[106,3165,3166],{},"\u003Cmeter min=\"0\" max=\"100\" value=\"65\">",". Почему ",[106,3169,3170],{},"\u003Cmeter>",", а не ",[106,3173,3174],{},"\u003Cprogress>"," — объясняется в контрольных вопросах.",[203,3177,3178,3139,3181,2644,3183,3185,3186,274],{},[2352,3179,3180],{},"Секция «Ближайшие дедлайны»",[106,3182,1203],{},[106,3184,1321],{}," и списком. Каждый элемент: название задания, дисциплина, срок в ",[106,3187,3103],{},[203,3189,3190,3139,3193,2644,3195,3197],{},[2352,3191,3192],{},"Секция «Уведомления»",[106,3194,1203],{},[106,3196,1321],{},", списком уведомлений и ссылкой\u002Fкнопкой «Все». Индикатор непрочитанности (точка слева у каждой строки) — декоративный.",[15,3199,3200,3201,3203],{},"В макете на дашборде ",[2352,3202,2850],{}," футера, модальных окон и горизонтального меню — соответствующих элементов в разметке быть не должно.",[15,3205,3206],{},"Требования к разметке:",[200,3208,3209,3221,3224,3233],{},[203,3210,3211,3212,3214,3215,3217,3218,3220],{},"один ",[106,3213,386],{}," на странице; секции — ",[106,3216,1321],{},"; карточки — ",[106,3219,3124],{},"; иерархия без «перескоков»;",[203,3222,3223],{},"списки везде, где это список: расписание, дисциплины, задания, уведомления;",[203,3225,3226,3228,3229,3232],{},[106,3227,3103],{}," с машиночитаемым ISO-значением для ",[2352,3230,3231],{},"всех"," дат и сроков;",[203,3234,3235,3236,3239,3240,274],{},"ссылки — ",[106,3237,3238],{},"\u003Ca href>",", действия — ",[106,3241,3010],{},[15,3243,3244],{},[2352,3245,3246],{},"Где активно использовать Emmet:",[200,3248,3249,3255,3258],{},[203,3250,3251,3252,504],{},"каркас секций (",[106,3253,3254],{},"section#schedule>h2+ol>li*4>time+span+small",[203,3256,3257],{},"повторяющиеся строки расписания и дедлайнов;",[203,3259,3260,3261,455],{},"повторяющиеся карточки KPI (",[106,3262,3263],{},"article.card-kpi*4>h3+p.metric",[15,3265,3266],{},"Старайтесь писать руками минимум — Emmet быстрее и меньше опечаток.",[2863,3268,2923],{"id":3269},"результат-1",[15,3271,3272,3273,3275,3276,3278],{},"Файл ",[106,3274,2874],{}," с разметкой дашборда, соответствующей описанию и макету. Во вкладке ",[32,3277,2720],{}," DevTools читается та же структура, что вы написали в редакторе (если есть расхождения — значит, браузер что-то «починил» за вас, разберитесь почему). Reader View браузера отображает документ как связный текст с осмысленной иерархией заголовков.",[24,3280,3282],{"id":3281},"часть-3-отладка-через-devtools-и-валидация","Часть 3. Отладка через DevTools и валидация",[2863,3284,2866],{"id":3285},"задание-2",[2402,3287,3288,3328,3340],{},[203,3289,3290,3291,3293,3294],{},"Откройте готовый ",[106,3292,2874],{}," в браузере и проведите аудит через DevTools:\n",[200,3295,3296,3306,3318],{},[203,3297,3298,3299,3301,3302,3305],{},"На вкладке ",[32,3300,2720],{}," разверните дерево полностью и сверьте с вашим исходником. Найдите, куда браузер вставил ",[106,3303,3304],{},"\u003Ctbody>"," \u002F заменил относительные URL \u002F скорректировал невалидную вложенность.",[203,3307,3308,3309,3311,3312,3314,3315,3317],{},"Кликните на ",[106,3310,1128],{}," и посмотрите справа в ",[32,3313,2726],{}," блок ",[106,3316,2737],{},". Запомните, какие отступы и шрифты браузер применяет по умолчанию — они объяснят, почему страница без CSS всё равно «как-то выглядит».",[203,3319,3298,3320,3322,3323,3325,3326,274],{},[32,3321,2755],{}," откройте ваш ",[106,3324,2928],{}," в исходном виде — сравните с тем, что показано в ",[32,3327,2720],{},[203,3329,3330,3331,3335,3336,3339],{},"Прогоните файл через ",[53,3332,3334],{"href":2779,"rel":3333},[282],"Nu Html Checker"," (загрузка файла или вставка текста). Добейтесь ",[2352,3337,3338],{},"0 ошибок",". Если остались предупреждения — решите по каждому: исправить или осознанно принять с пояснением в отчёте.",[203,3341,3342],{},"Проверьте базовую клавиатурную навигацию: Tab проходит по ссылкам, кнопкам и полям поиска в порядке, близком к визуальному. Это проверка самой разметки (правильные теги для правильных ролей), не отдельная «а11y-часть».",[2863,3344,2923],{"id":3345},"результат-2",[15,3347,3348,3349,3352],{},"В отчёте ",[106,3350,3351],{},"lab-01\u002Freport.md"," (раздел «Ход выполнения») — короткие (1–2 предложения на каждый пункт) ответы на:",[200,3354,3355,3361,3364,3372],{},[203,3356,3357,3358,3360],{},"Что нашли в ",[32,3359,2720],{},", чего нет в исходнике? Почему браузер это вставил\u002Fизменил?",[203,3362,3363],{},"Какие user-agent styles сильнее всего влияют на голую страницу? (2–3 примера.)",[203,3365,3366,3367,387,3369,3371],{},"В чём расхождения между ",[32,3368,2755],{},[32,3370,2720],{}," для вашего файла?",[203,3373,3374],{},"Какие предупреждения валидатора приняли осознанно и почему (если такие есть).",[15,3376,3377,3378,3381],{},"К отчёту приложите скриншот ",[106,3379,3380],{},"lab-01\u002Fscreenshots\u002Fvalidator.png"," с экраном валидатора (0 errors).",[19,3383,3385],{"id":3384},"форма-отчёта","Форма отчёта",[15,3387,3388],{},"Базовая структура отчёта — в общих правилах выполнения работ практикума, раздел «Состав отчёта». Специфика отчёта по этой работе:",[200,3390,3391,3400,3414,3427],{},[203,3392,3393,3394,3396,3397,1204],{},"решение в файле ",[106,3395,2874],{},"; CSS и JavaScript ",[2352,3398,3399],{},"не подключаются",[203,3401,3402,3403,3405,3406,3408,3409,387,3411,3413],{},"в ",[106,3404,3351],{}," в разделе «Ход выполнения» — ответы на четыре вопроса из Части 3 (что нашли в ",[32,3407,2720],{}," против исходника, какие user-agent-стили сильнее всего влияют, в чём расхождение ",[32,3410,2761],{},[32,3412,2720],{},", какие предупреждения валидатора приняли осознанно и почему);",[203,3415,3416,3417,3139,3420,3423,3424,1204],{},"в подпапке ",[106,3418,3419],{},"lab-01\u002Fscreenshots\u002F",[106,3421,3422],{},"validator.png"," с экраном Nu Html Checker (0 errors), вставленный в отчёт через ",[106,3425,3426],{},"![](screenshots\u002Fvalidator.png)",[203,3428,3429,3430,3433],{},"бриф, wireframes, Figma-макет и доменные данные в проект ",[2352,3431,3432],{},"не копируются"," — читаются из курсового репозитория и Figma по ссылкам из раздела «Перечень оснащения».",[19,3435,3437],{"id":3436},"контрольные-вопросы","Контрольные вопросы",[2402,3439,3440,3446,3454,3457,3470,3476,3484,3490,3500,3509],{},[203,3441,3442,3443,3445],{},"Что разворачивает Emmet-аббревиатура ",[106,3444,2635],{}," + Tab, и какие из этих строк нельзя опустить на продакшн-странице? Обоснуйте для каждой.",[203,3447,3448,3449,387,3451,3453],{},"В чём разница между ",[32,3450,2755],{},[32,3452,2720],{}," в DevTools? Приведите пример ситуации, когда их содержимое различается, и объясните, почему.",[203,3455,3456],{},"Что такое user-agent stylesheet? Назовите 2–3 свойства, которые браузер применяет к элементам по умолчанию, и скажите, где в DevTools это видно.",[203,3458,3459,3460,387,3462,3464,3465,3467,3468,274],{},"Чем принципиально различаются ",[106,3461,1203],{},[106,3463,1295],{},"? Приведите пример, когда карточка на дашборде должна быть ",[106,3466,1295],{},", и пример, когда — ",[106,3469,1203],{},[203,3471,3472,3473,3475],{},"В каких случаях на странице может быть несколько ",[106,3474,1287],{},"? Как их различать в инструментах и зачем это нужно?",[203,3477,3478,3479,387,3481,3483],{},"Чем отличаются ",[106,3480,3170],{},[106,3482,3174],{},", какой из них уместен для «прогресса по дисциплине», а какой — для «загрузки файла»? Почему?",[203,3485,3486,3487,3489],{},"Почему ",[106,3488,2897],{}," нужен уже на этом этапе, где CSS ещё нет? Что произойдёт с отображением страницы на мобильном без него?",[203,3491,3492,3493,3496,3497,3499],{},"Зачем атрибут ",[106,3494,3495],{},"datetime"," на элементе ",[106,3498,1815],{},", если пользователь всё равно видит только текст внутри тега? Кому и для чего он нужен?",[203,3501,3502,3503,387,3506,3508],{},"Какую роль играют атрибуты ",[106,3504,3505],{},"aria-label",[106,3507,3071],{}," в разметке этого дашборда? Приведите по одному примеру использования каждого.",[203,3510,3511],{},"Какую Emmet-аббревиатуру вы использовали для самого длинного фрагмента разметки в вашей работе? Запишите её и расшифровку.",{"title":145,"searchDepth":420,"depth":420,"links":3513},[3514,3515,3516,3520,3521,3526,3527],{"id":2502,"depth":420,"text":2503},{"id":2509,"depth":420,"text":2510},{"id":2536,"depth":420,"text":2537,"children":3517},[3518,3519],{"id":2543,"depth":664,"text":2544},{"id":2614,"depth":664,"text":2615},{"id":2793,"depth":420,"text":2794},{"id":2853,"depth":420,"text":2854,"children":3522},[3523,3524,3525],{"id":2860,"depth":664,"text":2861},{"id":2941,"depth":664,"text":2942},{"id":3281,"depth":664,"text":3282},{"id":3384,"depth":420,"text":3385},{"id":3436,"depth":420,"text":3437},"Объём: 2 академических часа","Окружение практического занятия","\u002Ffiles\u002Faidt-mag-frontend\u002Ftopic-01\u002Fpz-env.zip",{},"\u002Fcourses\u002Faidt-mag-frontend\u002Ftopic-01-pz","pz",{"title":2482,"description":3528},"courses\u002Faidt-mag-frontend\u002Ftopic-01-pz","9NL476mdxuQEAZD480bvfeoar08ZSQMcmeGbMWyU77c",{"id":3538,"title":3539,"body":3540,"course_slug":2468,"description":145,"env_label":2469,"env_url":2469,"extension":2470,"group":2469,"is_course_project":2471,"is_index":2471,"level":2469,"meta":3897,"navigation":2473,"path":3898,"section":3899,"seo":3900,"stem":3901,"topic_number":402,"topic_slug":2478,"__hash__":3902},"courses\u002Fcourses\u002Faidt-mag-frontend\u002Ftopic-01-additional.md","Дополнительные материалы",{"type":8,"value":3541,"toc":3888},[3542,3545,3547,3632,3634,3660,3662,3695,3697,3737,3739,3815,3817,3843,3847],[11,3543,3539],{"id":3544},"дополнительные-материалы",[19,3546,22],{"id":21},[200,3548,3549,3557,3577,3585,3593,3609,3617,3625],{},[203,3550,3551,3556],{},[53,3552,3555],{"href":3553,"rel":3554},"https:\u002F\u002Fdoka.guide\u002Ftools\u002Furl\u002F",[282],"Doka: URL"," — подробный русскоязычный разбор структуры URL: схема, authority, путь, query-параметры, фрагмент, абсолютные и относительные формы, практические замечания о кодировании. Удобное расширение соответствующего подраздела основного текста.",[203,3558,3559,3564,3565,175,3568,175,3570,175,3573,3576],{},[53,3560,3563],{"href":3561,"rel":3562},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fru\u002Fdocs\u002FLearn_web_development\u002FHowto\u002FWeb_mechanics\u002FWhat_is_a_URL",[282],"MDN: Что такое URL?"," — учебная статья MDN с пошаговым разбором частей URL на русском языке, с примерами использования разных схем (",[106,3566,3567],{},"http",[106,3569,151],{},[106,3571,3572],{},"mailto",[106,3574,3575],{},"ftp",") и ролью порта.",[203,3578,3579,3584],{},[53,3580,3583],{"href":3581,"rel":3582},"https:\u002F\u002Furl.spec.whatwg.org\u002F",[282],"URL Living Standard (WHATWG)"," — первоисточник современной спецификации URL: формальное определение компонентов, алгоритм парсинга, правила нормализации, percent-encoding. Нужен, когда требуется разрешить пограничный случай, в котором справочники MDN\u002FDoka оставляют недосказанность.",[203,3586,3587,3592],{},[53,3588,3591],{"href":3589,"rel":3590},"https:\u002F\u002Fhabr.com\u002Fru\u002Farticles\u002F232385\u002F",[282],"URI — сложно о простом (Хабр)"," — разбор соотношения URI, URL и URN с опорой на RFC 3986: откуда взялись эти термины, чем различаются, как соотносятся их грамматики. Помогает снять типичную путаницу между понятиями.",[203,3594,3595,3600,3601,3604,3605,3608],{},[53,3596,3599],{"href":3597,"rel":3598},"https:\u002F\u002Fhabr.com\u002Fru\u002Farticles\u002F510742\u002F",[282],"Как разобрать URL в JavaScript? (Хабр)"," — практический обзор конструктора ",[106,3602,3603],{},"URL()"," и API ",[106,3606,3607],{},"URLSearchParams",": парсинг, валидация, работа с query-параметрами. Полезно для перехода от теоретической структуры URL к её использованию в клиентском коде.",[203,3610,3611,3616],{},[53,3612,3615],{"href":3613,"rel":3614},"https:\u002F\u002Fwhatwg.org\u002F",[282],"WHATWG"," — сайт консорциума, разрабатывающего HTML Living Standard. Здесь же — DOM, Fetch, URL и другие базовые спецификации, на которые ссылается вся остальная платформа.",[203,3618,3619,3624],{},[53,3620,3623],{"href":3621,"rel":3622},"https:\u002F\u002Fwww.w3.org\u002F",[282],"W3C"," — сайт W3C со списком рабочих групп и актуальных спецификаций (CSS, WCAG, ARIA, SVG). Полезен как точка входа, когда нужно уточнить статус конкретного стандарта.",[203,3626,3627,3631],{},[53,3628,3630],{"href":280,"rel":3629},[282],"Browser market share (StatCounter)"," — актуальная статистика распространённости браузеров по странам и типам устройств. Имеет смысл сверяться при принятии решений о кросс-браузерной поддержке.",[19,3633,369],{"id":368},[200,3635,3636,3644,3652],{},[203,3637,3638,3643],{},[53,3639,3642],{"href":3640,"rel":3641},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002F",[282],"HTML Living Standard (WHATWG)"," — первоисточник по HTML: полная спецификация всех элементов, атрибутов, алгоритмов парсинга. Написана языком стандарта, но остаётся единственной авторитетной точкой для спорных вопросов.",[203,3645,3646,3651],{},[53,3647,3650],{"href":3648,"rel":3649},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fru\u002Fdocs\u002FWeb\u002FHTML",[282],"MDN: HTML"," — русскоязычная справочная документация по HTML-элементам и атрибутам с примерами и заметками о поддержке браузерами. Основной ежедневный справочник фронтенд-разработчика.",[203,3653,3654,3659],{},[53,3655,3658],{"href":3656,"rel":3657},"https:\u002F\u002Fdoka.guide\u002Fhtml\u002F",[282],"Doka: HTML"," — русскоязычный путеводитель по HTML от сообщества: короткие статьи по каждому тегу и атрибуту в объяснительном стиле, с практическими примерами и типичными ошибками.",[19,3661,838],{"id":837},[200,3663,3664,3672,3680],{},[203,3665,3666,3671],{},[53,3667,3670],{"href":3668,"rel":3669},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fru\u002Fdocs\u002FWeb\u002FHTML\u002FAttributes",[282],"MDN: атрибуты HTML"," — полный перечень глобальных и специфичных для элементов атрибутов с описанием поведения и ограничений. Удобно, когда нужно уточнить список допустимых значений или поддержку конкретного атрибута.",[203,3673,3674,3679],{},[53,3675,3678],{"href":3676,"rel":3677},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FQuirks_Mode_and_Standards_Mode",[282],"Quirks Mode and Standards Mode (MDN)"," — объяснение, чем режим совместимости отличается от стандартного режима, какие DOCTYPE во что переключают и какие именно поведения ломаются в quirks mode.",[203,3681,3682,3687,3688,175,3690,175,3692,3694],{},[53,3683,3686],{"href":3684,"rel":3685},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fnamed-characters.html",[282],"HTML Living Standard: именованные символьные мнемоники"," — справочная таблица всех именованных HTML-сущностей (",[106,3689,1244],{},[106,3691,1248],{},[106,3693,1252],{}," и т. д.) с кодами символов. Используется как шпаргалка при типографической доводке текста.",[19,3696,1264],{"id":1263},[200,3698,3699,3716,3724],{},[203,3700,3701,3706,3707,175,3709,175,3711,175,3713,3715],{},[53,3702,3705],{"href":3703,"rel":3704},"https:\u002F\u002Fhtml.spec.whatwg.org\u002Fmultipage\u002Fsections.html",[282],"HTML Living Standard: Sections"," — раздел спецификации о секционирующих элементах: формальные определения ",[106,3708,1295],{},[106,3710,1203],{},[106,3712,1287],{},[106,3714,1298],{},", алгоритм построения outline документа. Снимает типовые споры о том, какой тег уместен в конкретном месте.",[203,3717,3718,3723],{},[53,3719,3722],{"href":3720,"rel":3721},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fru\u002Fdocs\u002FWeb\u002FHTML\u002FElement",[282],"MDN: справочник HTML-элементов"," — алфавитный перечень всех HTML-элементов со ссылками на подробные страницы. Удобная точка входа, когда известно только приблизительное назначение тега.",[203,3725,3726,3731,3732,387,3734,3736],{},[53,3727,3730],{"href":3728,"rel":3729},"https:\u002F\u002Fwww.smashingmagazine.com\u002F2022\u002F07\u002Farticle-section-elements-accessibility\u002F",[282],"\u003Carticle> vs. \u003Csection>: How To Choose The Right One (Smashing Magazine)"," — прикладной разбор различий между ",[106,3733,1295],{},[106,3735,1203],{},": когда уместен каждый тег, как они влияют на дерево доступности и какие ошибки типичны при их сочетании. Помогает снять основную неопределённость при выборе секционирующего элемента.",[19,3738,2220],{"id":2219},[200,3740,3741,3753,3773,3781,3789,3797],{},[203,3742,3743,3748,3749,3752],{},[53,3744,3747],{"href":3745,"rel":3746},"https:\u002F\u002Fogp.me\u002F",[282],"Open Graph protocol"," — официальная спецификация протокола Open Graph: перечень свойств ",[106,3750,3751],{},"og:*",", типы объектов, требования к изображениям. Основной источник при настройке превью страницы для соцсетей и мессенджеров.",[203,3754,3755,3760,3761,175,3764,175,3767,175,3770,274],{},[53,3756,3759],{"href":3757,"rel":3758},"https:\u002F\u002Fschema.org\u002F",[282],"schema.org"," — общий словарь типов и свойств, используемый всеми тремя синтаксисами структурированной разметки (Microdata, RDFa, JSON-LD). Справочник, к которому обращаются при описании сущностей вроде ",[106,3762,3763],{},"Product",[106,3765,3766],{},"Article",[106,3768,3769],{},"Event",[106,3771,3772],{},"Organization",[203,3774,3775,3780],{},[53,3776,3779],{"href":3777,"rel":3778},"https:\u002F\u002Fdevelopers.google.com\u002Fsearch\u002Fdocs\u002Fappearance\u002Fstructured-data\u002Fintro-structured-data?hl=ru",[282],"Google Search Central: Введение в структурированные данные"," — русскоязычное руководство Google о назначении структурированной разметки, поддерживаемых форматах (с приоритетом JSON-LD) и связанных возможностях поисковой выдачи (rich results). Прагматичная точка входа в тему.",[203,3782,3783,3788],{},[53,3784,3787],{"href":3785,"rel":3786},"https:\u002F\u002Fhabr.com\u002Fru\u002Fcompany\u002Fyandex\u002Fblog\u002F221881\u002F",[282],"Сложный и противоречивый мир синтаксиса микроразметки. Опыт Яндекса (Хабр)"," — разбор истории появления Microdata, RDFa, JSON-LD и microformats, их сильных и слабых сторон с точки зрения поискового движка. Полезен, чтобы понять, почему существует несколько параллельных стандартов.",[203,3790,3791,3796],{},[53,3792,3795],{"href":3793,"rel":3794},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fjson-ld11\u002F",[282],"JSON-LD 1.1 (W3C Recommendation)"," — формальная спецификация JSON-LD: модель данных, контексты, алгоритмы расширения и сжатия. Первоисточник, когда нужно разобраться в тонкостях формата за пределами типовых примеров.",[203,3798,3799,3804,3805,175,3808,175,3811,3814],{},[53,3800,3803],{"href":3801,"rel":3802},"https:\u002F\u002Fwww.w3.org\u002FTR\u002Fmicrodata\u002F",[282],"HTML Microdata (W3C)"," — спецификация синтаксиса Microdata: атрибуты ",[106,3806,3807],{},"itemscope",[106,3809,3810],{},"itemtype",[106,3812,3813],{},"itemprop",", правила вложенности. Ссылка нужна, если приходится поддерживать или мигрировать существующую разметку на Microdata.",[19,3816,2304],{"id":2303},[200,3818,3819,3827,3835],{},[203,3820,3821,3826],{},[53,3822,3825],{"href":3823,"rel":3824},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002F",[282],"Web Accessibility Initiative (W3C WAI)"," — портал W3C по доступности: стандарты (WCAG, ARIA), руководства для авторов и разработчиков, образовательные материалы. Отправная точка для погружения в тему a11y.",[203,3828,3829,3834],{},[53,3830,3833],{"href":3831,"rel":3832},"https:\u002F\u002Fwww.w3.org\u002FWAI\u002FWCAG21\u002Fquickref\u002F",[282],"WCAG 2.1 Quick Reference"," — интерактивный чеклист критериев WCAG 2.1 с фильтрами по уровню соответствия (A \u002F AA \u002F AAA) и техникам реализации. Рабочий инструмент для самопроверки страницы.",[203,3836,3837,3842],{},[53,3838,3841],{"href":3839,"rel":3840},"https:\u002F\u002Fdoka.guide\u002Fa11y\u002F",[282],"Doka: доступность"," — русскоязычная подборка статей по a11y: практические приёмы, типовые ошибки, разбор ARIA-паттернов. Хороший мост между общими принципами WCAG и конкретной вёрсткой.",[19,3844,3846],{"id":3845},"браузерные-devtools","Браузерные DevTools",[200,3848,3849,3856,3864,3872,3880],{},[203,3850,3851,3855],{},[53,3852,3854],{"href":2768,"rel":3853},[282],"Chrome DevTools (официальная документация)"," — исчерпывающий справочник по панелям DevTools: Elements, Console, Sources, Network, Performance, Memory, Application, Lighthouse. Основной источник, когда нужно разобраться в конкретной функции или горячей клавише.",[203,3857,3858,3863],{},[53,3859,3862],{"href":3860,"rel":3861},"https:\u002F\u002Ffirefox-source-docs.mozilla.org\u002Fdevtools-user\u002F",[282],"Firefox DevTools User Docs"," — аналогичная документация по инструментам разработчика Firefox. Полезна для сравнения: часть фич (инспектор grid, editor для CSS shapes) исторически появлялись в Firefox раньше, чем в Chrome.",[203,3865,3866,3871],{},[53,3867,3870],{"href":3868,"rel":3869},"https:\u002F\u002Flearn.javascript.ru\u002Fdevtools",[282],"Консоль разработчика (learn.javascript.ru)"," — русскоязычное введение в DevTools от Ильи Кантора: как открыть, как смотреть ошибки, основы работы с консолью. Подходит для первого знакомства.",[203,3873,3874,3879],{},[53,3875,3878],{"href":3876,"rel":3877},"https:\u002F\u002Fhtmlacademy.ru\u002Fblog\u002Fsoft\u002Fhow-to-devtools",[282],"Обзор Chrome DevTools. Решаем основные задачи разработчика (HTML Academy)"," — русскоязычный практический тур по DevTools с типовыми сценариями: правка CSS «на лету», отладка JS, анализ запросов, аудит Lighthouse. Хорошо дополняет официальную документацию конкретными задачами.",[203,3881,3882,3887],{},[53,3883,3886],{"href":3884,"rel":3885},"https:\u002F\u002Fhabr.com\u002Fru\u002Fcompanies\u002Fruvds\u002Farticles\u002F512862\u002F",[282],"Профессиональное применение инструментов разработчика Chrome: 13 советов (Хабр)"," — подборка менее очевидных возможностей DevTools: снимки покрытия кода, условные брейкпоинты, копирование объектов, эмуляция сетевых условий. Помогает вывести использование DevTools за пределы базовой правки CSS.",{"title":145,"searchDepth":420,"depth":420,"links":3889},[3890,3891,3892,3893,3894,3895,3896],{"id":21,"depth":420,"text":22},{"id":368,"depth":420,"text":369},{"id":837,"depth":420,"text":838},{"id":1263,"depth":420,"text":1264},{"id":2219,"depth":420,"text":2220},{"id":2303,"depth":420,"text":2304},{"id":3845,"depth":420,"text":3846},{},"\u002Fcourses\u002Faidt-mag-frontend\u002Ftopic-01-additional","additional",{"title":3539,"description":145},"courses\u002Faidt-mag-frontend\u002Ftopic-01-additional","mvMYWxlYelOqCiMGYz0LuNyAtWPjpC2xLK2ZZuIgU_g",{"id":3904,"title":3905,"body":3906,"course_slug":2468,"description":3957,"env_label":2469,"env_url":2469,"extension":2470,"group":3958,"is_course_project":2471,"is_index":2473,"level":3959,"meta":3960,"navigation":2473,"path":3979,"section":2469,"seo":3980,"stem":3981,"topic_number":2469,"topic_slug":2469,"__hash__":3982},"courses\u002Fcourses\u002Faidt-mag-frontend\u002Findex.md","Разработка пользовательских веб-интерфейсов",{"type":8,"value":3907,"toc":3955},[3908,3915,3922,3929,3932,3948],[15,3909,3910,3911,274],{},"Требования к содержанию и оформлению материалов — в ",[53,3912,3914],{"href":3913},".\u002Fshared\u002FSTYLEGUIDE","shared\u002FSTYLEGUIDE.md",[15,3916,3917,3918,274],{},"Содержание курса — в ",[53,3919,3921],{"href":3920},".\u002Ftopics","topics.md",[15,3923,3924,3925,274],{},"Порядок сдачи практических занятий и работа с git — в ",[53,3926,3928],{"href":3927},".\u002Fshared\u002Fsubmission","shared\u002Fsubmission.md",[15,3930,3931],{},"Издательские метаданные:",[200,3933,3934,3941],{},[203,3935,3936,3937,1204],{},"учебного пособия (по теории) — в ",[53,3938,3940],{"href":3939},".\u002Fpublishing\u002Ftextbook.yaml","publishing\u002Ftextbook.yaml",[203,3942,3943,3944,274],{},"практикума (по заданиям) — в ",[53,3945,3947],{"href":3946},".\u002Fpublishing\u002Fpracticum.yaml","publishing\u002Fpracticum.yaml",[15,3949,3950,3951,274],{},"Общие части практикума (пояснительная записка и правила выполнения работ) — в ",[53,3952,3954],{"href":3953},".\u002Fpracticum\u002F","practicum\u002F",{"title":145,"searchDepth":420,"depth":420,"links":3956},[],"Требования к содержанию и оформлению материалов — в shared\u002FSTYLEGUIDE.md.","magistracy","магистратура",{"topics_count":967,"has_lr":2471,"has_pz":2473,"has_course_project":2471,"final_assessment":3961,"tech_focus":3962,"kind":3963,"authors":3964,"publication":3971},"дифф. зачёт","TypeScript + Vite, без фреймворков","Учебное пособие",[3965],{"last_name":3966,"first_name":3967,"patronymic":3968,"role":3969,"affiliation":3970,"email":2469},"Рындин","Никита","Александрович","автор","ВГТУ",{"city":3972,"year":3973,"founder":3974,"publisher":3975,"udk":145,"bbk":145,"shelf_mark":145,"isbn":145,"approval_body":3978},"Воронеж",2026,"Министерство науки и высшего образования Российской Федерации",{"short":3970,"full":3976,"address":3977},"Федеральное государственное бюджетное образовательное учреждение высшего образования «Воронежский государственный технический университет»\n","394026, Воронеж, Московский проспект, 14","Издается по решению редакционно-издательского совета\nВоронежского государственного технического университета\n","\u002Fcourses\u002Faidt-mag-frontend",{"title":3905,"description":3957},"courses\u002Faidt-mag-frontend\u002Findex","iMYEd7hNEHxF61y1SzYGvxfRDscqJIg-IxlFsYdmxUw",1779455410937]