Итоговый тест по учебнику HTML

Внешний вид страницы задаёт CSS. У браузера есть стили по умолчанию, но HTML отвечает за смысл, а не за оформление.

HTML размечает документ: показывает, где заголовок, абзац, список или ссылка.

HTML — язык разметки, а не программирования: в нём нет переменных, условий и вычислений. Поведение страницы программируют на JavaScript.

HTML5 вышел в 2014 году, после него W3C выпустила HTML 5.1 и 5.2. Но с 2019 года действует единый стандарт без номера версии.

XHTML — строгий вариант HTML на основе XML из 2000-х годов. Сегодня он практически не используется.

WHATWG развивает живой стандарт с 2011 года, а в 2019 году W3C и WHATWG договорились, что он станет единым стандартом HTML.

Современная декларация не указывает номер версии: HTML развивается как единый живой стандарт.

Декларация — не тег и не элемент, а инструкция для браузера. Корневой элемент — <html>.

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

В <head> находятся сведения о документе, которые на странице не показываются, например <title>.

<title> задаёт название документа: его видно на вкладке браузера, а не на самой странице.

Всё, что пользователь видит на странице — заголовки, абзацы, изображения, — размещается внутри <body>.

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

Такая запись допустима, но означает другое: два абзаца, второй пустой. Для одного абзаца с явным закрывающим тегом нужен </p>.

Закрывающий тег пишется со слешем. Без него второй тег начинает новый абзац: браузер сам закроет первый и создаст второй, пустой.

Одиночный тег, например <br> или <img>, добавляет отдельный объект или действие и не закрывается.

Слеш требовал XHTML. В HTML он не нужен, хотя и не считается ошибкой.

Теги не чувствительны к регистру. В учебнике все теги пишутся в нижнем регистре.

Главный заголовок на странице задаёт <h1> внутри <body>. <title> находится в <head> и на странице не виден.

Изменение заметно, но не на самой странице, а на вкладке браузера и в закладках.

<title> задаёт название документа: его видно на вкладке, в закладках и в результатах поиска.

html — название тега.

Значение атрибута — ru, русский язык. Кавычки только ограничивают его в коде.

lang — имя атрибута: оно указывает, какое сведение мы задаём.

.doc — документ текстового редактора вроде Word. HTML-код пишут в обычных текстовых файлах с расширением .html.

По расширению .html система и редактор понимают, что это HTML-документ. Короткое .htm тоже допустимо.

.txt — расширение обычного текстового файла: браузер покажет код как текст, а не как страницу.

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

Стандарт HTML не задаёт имена файлов. Это соглашение веб-серверов.

Файл с любым именем откроется в браузере. Имя важно только для веб-сервера.

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

Создавать файл заново не нужно: достаточно сохранить его и обновить страницу.

Все современные браузеры поддерживают HTML. Скорее всего, правка просто не сохранена.

С неверным расширением файл не откроется как страница. Непонятные символы — признак неверной кодировки.

Такие символы появляются, когда браузер читает файл не в той кодировке. Укажите UTF-8 в коде и сохраните файл в UTF-8.

<title> задаёт только название на вкладке и на кодировку не влияет.

Комментарий — допустимая часть HTML-кода, ошибки он не вызывает.

Это комментарий: всё между <!-- и --> браузер не показывает.

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

«Просмотр кода страницы» показывает HTML в том виде, в каком его получил браузер, а инструменты разработчика — код выбранного элемента.

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

HTML-код любой страницы доступен в браузере через «Просмотр кода страницы» или инструменты разработчика.

<h1> называет всю страницу. Подраздел, размеченный главным заголовком, ломает структуру документа.

Подраздел раздела второго уровня получает следующий уровень — <h3>, без пропусков.

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

Один <h1> называет всю страницу, и структура остаётся понятной читателям, поисковым системам и программам экранного доступа.

Разделы страницы начинают с <h2>, а <h1> оставляют для названия страницы.

Браузер покажет все заголовки. Ограничение «один <h1>» — рекомендация, а не правило языка.

Адрес — одна смысловая единица. Разбивка на абзацы добавит между строками пустое пространство и разорвёт её.

Переносы строк в коде браузер показывает как пробелы: адрес окажется в одной строке.

Переносы строк — часть содержания адреса, как в стихах. Для этого и нужен <br>.

Тег, открытый последним, закрывается первым: <b> должен целиком находиться внутри абзаца.

Абзац может содержать элементы внутри строки, в том числе <b>. Ошибка в порядке закрывающих тегов.

Теги закрыты в неверном порядке: элемент <b> выходит за границы своего родителя.

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

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

Браузер не сообщает об ошибках в HTML, а достраивает документ. Найти их помогает валидатор.

Кавычки в тексте не отменяют разметку: <p> всё равно останется тегом.

Мнемоники < и > браузер показывает как знаки «<» и «>», а не как начало тега.

Браузер прочитает <p> как тег и начнёт новый абзац, а надпись «<p>» на странице не появится.

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

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

Слово «картинка» ничего не сообщает, а программа экранного доступа всё равно его зачитает.

Атрибуты меняют только размер на странице. Файл загружается целиком, каким бы маленьким его ни показали.

Атрибуты размеров не нужны для загрузки файла: браузер загрузит изображение по указанному адресу и узнает его размеры из самого файла.

Зная размеры, браузер оставляет под изображение место ещё до загрузки файла, и текст не сдвигается.

Атрибуты всегда записывают в открывающем теге: <p title="…">текст</p>.

Атрибуты описывают элемент с самого начала, поэтому их место — только открывающий тег.

Закрывающий тег не содержит атрибутов: браузер их там не прочитает.

Вторая двойная кавычка завершает значение, поэтому слово «Чижик» в подсказку не попадёт.

Значение закончилось на второй кавычке. Исправить можно одинарными кавычками вокруг значения, мнемоникой " или ёлочками «».

Браузер не сообщает об ошибках в разметке: он молча разбирает код по своим правилам.

Так работать будет, но это лишнее: язык достаточно один раз указать у <html>.

Внешне — нет, но от языка зависят произношение в программах экранного доступа, переносы, проверка орфографии и перевод.

Элементы наследуют язык страницы, поэтому lang указывают отдельно только у текста на другом языке.

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

Такого атрибута в HTML нет. Собственные сведения записывают в атрибуты с приставкой data-.

Значение id должно встречаться в документе только один раз. Повторяющиеся идентификаторы нарушают правила HTML и могут привести к ошибкам в ссылках и скриптах.

disabled — логический атрибут: пока он есть в теге, кнопка отключена при любом значении.

Отключённая кнопка видна, но нажать её нельзя. Скрывает элемент атрибут hidden.

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

Атрибуты data-* прикрепляют к элементу данные, к которым потом обращаются CSS и JavaScript.

Браузер не показывает data-*-атрибуты. Важные для посетителя сведения пишут в тексте страницы.

Уникальный идентификатор задаёт атрибут id.

target указывает, где открыть ссылку, но не её адрес.

Атрибут href содержит адрес ссылки. Без него элемент <a> остаётся обычным текстом.

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

../ поднимает из pages в my-site, затем путь спускается в assets.

Это путь от корня сайта, а не относительно текущего документа. При открытии страницы с диска он отсчитывается от корня диска, а не папки my-site.

Путь отсчитывается от папки pages, а в ней нет папки assets. Сначала нужно подняться на уровень выше.

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

Слеш в начале меняет точку отсчёта: путь начинается от корня сайта, а не от текущей папки.

Абсолютный адрес содержит протокол и имя сайта, например https://example.com/.

«Фото» не описывает ни изображение, ни цель ссылки.

С пустым alt у ссылки не останется названия: программа экранного доступа не сообщит, куда она ведёт.

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

В списке ссылок страницы «здесь» ничего не сообщает о том, куда ведёт ссылка.

Текст понятен и без окружающего абзаца: видно, что за страница откроется.

Если таких ссылок несколько, они неотличимы друг от друга.

Ссылка продолжит работать как обычный переход по адресу.

Для файлов с другого сайта download не работает, и браузер просто переходит по ссылке.

Атрибут download действует только для файлов с того же сайта, что и страница.

Адрес после mailto: — адрес электронной почты, а не сайта.

mailto: — схема адреса. Она работает, если на устройстве настроена почтовая программа или сервис.

Ссылка только создаёт черновик в почтовой программе посетителя. Отправляет его сам посетитель.

Список описаний — для пар «термин — описание», а не для последовательности шагов.

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

Маркированный список подходит для перечислений, где порядок не важен. Для шагов нужен <ol>.

Атрибут type="A" включает буквенную нумерацию, поэтому вместо цифры будет буква.

Без start список начался бы с A, но значение 3 сдвигает начало на третью букву.

При буквенной нумерации start задаёт порядковый номер буквы: третья буква — C.

Так получится отдельный список, не связанный с пунктом.

Вложенный список — часть пункта, поэтому он находится внутри <li>, перед его закрывающим тегом.

Прямыми дочерними элементами <ul> могут быть только <li>.

Закрашенный круг — маркер первого уровня.

Браузер меняет маркеры по уровням: закрашенный круг, пустой круг, затем квадрат.

Квадрат получают пункты третьего и следующих уровней.

Заголовки обозначают разделы страницы, а не пары «имя — значение».

Пары «имя — значение» размечают списком описаний: <dt> — имя, <dd> — значение.

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

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

Свойство убирает маркеры, но не заменяет HTML-элементы списка абзацами. Однако в Safari список без маркеров вне <nav> может потерять роль списка для программы экранного доступа; её можно явно задать атрибутом role="list".

list-style-type управляет только видом маркера.

Абзац «Пока» находится внутри комментария, поэтому на странице его нет.

Браузер вообще не отображает комментарии на странице.

Всё между <!-- и -->, включая теги, браузер пропускает.

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

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

Решётка перед идентификатором указывает на элемент текущей страницы.

Без решётки браузер будет искать файл с именем commands, а не элемент на странице.

Идентификаторы чувствительны к регистру: Commands и commands — разные значения.

Сначала путь к странице (на уровень выше), затем фрагмент с идентификатором.

Так ссылка будет искать элемент на текущей странице игрушек.

Из папки pages главная страница находится на уровень выше, поэтому нужен ../.

Решётка ставится только в ссылке. Значение id должно быть walk.

Без решётки ссылка поведёт на файл walk. Ошибка в значении id.

Идентификатор можно задать любому элементу, в том числе заголовку.

Сами по себе оба контейнера не меняют вида текста: оформление задаётся стилями.

<div> начинается с новой строки и занимает всю ширину, а <span> выделяет слова внутри строки.

Ни <div>, ни <span> ничего не сообщают о содержимом. Навигацию обозначает <nav>.

<aside> обозначает отступление — сведения «на полях», а не навигацию по сайту.

Меню повторяется на всех страницах, а в <main> размещают уникальное содержимое страницы.

Элемент <nav> обозначает основные навигационные блоки, к которым можно быстро перейти.

У смысловых элементов есть правила вложенности: например, <main> не вкладывают в <nav>, <header> и <footer>.

<main> не может находиться внутри <nav>. Закройте </nav> сразу после списка, чтобы элементы стали соседними.

Список ссылок внутри <nav> — обычный способ разметки меню.

<main> обозначает основное содержимое страницы, и видимым он может быть только один.

Шапок и подвалов может быть несколько, а видимый <main> — только один.

<main> не размещают внутри <section> и <article>.

На скорость загрузки выбор между <div> и смысловым элементом не влияет.

Страница из одних <div> отображается, но в ней нет ориентиров.

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

<address> содержит контактную информацию автора или владельца документа либо статьи.

Для ссылок служит элемент <a>; <address> описывает контакты автора.

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

Отображаются они одинаково, но <section> сообщает о разделе документа, а <div> — нет.

Если у фрагмента нет и не может быть осмысленного заголовка, это, скорее всего, не раздел.

<section> не заменяет универсальный контейнер. Для оформления подходит <div>.

Заметка с заголовком и законченным рассказом сохраняет смысл вне главной страницы. Это подходящий случай для article.

Рамка и фон относятся к оформлению. Div подходит нейтральной обёртке; назначение самостоятельной заметки лучше передаёт article.

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

Первым — подпись над содержимым, последним — под ним.

<img> — пустой элемент: внутри него ничего нет.

Подпись связана с иллюстрацией, только если находится внутри её <figure>.

Без атрибута open блок закрыт: видно только содержимое <summary>.

Так было бы с атрибутом open: <details open>.

<details> раскрывается без скриптов, в том числе с клавиатуры.

В обычном тексте браузер схлопывает несколько пробелов в один. Сохранить их можно внутри <pre>.

Так было бы внутри <pre>. В абзаце пробелы схлопываются.

Пробелы не исчезают полностью: от нескольких пробелов остаётся один.

<mark> подсвечивает текст, важный в текущей ситуации, например найденное слово.

Перенос <em> на другое слово меняет смысл фразы.

<i> выделяет текст другого характера — термин, иностранную фразу, — но не ударение.

<strong> обозначает важный текст, который нельзя пропустить.

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

<small> — для побочных комментариев и мелкого шрифта, а не для предупреждений.

<sub> — нижний индекс, например в химической формуле.

<u> подчёркивает текст, например слово с ошибкой, и не означает неактуальность.

<s> обозначает неактуальные сведения. Это не правка документа, а информация для покупателя.

У <del> есть атрибуты datetime и cite для времени и причины правки.

Текст в <del> остаётся на странице, браузер обычно показывает его перечёркнутым.

Вид одинаковый, но смысл разный: удаление при правке и неактуальные сведения.

Мнемоники < и > выводят угловые скобки как текст.

Браузер примет <br> за тег и перенесёт строку, а название тега не покажет.

Кавычки не мешают браузеру распознать тег: он всё равно перенесёт строку.

Это удобный для людей вид. В datetime дату пишут как год-месяц-день: 2026-11-01.

Время без даты не может содержать часовой пояс. Добавьте дату: 2026-11-01T08:00+03:00.

Дата, разделитель T, время и смещение часового пояса — допустимая запись.

<time> только размечает дату. Поля для выбора даты относятся к формам.

Значение атрибута на странице не выводится — виден текст внутри элемента.

Значение datetime предназначено для программ, а сам элемент по умолчанию не оформлен.

Работает: браузер показывает расшифровку при наведении указателя мыши.

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

Подсказка title появляется при наведении мыши, поэтому текст должен быть понятен и без неё.

Браузер сам добавляет кавычки вокруг <q>, а их вид зависит от языка страницы.

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

Двойные кавычки появились бы, если бы кавычки были написаны и в коде. Здесь их в коде нет.

Если источник важен читателю, укажите его ещё и в видимом тексте или ссылкой.

Браузеры не превращают атрибут cite в ссылку.

Значение атрибута не выводится. Автора пишут видимым текстом, например в <figcaption>.

Внутри <blockquote> находится только цитируемый текст, а имя автора — не его часть.

Цитата — содержимое иллюстрации, автор — её подпись. Так подпись связана с цитатой, но не входит в неё.

<cite> выделяет название произведения, а не имя человека.

Имя автора — не название произведения, поэтому в <cite> его не помещают.

Это цитата, а не название. Для неё подходят <q> или <blockquote>.

<cite> выделяет название произведения.

<span> не изолирует направление текста — проблема останется, как в первом списке примера.

<bdo> принудительно задаёт направление: арабское имя с ltr выведется задом наперёд.

<bdi> изолирует фрагмент: браузер определяет его направление отдельно от окружающего текста.

Подсказку произношения содержит элемент <rt>.

Направление задаёт атрибут dir, а <rp> содержит запасные скобки.

Браузер с поддержкой <ruby> скрывает содержимое <rp>, остальные показывают скобки вокруг подсказки.

Элементы перепутаны: клавишу нажимает пользователь, а «Готово» выводит программа.

<kbd> — то, что вводит пользователь, <samp> — то, что выводит программа.

<var> обозначает переменную, например x в формуле.

<pre> сохраняет переносы и отступы, а мнемоники не дают браузеру выполнить теги.

<pre> не мешает браузеру распознать теги: их нужно записать мнемониками.

В <code> переносы схлопываются, а теги браузер выполнит, а не покажет.

Duplicate — «повторяющийся»: идентификатор встретился больше одного раза.

id должен быть уникальным, иначе ссылка #toy может привести не к тому элементу.

Значение toy допустимо, ошибка в повторе.

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

Одна ошибка часто вызывает несколько сообщений, и после её исправления часть из них исчезает.

Предупреждения стоит разобрать, но сначала исправляют ошибки Error.

Элемента с таким названием нет в стандарте, и валидатор сообщит об ошибке.

Отсутствие обязательного атрибута alt валидатор находит.

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

Валидатор прав: ошибка есть в коде, просто браузер её скрыл.

Браузер молча отбросил лишний тег. Исправлять его нужно в исходном коде.

Панель «Elements» показывает всё дерево документа, но уже исправленное браузером.

Каждое объявление — свойство, двоеточие и значение, а объявления разделены точкой с запятой.

Свойство и значение разделяет двоеточие, а не знак равенства, а объявления — точка с запятой, а не запятая.

CSS-свойства не являются HTML-атрибутами: их записывают внутри значения атрибута style.

Браузер не сообщает об ошибках в стилях на странице: неверное объявление просто пропускается.

Значение brown font-size: 26px не является цветом, поэтому и color не применится.

Без точки с запятой браузер видит одно объявление color с неверным значением и пропускает его целиком.

Вложенные элементы наследуют выравнивание текста от родителя.

Свойство text-align наследуется, поэтому абзацы внутри <body> тоже будут выровнены по центру.

Выравнивание по ширине задаётся значением justify, а здесь указано center.

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

Стиль меняет вид, но не смысл элемента. Для названия раздела нужен элемент <h2>.

Заголовок размечается элементом заголовка, а его вид при необходимости меняют стилями.

Синий канал — последняя пара цифр, а она равна 00. Синий цвет — #0000FF.

Пары цифр — красный, зелёный и синий каналы. Здесь максимален только зелёный канал (FF).

Красный канал — первая пара цифр, а она равна 00. Красный цвет — #FF0000.

Это некорректная запись: у полной формы шесть цифр, по паре на каждый канал.

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

В сокращённой записи каждый символ повторяется дважды: F → FF, 8 → 88, 0 → 00.

Альфа-канал 0 делает цвет полностью прозрачным. Абзац на месте, но его текст невидим.

Непрозрачный цвет задаётся альфа-каналом 1, а здесь указан 0.

Запись корректна: четвёртый параметр — альфа-канал со значением от 0 до 1.

Нулевая насыщенность даёт серый цвет той же светлоты, а не светлый оттенок.

Тон и насыщенность сохранены, а большая светлота делает цвет светлее.

Изменился тон: 90 градусов — это жёлто-зелёный, а светлота осталась прежней.

Для обычного текста рекомендованный контраст — не меньше 4,5:1. Нужен более тёмный текст или более светлый фон.

При контрасте чуть больше 1:1 текст почти не отличается от фона. Для обычного текста нужно не меньше 4,5:1.

Важен не цвет сам по себе, а отношение яркости текста и фона.

Расположение названия на странице можно поменять с помощью CSS, но в коде <caption> всегда идёт первым.

Название таблицы записывается сразу после открывающего тега <table>.

<caption> — часть таблицы, поэтому он находится внутри <table>, а не перед ним.

Тогда в строке будет четыре столбца: два занимает объединённая ячейка и ещё два — обычные.

Объединённая ячейка занимает только два столбца, а в таблице их три.

Объединённая ячейка занимает два столбца из трёх, поэтому нужна ещё одна ячейка.

Объединённая ячейка растягивается вниз и занимает место в третьей строке.

Объединение не добавляет ячеек, а занимает место соседних: в следующей строке ячеек становится меньше.

rowspan растягивает ячейку вниз, на следующие строки.

Ячейка заголовка с scope="row" называет всю строку, и программа экранного доступа объявит её перед значениями.

Жирный текст только выглядит как заголовок. Связь ячейки со строкой задаёт элемент <th>.

Значение col означает заголовок столбца, а название дня здесь называет строку.

<caption> всегда первый элемент таблицы.

Подвал записывается после тела таблицы — порядок кода совпадает с порядком чтения.

Так разрешал записывать прежний стандарт, и такой порядок встречается в старом коде. Сейчас <tfoot> идёт после <tbody>.

Отсутствие названия не меняет того, что таблица будет объявлена таблицей и не перестроится на узком экране.

Так делали давно, до появления современных средств CSS. Сейчас расположение блоков задают Flexbox и Grid.

Таблица предназначена для данных. Таблица для вёрстки мешает программам экранного доступа и не перестраивается на узком экране.

Заполненность диска — величина в известном диапазоне, а не ход процесса.

Таблица подходит для данных в строках и столбцах, а не для наглядной шкалы одной величины.

<progress> показывает ход процесса, который движется к завершению. Заполнение диска ничего не завершает.

Зелёной шкала будет, когда значение в той же области, что и optimum, — от 80 включительно.

Красной шкала будет, когда значение в самой удалённой от оптимума области — ниже 20.

Оптимум в области высоких значений, а значение 50 — в соседней, средней области.

Без max общий объём равен единице, а 0,5 — половина.

Неопределённый прогресс показывается, когда не указан value. Здесь значение задано.

Значение по умолчанию для max у <progress> — единица, а не 100.

Цвет — только дополнительная подсказка. Смысл значения нужно передать текстом.

Изменение цвета не поможет тому, кто цвет не различает.

Программа экранного доступа объявит только число, без оценки «хорошо» или «плохо».

Фрейма с именем walks нет, поэтому браузер открывает ссылку в новой вкладке с этим именем.

Ссылка работает, но открывается не во фрейме: имена не совпадают.

Имя в target должно совпадать с name фрейма. Здесь walks и walk различаются.

Заголовок встроенной страницы задаёт её собственный <title>; атрибут фрейма его не меняет.

Для этого служит атрибут name фрейма и target ссылки.

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

В src фрейма можно указать и относительный, и абсолютный адрес.

Без размеров фрейм занимает 300 × 150 пикселей, но содержимое в нём всё равно показывается.

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

Ленивая загрузка откладывает фрейм, пока он не окажется близко к видимой области.

sandbox ограничивает возможности встроенной страницы, но не время её загрузки.

allow перечисляет разрешённые возможности браузера, значения lazy у него нет.

Изображения во фрейме с sandbox показываются; ограничиваются скрипты, формы, окна и переходы.

Наоборот: атрибут без значения включает самые строгие ограничения.

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

Сочетание MP4 с H.264 и AAC широко поддерживается. Одного расширения .mp4 недостаточно: кодеки внутри контейнера могут отличаться.

Формат устарел: Safari его не поддерживает, а Google Chrome прекратил поддержку Theora.

WAV — формат аудио, а не видео.

Элементы <source> — варианты одного видео, а не список роликов.

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

Браузер просматривает источники по порядку и выбирает первый подходящий.

Элемент остаётся на странице, но воспроизведение не начинается.

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

Запасное содержимое показывают только браузеры, которые совсем не поддерживают элемент.

Название файла не выводится; без обложки браузер показывает первый кадр.

Первый кадр показывается, когда атрибута poster нет.

Обложка видна до запуска; она должна соответствовать содержанию ролика.

loop повторяет воспроизведение, но не разрешает автозапуск.

Браузеры обычно разрешают автозапуск только без звука.

autoplay — логический атрибут: значение ничего не меняет.

kind задаёт тип дорожки, но не включает её.

Логический атрибут default выбирает дорожку, которая показывается сразу.

srclang указывает язык дорожки.

Такая запись встречается, но стандартный MIME-тип MP3 — audio/mpeg.

Это MIME-тип видео в формате MP4.

Это зарегистрированный MIME-тип для MP3.

Идентификатор после ?v= добавляется к адресу https://www.youtube.com/embed/.

Адреса /v/ использовались для устаревшего проигрывателя-плагина и больше не работают.

Это адрес страницы YouTube целиком; для встраивания нужен адрес проигрывателя с /embed/.

Перед первым параметром нужен знак ?, иначе параметры станут частью идентификатора.

Знак ? ставится один раз; второй параметр отделяется знаком &.

Первый параметр — после ?, следующий — после &.

У <iframe> нет атрибута loop; повтор настраивается в адресе проигрывателя.

Автозапуск не влияет на повтор после окончания.

Для одного видео повтор работает вместе с playlist=ID.

Название должно описывать содержимое фрейма, а общее «YouTube video player» этого не делает.

У <iframe> нет атрибута alt; название задаёт title.

Название фрейма объявляют программы экранного доступа, поэтому оно нужно.

Рамку элемента задают и убирают свойствами CSS.

allowfullscreen разрешает полноэкранный режим и не связан с рамкой.

<embed> — устаревший способ встраивания видео YouTube, рамку он не убирает.

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

YouTube требует идентификацию страницы. При открытии с диска Referer обычно отсутствует; referrerpolicy не устраняет это ограничение file://.

Название фрейма нужно для доступности и не влияет на заголовок Referer.

У <img> нет атрибута map; связь задаёт usemap.

В usemap указывается имя карты с решёткой, в name — без неё.

В usemap перед именем карты нужна решётка.

Прямоугольник задаётся значением rect и четырьмя числами.

Для circle указываются координаты центра и радиус.

Первые два числа — координаты центра, третье — радиус.

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

Центр и радиус задаются для circle.

Для rect указываются два противоположных угла.

Нажатие работает и без alt, но назначение ссылки останется неизвестным части пользователей.

Область не видна как текст ссылки, поэтому её название берётся из alt.

Подсказку при наведении задаёт title; alt — альтернативный текст области.

Координаты задаются в пикселях и сами не пересчитываются.

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

Области продолжают работать, но уже не совпадают с фигурами.

Атрибут id связывает поле с подписью, но не задаёт имя для отправки. Нужен атрибут name.

Имя пары берётся из атрибута name, а не из названия атрибута value. Без name поле не отправляется.

Браузер отправляет только поля с атрибутом name: из него берётся имя пары «имя=значение». Атрибут id для отправки не используется.

Расположение рядом не связывает подпись с полем. Нужен совпадающий for или поле внутри <label>.

Атрибут for сравнивается с id, а не с name.

Значение for должно совпадать с id поля. Здесь mail и email различаются.

Название поля пишите в <label>, а в placeholder — пример или формат.

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

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

Атрибут action необязателен. Без него форма отправляется по адресу текущей страницы.

В теле запроса данные передаёт метод post. Метод get добавляет их к адресу.

Без action обработчиком считается текущая страница, а метод get записывает данные в адрес.

Значения у вариантов, наоборот, разные: по ним сервер узнаёт, что выбрал пользователь.

Идентификатор должен быть уникальным на странице. Группу задаёт общий атрибут name.

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

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

Значение on отправляется только у флажка без атрибута value. Здесь значения указаны.

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

Так вопрос («Когда удобно гулять») связывается с вариантами ответа («утром», «вечером»).

Рамка — заметное, но не главное следствие. Важнее, что <legend> даёт группе название.

Группу переключателей задаёт общий атрибут name. <fieldset> добавляет заголовок и рамку.

post не показывает пароль в адресе и истории, а защищает передачу протокол HTTPS.

Тип password скрывает символы только на экране. При get пароль окажется в адресной строке.

Метод post ничего не шифрует, он лишь передаёт данные в теле запроса. Шифрование обеспечивает HTTPS.

Так ведёт себя кнопка с type="button". Тип по умолчанию — submit.

Сброс выполняет только кнопка с type="reset".

Без атрибута type кнопка внутри формы имеет тип submit. Для других действий укажите type="button".

Кнопка сброса отменяет ввод пользователя и возвращает значение value из кода.

Сброс возвращает исходные значения из кода, а не очищает поля.

Поле опустело бы, если бы в коде у него не было значения. Здесь исходное значение — Тони.

Переход по адресу — задача ссылки: её можно открыть в новой вкладке и сохранить в закладки.

Кнопка выполняет действие, а не ведёт по адресу. Без скрипта она никуда не перейдёт.

Роль ARIA не добавляет ни перехода, ни фокуса с клавиатуры. Нужен встроенный элемент — ссылка.

Атрибут ARIA сообщает только роль. Фокус и управление с клавиатуры есть у встроенного <button>.

Атрибут допустим, но он не превращает <div> в работающую кнопку.

Внешний вид можно изменить стилями. Главное отличие — поведение и доступ с клавиатуры.

Кнопка с атрибутом name отправляет пару, если форму отправили ею.

Имя и значение кнопки отправляются, если форму отправили именно ею. Надпись на кнопке не отправляется.

У <button> отправляется атрибут value, а не содержимое между тегами.

Отключённая кнопка вообще не реагирует на нажатия.

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

У логического атрибута важно только его наличие: disabled="false" тоже отключает кнопку.

Описание картинки не объясняет, что сделает кнопка. Назовите действие.

Пустой alt подходит, только если на кнопке есть текст. Иначе кнопка останется без названия.

Без текста на кнопке alt становится её названием и должен описывать действие.

Текст пункта отправляется, только если у него нет атрибута value.

Имя пары берётся из name списка, значение — из value выбранного пункта.

Имя пары задаёт атрибут name элемента <select>, а не значение пункта.

Без selected браузер выбирает первый пункт, который не отключён.

В обычном раскрывающемся списке всегда выбран один пункт — по умолчанию первый.

Браузер выбирает первый доступный пункт, если не указан selected.

Подпись списку даёт элемент <label>. label у <optgroup> называет только группу.

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

Отправляется value выбранного <option>. Название группы не отправляется.

Каждый выбранный пункт отправляется отдельной парой с общим именем.

Браузер не объединяет значения через запятую: каждое отправляется своей парой.

С атрибутом multiple отправляются все выбранные пункты, а не последний.

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

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

Подсказка видна сразу, пока поле пустое. Здесь поле содержит пробелы.

CSS-свойство width важнее атрибута: значение cols браузер игнорирует.

Атрибут cols действует, только пока ширина не задана в CSS.

Значения не складываются: ширину определяет CSS-свойство width.

Значение отключённого поля не отправляется, а само поле не получает фокус.

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

Подсказка не отправляется и не запрещает ввод: пользователь заменит её своим текстом.

Тип number — для величин, с которыми считают. Стрелки и потеря ведущего нуля индексу не подходят.

Индекс — набор цифр, а не количество: ведущий ноль важен. inputmode откроет цифровую клавиатуру.

Тип tel предназначен для телефонных номеров. Для индекса нужно текстовое поле с цифровой клавиатурой.

Шаг по умолчанию равен 1. Дробные значения разрешает, например, step="0.5" или step="any".

Диапазон соблюдён, но шаг по умолчанию равен 1, поэтому 2,5 не подходит.

Тип number проверяет и диапазон, и шаг. Без step шаг равен 1.

Так было бы с атрибутом required. Без него пустое поле допустимо.

Тип email проверяет формат введённого адреса. Запретить пустое значение может только required.

Пустое значение не проверяется на формат. Сообщение о знаке @ появится, если ввести, например, «hello».

Атрибуты проверки помогают пользователю исправить ошибку, но не защищают сервер.

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

Проверку можно отключить в инструментах разработчика или отправить запрос без формы.

<select> ограничивает выбор вариантами, а поле с <datalist> принимает любой текст.

Варианты <datalist> — подсказки. Если допустимы только значения из списка, используйте <select>.

Выбор нескольких пунктов включает multiple у <select>. <datalist> лишь подсказывает значение.

Такого типа нет. Связь задаёт атрибут list.

<input> — пустой элемент. Список располагается отдельно и связывается через list и id.

Поле ищет список по идентификатору. Нужно list="breeds".

Отправляются поля <input>, <select>, <textarea> и кнопки. Результат при необходимости рассчитывает сервер.

<output> не участвует в отправке формы.

Атрибут name позволяет обратиться к элементу из скрипта, но значение <output> не отправляется.

<keygen> исключён из стандарта, Chrome и Firefox удалили его поддержку.

Метод отправки не влияет: браузеры просто не поддерживают этот элемент.

Для проверки подлинности сейчас используют другие технологии. <keygen> не работает.

Кодировка нужна для правильного текста, viewport — для телефонов, а описание часто показывают в результатах поиска. Раньше к ним добавляли X-UA-Compatible для Internet Explorer, но сейчас он не нужен.

Метатег X-UA-Compatible управлял режимами Internet Explorer. Современные браузеры его игнорируют.

Эти метатеги необязательны: Google не учитывает keywords, а author лишь называет автора.

Браузер ищет кодировку в первых 1024 байтах документа, а текст до неё может прочитать неверно.

Метатеги размещаются в <head>, а кодировку браузеру нужно узнать как можно раньше.

Порядок важен: кодировку ищут только в начале документа. Указывайте её первой.

Страница откроется, но русский текст будет искажён.

Метатег лишь сообщает кодировку, но не перекодирует файл. Сохраните сам файл в UTF-8.

Браузер прочитает байты как UTF-8, и русские буквы превратятся в непонятные символы.

Значение width=device-width как раз подгоняет ширину под экран. Проблема — в запрете масштабирования.

Не запрещайте масштабирование: достаточно width=device-width, initial-scale=1.

Запрет масштабирования мешает читать текст тем, кому нужно его увеличить.

Изменится масштаб: страница будет показана как настольная, с мелким текстом.

Метатег необязателен для открытия страницы, но без него она выглядит уменьшенной.

Без метатега мобильный браузер считает страницу настольной и уменьшает её до ширины экрана.

noindex запрещает индексирование страницы, follow разрешает переход по ссылкам.

none — это noindex, nofollow: переход по ссылкам тоже будет запрещён.

Метатег keywords содержит ключевые слова и не управляет индексацией.

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

Описание не отображается на странице: его показывают поисковые системы в результатах поиска.

На вкладке видно название <title>, а не описание.

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

Валидный код может содержать неверный путь к странице, пустой alt у важной фотографии или кнопку без нужного типа.

Этот метатег необязателен. Проверять нужно работу сайта: ссылки, изображения, формы и клавиатуру.

Относительный путь начинается в каталоге текущего документа.

Название вкладки не влияет на разрешение пути.

У связанной подписи for совпадает с id поля либо поле вложено в label.

Внешнее соседство не связывает элементы.

Валидация разметки не заменяет проверку ресурсов и поведения в браузере.

Правильный синтаксис src не гарантирует наличие файла по этому пути.