HTML Flashcards

Question 1

Q

Что такое HTML и для чего он используется?

Answer

A

HTML (HyperText Markup Language) - это язык гипертекстовой разметки, который используется для создания структуры и представления содержимого веб-страницы. Он является стандартным языком разметки для создания веб-страниц и веб-приложений во всем Интернете.

HTML состоит из набора элементов (тегов), которые определяют различные части веб-страницы и их функциональность. Большинство элементов имеют начальный и конечный тег, и содержат текст и/или другие элементы между ними.

Все HTML-документы должны начинаться с объявления типа документа: <!DOCTYPE html>. <!DOCTYPE html> — объявление типа документа, которое указывает браузеру, что это HTML5.

<html> — корневой элемент, который содержит весь контент страницы.
<head> — содержит метаинформацию, такую как заголовок страницы, кодировку, ссылки на стили и скрипты.
<body> — содержит основное содержимое страницы, которое отображается в браузере.

В head обычно располагаются:
Для подключения стилей к странице существует тег <link></link>. Для этого у него есть атрибут href в котором задаётся адрес стилевого файла, а значение stylesheet атрибута rel говорит браузеру, что мы подключаем именно стили, а не что-то другое.
Ещё один элемент, который располагается в <head> — это тег <title>. В нём задаётся заголовок страницы, который отображается во вкладках браузера. По заголовку должно быть понятно, о чём эта страница, даже когда она не открыта в браузере, а отображается в результатах поиска или в браузерных закладках.
Ещё один важный тег, располагающийся внутри <head> это тег <meta></meta>. Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью <meta></meta> можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так далее. Для этого используются теги <meta></meta> с разными атрибутами и их значениями.

Браузеры интерпретируют HTML и отображают его содержимое в соответствии с заданной разметкой.

Он был разработан Тимом Бернерсом-Ли в 1991 году. HTML не является языком программирования, а служит для описания структуры и содержания веб-страницы.
</head></title></head></body></head></html>

Question 2

Q

Что такое теги?

Answer

A

Теги в HTML — это специальные элементы разметки, которые используются для создания структуры веб-страницы. Они помогают браузеру понять, как отображать содержимое: где заголовки, где абзацы, где изображения и так далее. Теги обычно заключаются в угловые скобки < > и бывают парными (<p></p>) или одиночными (<img></img>).

Внутрь парного тега можно помещать как какой-то контент, так и другие теги. Это позволяет создавать сложную вёрстку, в которой области отделены друг от друга: меню от шапки сайта, рекламный блок от основного контента и так далее. Тег, в который вложены другие теги, иногда называют обёрткой или враппером/wrapper. Важно помнить, что не все теги можно вкладывать друг в друга. К примеру, вкладывать блочный тег “div” в строчный тег “a” - некорректно, согласно стандартам HTML, такая структура может вызвать непредсказуемое поведение в различных браузерах и ухудшить доступность контента.

Question 3

Q

Расскажи про блочные и строчные теги?

Answer

A

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

Блочные элементы:
- Занимают всю доступную ширину родительского контейнера.
- Начинаются с новой строки.
- Можно задавать ширину, высоту, отступы (margin, padding).
Примеры: <div>, <p>, <h1>–<h6>, <header>, <footer>, <section>.

Строчные элементы:
- Занимают только столько места, сколько нужно для их содержимого.
- Не начинаются с новой строки.
- Нельзя задавать ширину, высоту, вертикальные отступы (margin-top, margin-bottom).
Примеры: <span>, <a>, <strong>, <em>.</em></strong></a></span>

Строчно-блочные элементы:
Ведут себя как строчные элементы (не начинаются с новой строки), но можно задавать ширину, высоту и отступы. Различаются в разных браузерах.
Примеры: <button>, <select>, <textarea>, <input></input>.</textarea></select></button>

Question 4

Q

Что такое атрибуты в HTML?

Answer

A

Атрибуты в HTML — это дополнительные свойства, которые добавляются к тегам (элементам) для изменения их поведения, внешнего вида или предоставления дополнительной информации. Атрибуты всегда указываются внутри открывающего тега и обычно состоят из пары имя=”значение”. Некоторые атрибуты не требуют значения, так как их наличие уже указывает на true, к примеру, <input></input>.

Некоторые атрибуты могут использоваться с любыми HTML-элементами. Например:
class — задает класс для стилизации или JavaScript.
id — уникальный идентификатор элемента.
style — позволяет задать CSS-стили напрямую.
title — добавляет всплывающую подсказку при наведении.

Существуют также пользовательские атрибуты данных, которые позволяют хранить дополнительную информацию в элементах HTML. Эти атрибуты начинаются с data- и могут быть использованы для хранения данных, которые не имеют визуального представления, но могут быть полезны для JavaScript.

<div id="user" data-user-id="12345">Пользователь</div>
const user = document.getElementById('user');
console.log(user.dataset.userId); // 12345

Question 5

Q

Расскажи про кодировку страницы и теги мета.

Answer

A

Важный тег, располагающийся внутри <head> это тег <meta></meta>. Он одиночный, то есть не требует парный закрывающий тег в конце. С помощью <meta></meta> можно сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о вашем сайте: кодировку текста, описание контента и так далее. Для этого используются теги <meta></meta> с разными атрибутами и их значениями.

Кодировка текста HTML-страницы указывается с помощью атрибута charset:

Самая распространённая современная кодировка — utf-8.

Перечень ключевых слов задаётся тегом <meta></meta>, у которого атрибут name имеет значение keywords. Ключевые слова (самые важные слова из содержания страницы) перечисляются в атрибуте content через запятую:

Краткое описание (или аннотация) страницы задаётся похожим образом, только значение атрибута name меняется на description:

Question 6

Q

Что такое семантика?

Answer

A

Одна из важных особенностей HTML — семантика, которая буквально переводится как «обозначающий». При помощи HTML мы описываем структуру страниц и их содержимого, то есть объясняем браузерам, вспомогательным и другим технологиям и программам значение элементов. Это может быть параграф текста, кнопка, часть страницы с основным содержимым или ничего не значащий контейнер.

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

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

На практике семантика HTML-элементов передаётся через их роли, а ещё состояния и свойства. Роли описывают основной смысл элемента, а состояния и свойства добавляют больше деталей: выбран или не выбран чекбокс, активно или неактивно поле в форме и так далее.

Теги и их встроенные роли перечислены в спецификации ARIA в HTML (ARIA in HTML).

Все HTML-теги, которых больше 100, семантические. Для простоты разделим их на две группы — секционные и контентные. Секционные теги делят HTML-документ (страницу) на большие логические блоки или секции:

<article> — самостоятельный блок с содержимым вроде превью поста в блоге, карточки товара или рекламного баннера. Такой контент не потеряет смысл, если его перенести на другую страницу или сайт.
<nav> — основная или дополнительная навигация со ссылками на другие страницы или отдельные разделы. В основном такой областью указываются только основные меню. Дополнительные, такие как меню в футере, не оборачивают в тег <nav>, хотя это не запрещено. Хороший пример дополнительного использования nav — навигация по текущей странице.
<section> — блок, который объединяет содержимое по смыслу.
<aside> - представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, сносок или меток.
<main> — основное содержимое страницы.
<header> — вводное содержимое или навигация. Не привязан к конкретному месту страницы и отдельной секции, но традиционно используется для создания основной навигации по сайту — шапки (хедера). Также можно использовать для оборачивания оглавления раздела, заголовка статьи с вводной информацией о ней и прочего.
<footer> — дополнительная информация о сайте или части одной страницы. Тоже не привязан к части страницы или отдельной секции. Например, подвал (футер) может быть у превью поста и содержать информацию о дате публикации и авторе.

Контентные теги описывают смысл частичек и типов содержимого — контента. Перечислим несколько тегов, на самом деле их гораздо больше:

<h1>-<h6> для определения заголовков на странице. <h1> используют для основного заголовка документа или раздела. Остальные нужны для подзаголовков. Все заголовки описывают структуру и иерархию страниц.
<button> для кнопок. Используют для отправки форм и выполнения других команд.
<img></img> для картинок.
<table> для таблиц. Состоят из нескольких элементов для структурирования табличных данных: строк <tr>, заголовочных ячеек <th> и ячеек с данными <td>.
<ul> неупорядоченный маркированный список.
<a> для ссылок, с помощью которых пользователи переходят от одной страницы к другой.
<p> для абзацев текста. Это основные блоки текста в HTML; логически разграничивают части текста с общей мыслью или идеей.

HTML-атрибуты раскрывают дополнительный смысл содержимого страниц. Например, глобальный атрибут title означает, что это дополнительные сведения о тексте или элементе. lang сообщает о языке слова, фразы или ссылки, а dir описывает направление письма.

Конечно, не все теги подробно описывают типы содержимого. К примеру, <section> только намекает, что это что-то объединённое по смыслу. <article> уже больше рассказывает о содержимом: оно тесно связано, сгруппировано в одном месте и не зависит от другого на странице.

<div> и <span> тоже существуют не зря, хотя их часто называют несемантическими. Это не совсем так. Оба тега играют роль универсальных контейнеров с ролью generic. То есть они говорят браузерам или скринридерам, что их смысл не важен и на них можно не обращать внимание. Использовать эти теги рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.

Тег <div> используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.

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

Зачем нужна семантика?
1. Исходный код проекта с вниманием к семантике легче поддерживать. В нём проще ориентироваться, а любой член команды сразу видит логику отдельных элементов и общую структуру интерфейса.
2. Люди со слепотой и слабовидящие используют скринридеры, экранные лупы и другие вспомогательные технологии для взаимодействия со страницами. Логичная HTML-разметка улучшает опыт пользователей вспомогательных технологий и устраняет барьеры, из-за которых невозможно пользоваться сайтом. Другой плюс продуманной HTML-разметки — навигация для скринридеров. Теги вроде <header> и <footer> — ориентиры. Это значит, что пользователи могут перемещаться по отдельным блокам страницы с помощью горячих клавиш.
3. Семантика упрощает работу поисковикам и позитивно влияет на поисковую оптимизацию сайтов — SEO (search engine optimization). Улучшает точность индексации страниц;
повышает показатели производительности сайта;
увеличивает органический трафик и количество кликов;
гарантирует спокойную старость спокойное будущее.
</footer></header></span></div></span></div></article></section></p></a></ul></td></th></tr></table></button></h1></h6></h1></footer></header></main></aside></section></nav></nav></article>

Question 7

Q

Какие есть категории контента у тегов? На что влияют категории контента?

Answer

A

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

Основные категории контента в HTML5:
1. Metadata content (Метаданные):
Элементы, принадлежащие к категории метаданных, изменяют отображение или поведение HTML-документа, связывают его с другими документами и предоставляют другую дополнительную информацию о документе.
Элементами метаданных являются: <base></base>, <link></link>, <meta></meta>, <noscript>,

, <style> и <title>.</title></style>

</noscript>

Flow content (Потоковый контент):
Большинство элементов, которые могут быть частью основного содержимого документа, содержат текст и встроенный контент.
<a>, <abbr>, <address>, <article>, <aside>, <audio>, <b>,<bdo>, <bdi>, <blockquote>, <br></br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <del>, <details>, <dfn>, <div>, <dl>, <em>, <embed></embed>, <fieldset>, <figure>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hgroup>, <hr>, <i>, <iframe>, <img></img>, <input></input>, <ins>, <kbd>, <label>, <main>, <map>, <mark>, <math>, <menu>, <meter>, <nav>, <noscript>, <object>, <ol>, <output>, <p>, <pre>, <progress>, <q>, <ruby>, <s>, <samp>,
```
, <section>, <select>, <small>, <span>, <strong>, _{, ^{, <svg>, <table>, <template>, <textarea>, <time>, <ul>, <var>, <video>, <wbr></wbr> и текст
Несколько других элементов, которые тоже принадлежат к этому типу, но требуют определённых условий:</video></var></time></textarea></template></svg>}}</strong></span></small></select>
```
</samp></s></ruby></q></progress></output></object></noscript></meter></math></mark></label></kbd></ins></i></figure></em></dfn></details></del></datalist></data></code></cite></canvas></button></bdi></bdo></b></audio></abbr></a>

, только внутри элемента <map>

, при наличии атрибута itemprop

, при наличии атрибута itemprop

<style>

, при наличии атрибута scoped

3. Sectioning content (Секционный контент):
Секционный контент является подмножеством основного потока, он создаёт разделы документа.
Элементы этой категории это: <article>, <aside>, <nav> и <section>.

4. Heading content (Заголовочный контент):
Заголовочный контент задаёт заголовок секции, явно отмеченной структурным элементом или неявно – самим заголовочным.
Примеры: <h1>, <h2>, <h3>, <h4>, <h5>, <h6> и <hgroup>.

5. Phrasing content (Фразовый контент):
Фразовый контент определяет текст и его формат. Серии фразового контента образуют параграфы.
К данной категории принадлежат следующие элементы: <abbr>, <audio>, <b>, <bdo>, <br>, <button>, <canvas>, <cite>, <code>, <data>, <datalist>, <dfn>, <em>, <embed>, <i>, <iframe>, <img>, <input>, <kbd>, <label>, <mark>, <math>, <meter>, <noscript>, <object>, <output>, <progress>, <q>, <ruby>, <samp>, <script>, <select>, <small>, <span>, <strong>, <sub>, <sup>, <svg>, <textarea>, <time>, <var>, <video>, <wbr> и обычный текст.
Ещё несколько элементов входят в данную категорию при соблюдении особых условий:
<a>, если содержит в себе только фразовый контент
<area>, только внутри элемента <map>
<del>, если содержит в себе только фразовый контент
<ins>, если содержит в себе только фразовый контент
<link>, при наличии атрибута itemprop
<map>, если содержит в себе только фразовый контент
<meta>, при наличии атрибута itemprop

6. Embedded content (Встроенный контент):
Встроенный контент импортирует в документ другой ресурс или вставляет содержимое на другом языке разметки или принадлежащее другому пространству имён. Элементами данной категории являются: <audio>, <canvas>, <embed>, <iframe>, <img>, <math>, <object>, <svg>, <video>.

7. Interactive content (Интерактивный контент):
К интерактивному контенту относятся элементы, которые специально разработаны для взаимодействия с пользователем. В данную категорию входят <a>, <button>, <details>, <embed>, <iframe>, <label>, <select> и <textarea>. Некоторые элементы считаются интерактивным контентом только при соблюдении определённых условий:

<audio>, если указан атрибут controls
<img>, если указан атрибут usemap
<input>, если атрибут type не скрыт
<menu>, если атрибут type имеет значение toolbar
<object>, если указан атрибут usemap
<video>, если указан атрибут controls

</style>

Question 8

Q

Какой тег создает параграф?

Answer

A

Тег <p> в HTML используется для создания параграфов (абзацев текста). Это один из самых базовых и часто используемых тегов в HTML, который помогает структурировать текстовое содержимое на веб-странице. Абзацы являются блочными элементами, браузер автоматически добавляет отступы (поля) сверху и снизу абзаца, чтобы визуально отделить его от других элементов, а также разделяют абзацы одной пустой строкой.

Автоматическое закрытие тега <p> происходит, когда внутри него размещаются блочные элементы, такие как <div>, <h1>-<h6>, <ul>, <ol> или <table>. Это связано с правилами парсинга HTML: тег <p> предназначен только для текста и inline-элементов, поэтому браузер закрывает его перед блочными элементами, чтобы сохранить структуру документа. Например, код <p>Текст<div>Блок</div></p> будет преобразован в <p>Текст</p><div>Блок</div>.

Кроме того, закрывающий тег </p> может быть пропущен. Если за <p> сразу следует другой блочный элемент или если в родительском элементе больше ничего нет, браузер автоматически добавит закрывающий тег. Например, <p>Первый абзац.<p>Второй абзац. будет преобразовано в <p>Первый абзац.</p><p>Второй абзац.</p>.

Question 9

Q

Расскажи про теги форматирования текста

Answer

A

<strong> - Логическое выделение важного текста. Несёт смысловую нагрузку. Используется для акцента на важных частях текста.</strong>

<p>Это <strong>важный</strong> текст.</p>

<b> - визуальное выделение жирным. Не несёт смысловой нагрузки. Устарел, рекомендуется использовать CSS для визуального выделения.</b>

<p>Это <b>жирный</b> текст.</p>

<em> - логический акцент. Используется для смыслового выделения текста.</em>

<p>Это <em>акцентированный</em> текст.</p>

<i> - Визуальное выделение курсивом. Не несёт смысловой нагрузки. Устарел, рекомендуется использовать CSS для визуального выделения.</i>

<p>Это <i>курсивный</i> текст.</p>

<u> - Подчёркивание текста. Используется редко, так как ассоциируется с гиперссылками.</u>

<p>Это <u>подчёркнутый</u> текст.</p>

<s> - Перечёркивание текста. Используется для обозначения устаревшей или удалённой информации.
<p>Это <s>устаревший</s> текст.</p>

_{используется для отображения текста в виде нижнего индекса (подстрочного текста). Это полезно для написания химических формул, математических выражений и других случаев, где требуется нижний индекс.
<p>Формула воды: H₂O.</p>

^{используется для отображения текста в виде верхнего индекса (надстрочного текста). Он часто применяется для степеней, математических выражений, сносок и дат.
<p>Теорема Пифагора: a² + b² = c².</p>

<br></br> используется для перевода строки внутри текста. Это одиночный тег (не требует закрывающего тега), который разрывает строку и начинает текст с новой строки.
<p>Это первая строка.<br></br>Это вторая строка.</p>

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

<mark> - Выделение цветом. Используется для акцента на важной информации.
<p>Это <mark>выделенный</mark> текст.</p>

<small> - Уменьшение размера текста. Используется для сносок или юридического текста.
<p>Это <small>мелкий</small> текст.</p>

<cite> - Выделение названий произведений. Обычно отображается курсивом.
<p>Книга <cite>Война и мир</cite> написана Львом Толстым.</p>

<code> - Выделение фрагментов кода. Используется для отображения программного кода.
<p>Используйте <code>console.log()</code> для вывода в консоль.</p>

<kbd> - Обозначение клавиш клавиатуры. Используется для инструкций.
<p>Нажмите <kbd>Ctrl + C</kbd>, чтобы скопировать текст.</p>

<samp> -Пример вывода программы. Используется для отображения результатов выполнения кода.
<p>Программа вывела: <samp>Hello, World!</samp></p>

<var> - Обозначение переменных. Используется в математических выражениях или коде.
<p>Переменная <var>x</var> равна 10.</p>

<dfn> - Определение терминов. Используется для выделения новых понятий.
<p><dfn>HTML</dfn> — это язык разметки для создания веб-страниц.</p>

<abbr> - Обозначение аббревиатур. Может содержать расшифровку в атрибуте title.
<p><abbr>HTML</abbr> используется для создания веб-страниц.</p>

<q> - Короткие цитаты. Обычно выделяется кавычками.
<p>Он сказал: <q>Знание — сила.</q></p>

<blockquote> - Длинные цитаты. Обычно выделяется отступами.
<blockquote>
<p>Это длинная цитата, которая занимает несколько строк.</p>
</blockquote>
</blockquote></q></abbr></dfn></var></samp></kbd></code></cite></small></mark>}}</s>

Question 10

Q

Какой тег отвечает за заголовки?

Answer

A

Для создания заголовков используется 6 парных тегов: <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, где <h1> — заголовок первого уровня, самый важный и описывающий главную тему текста, а <h6> — заголовок самого низшего уровня. По умолчанию все элементы заголовков создают в разметке блочный контейнер, начинающийся на новой строке и занимающий всю доступную ширину в содержащем его блоке.

Заголовки помогают пользователям с ограниченными возможностями (например, с помощью screen readers) понимать структуру страницы. Правильная иерархия заголовков улучшает навигацию.

Использование нескольких элементов <h1> на одной странице разрешено стандартом HTML (если они не вложены друг в друга), но это считается плохой практикой. Хорошо, когда на странице есть единственный элемент <h1>, который описывает содержимое этой страницы
Информация о заголовках может использоваться пользовательскими агентами для автоматического создания оглавления документа.
Не используйте элементы заголовков для управления размером шрифта. Для этих целей следует применять CSS-свойство font-size.
Не пропускайте уровни заголовков: всегда начинайте с <h1>, потом используйте <h2> и так далее.

Question 11

Q

Расскажи про теги списков?

Answer

A

Для создания маркированного списка используется тег <ul>. Маркированные списки используются, когда информация не требует определённой последовательности. Например, список продуктов из примера выше. Не так важно, что будет куплено первым: молоко или хлеб, важно — купить все продукты. К примеру, для навигации используется маркированный список, так как нам не важен порядок элементов.

Для группировки последовательной информации используются нумерованные списки, важной особенностью которых является наличие порядкового номера элемента. Такие списки удобны, если обозначается последовательность действий, которые нужно совершить. Нумерованный список создаётся с помощью тега <ol>, внутри которого также лежат элементы в тегах <li>. К примеру, такой список используется для хлебных крошек, так как они отображают иерархию страниц и показывают пользователю его текущее положение.

Атрибуты <ol>:
1. reversed - логический атрибут. Отображает список в обратном порядке, нумерация от большего к меньшему.
2. start - задаёт начальное число для нумерации. Используются арабские цифры, независимо от типа нумерации.
3. type - pадаёт тип нумерации:
a — строчные буквы.
A — заглавные буквы.
i — строчные римские цифры.
I — заглавные римские цифры.
1 — арабские цифры (по умолчанию).
Тип применяется ко всему списку, если не переопределён в <li>.

Question 12

Q

Для чего используются тэги <tr>, <th>, <td>? Расскажи про все теги связанные с этим.

Answer

A

Таблица — составной элемент, который формируется сразу из нескольких вложенных друг в друга тегов.

<table> — Контейнер для таблицы.
<caption> — Заголовок таблицы (отображается над таблицей).
<thead>, <tbody>, <tfoot> — Группировка строк: заголовок, тело и подвал таблицы.
<th> (Table Header) — Заголовочная ячейка (по умолчанию жирный текст и выравнивание по центру).
<tr> расшифровывается как «table row», обозначает строку таблицы.
<td> расшифровывается как «table data», обозначает ячейку внутри строки таблицы. Теги <td> располагаются внутри тегов <tr>, а те, в свою очередь, внутри <table>.

<colgroup> и <col></col> — Группировка и стилизация столбцов.
colspan — объединение по горизонтали.
rowspan — объединение ячеек по вертикали у тега <td> или <th>.
Если задать ячейке атрибут rowspan со значением 2, то она как бы «растягивается» на следующую строку. При этом ячейка, которая была под «растянутой» отодвигается в своей же строке вправо, что добавляет в таблицу лишний столбец. Удалив ячейку, которая была под «растянутой», мы избавимся от этого столбца.

Важно:
- Количество ячеек в каждой строке должно быть одинаковым
- Заголовок таблицы caption всегда располагается сразу после открытия таблицы
- Браузеры автоматически добавляют тег <tbody>, если он отсутствует. В небольших таблицах его можно не указывать
- Количество ячеек в каждой строке таблицы должно быть одинаковым после объединения. Важно различать количество тегов <td> и общее количество ячеек. Например, использовав на ячейке атрибут colspan="2" вы получите две логические ячейки, только они будут объединены. По этой причине необходимо убрать одну физическую ячейку из разметки для компенсации
- Если используется атрибут colspan, то из HTML нужно удалить ячейки в той же строке. Если используется атрибут rowspan, то удаляются ячейки в строках ниже

<table>

<caption>Пример таблицы с использованием всех элементов</caption>


<colgroup>
<col></col>
<col></col>
</colgroup>


<thead>
<tr>
<th>Заголовок 1</th>
<th>Заголовок 2</th>
<th>Заголовок 3</th>
</tr>
</thead>


<tbody>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
<td>Данные 3</td>
</tr>
<tr>
<td>Объединённая ячейка (rowspan)</td>
<td>Данные 4</td>
<td>Данные 5</td>
</tr>
<tr>
<td>Объединённая ячейка (colspan)</td>
</tr>
</tbody>


<tfoot>
<tr>
<td>Итог 1</td>
<td>Итог 2</td>
<td>Итог 3</td>
</tr>
</tfoot>
</table>
</td></tbody></th></td></colgroup></table></tr></td></td></tr></th></tfoot></tbody></thead></caption></table>

Question 13

Q

Что такое мнемоники?

Answer

A

Мнемоники в HTML — это специальные последовательности символов, которые используются для отображения символов, которые либо недоступны на клавиатуре, либо имеют особое значение в HTML (например, <, >, &). Мнемоники начинаются с амперсанда (&) и заканчиваются точкой с запятой (;).

Основными типографическими мнемониками в HTML являются:

< — < (less than)
> — > (greater than)
& — & (ampersand)
© — © (знак copyright)
— неразрывный пробел.
€ — €
£ — £

Question 14

Q

Какой тег отвечает за ссылки?

Answer

A

Для создания ссылки используется парный тег <a> с атрибутом href который указывает адрес страницы для перехода. Тег <a> можно использовать и без атрибута href. Такой тег обозначает «ссылку-заглушку», которая в других условиях может стать обычной ссылкой. Часто ссылки-заглушки используют, чтобы показать, что мы находимся на текущей странице.</a></a>

Ссылки есть:
- Относительные. Такие ссылки ссылаются на тот же сайт, с которого и происходит переход
- Абсолютные. Позволяют переходить на сторонние ресурсы в интернете
- Ссылки-якоря. Используются для перемещения внутри текущего документа

Относительные и абсолютные ссылки отличаются форматом href. В случае с относительными ссылками не указывается адрес самого сайта, на который будет переход, он будет совпадать с сайтом, с которого произошёл переход.
<a>О нас</a> - относительная
<a>О нас</a> - абсолютная. Абсолютные адреса содержат минимум три части: протокол, имя сервера и путь.

Ссылки-якоря удобны в использовании внутри объёмного документа и позволяют переместить пользователя к нужному месту.
<a>Переход на главу 2</a>
…
iv id=”anchor”>
<h2>Глава 2</h2>
</div>

Ссылки-якоря могут ссылаться и на конкретное место на другой странице, к примеру:

Страница contacts.html с элементом:

<h2>Почтовый адрес</h2>

На другой странице (index.html) вы можете сделать ссылку:
<a>Наш почтовый адрес</a>

Динамические страницы (SPA) могут обрабатывать якоря по-своему (например, в React/Vue нужно дополнительно настраивать скролл).

По ссылкам можно не только переходить, но и скачивать файлы. Для этого необходимо просто в атрибуте href прописать ссылку на этот файл.
<a>Браузер скачает меня, а не будет читать</a>

Question 15

Q

Расскажи про тег img

Answer

A

Тег <img></img> добавляет изображение на страницу. Растровые, векторные — любые, поддержка форматов уже зависит от браузера. Тег <img></img> одиночный, у него нет закрывающей пары, контент в него не положить. Ссылка на картинку и другие параметры задаются с помощью атрибутов.
src
Обязательный атрибут. В качестве значения указывается адрес картинки. Абсолютная или относительная ссылка до файла в любом допустимом формате. Поисковые системы также считывают имена файлов изображений и учитывают их в SEO. Поэтому вы должны дать своему изображению описательное имя файла; dinosaur.jpg лучше, чем img835.png.

alt
Тоже обязательный атрибут. Текст в alt называется альтернативным описанием изображения и рассказывает словами, что изображено. Это полезно, если картинка не загрузилась или пользователь не видит изображения. Если забыть добавить атрибут, то скринридер попытается прочесть название файла: в лучшем случае это будет logo-large, но может быть и b764b84c, что не очень информативно. Если оставить значение атрибута пустым, то скринридер посчитает это изображение декоративным, а не контентным. Если вы добиваетесь именно этого — отлично, но тогда, возможно, стоит вставить его как фоновую картинку с помощью CSS.
Когда картинка по какой-то причине не загружается, браузеры отображают вместо неё альтернативный текст. Его даже можно стилизовать, если задать текстовые стили тегу <img></img>.

width и height
При помощи атрибутов width и height размеры изображения задаются прямо в HTML. Вы можете спросить: зачем так, ведь стиль нужно задавать с помощью CSS? Это нужно, чтобы избежать прыжков контента при загрузке страницы. Частая ситуация, когда картинка очень тяжёлая, а скорость интернета пользователя невысокая. Если размеры не заданы в атрибутах, то <img></img> займёт место как строка текста. После загрузки картинка встанет на страницу, подвинув остальной контент. Пользователей обычно очень раздражают такие скачки. Они теряют место, где читали, а браузеру приходится перерисовывать страницу заново. Сами единицы измерения px указывать не нужно, браузер поймёт.

srcset
Самый простой способ предложить браузеру версию картинки с повышенным разрешением — указать её в атрибуте srcset. Также атрибут srcset можно использовать в сочетании с атрибутом sizes, чтобы подсказать браузеру, какие варианты картинок есть, и помочь ему выбрать подходящие ситуации.
HTML даёт возможность загружать разные изображения в зависимости от разных условий. Частая ситуация: разные картинки под разные ширины экранов.
Можно делать это при помощи тега <picture>, а можно задать атрибуты srcset и sizes прямо в теге <img></img>.
srcset — атрибут, принимающий несколько строк, разделённых запятой. Каждая строка должна содержать ссылку на картинку и указание фактической ширины картинки, значения разделяются пробелом. При этом после ширины ставится единица измерения w, а не px.
sizes — атрибут, в котором указывается одно или несколько условий через запятую. Каждая строка состоит из медиавыражения и ширины блока для картинки, разделённых пробелом. Ширину блока для картинки можно указывать в любых единицах измерения, кроме процентов.
<img></img></picture>

Как браузер читает эти атрибуты:
Смотрит на ширину экрана устройства.
Пытается определить подходящее условие из списка в атрибуте sizes.
Смотрит на размер блока для изображения к этому медиавыражению.
Загружает то изображение из списка в srcset, которое имеет тот же размер, что и выбранный слот. Если такого нет, то загрузится первое изображение, которое больше размера выбранного слота.
При чтении кода из примера выше:

На экранах от 0 до 320 пикселей загрузится logo-small.png.
На экранах от 321 до 480 пикселей загрузится logo-medium.png.
На всех прочих ширинах (или если браузер не поддерживает эти атрибуты) загрузится logo-large.png.

loading
По умолчанию браузеры читают HTML-код страницы и ставят в загрузку все картинки, которые найдут в тегах <img></img>. Это хорошо для пользователя, ведь это контент страницы, и его не нужно будет ждать.
Но бывает, что картинок на странице много, и нам нужно как-то подсказать браузеру: вот эти пока не загружай, дождись, пока пользователь до них прокрутит — и можно начать загрузку. В общем, сам разберись. Удобно, правда?
Для этого можно указать поведение картинки в атрибуте loading:
- eager, то есть немедленно (по умолчанию, как если вообще не указывать атрибут);
- lazy, то есть лениво.
Атрибут сравнительно свежий, и стоит свериться с таблицей поддержки, но это не так важно: атрибут loading работает как улучшение, и если браузер его не поддерживает, то ничего не сломается.

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

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

Подсказки задаются в атрибуте decoding:
async — декодировать асинхронно (можно попозже, когда получится);
sync — синхронно (нужно прямо сейчас);
auto — автоматически (браузер, решай сам).
Как и атрибут loading, атрибут decoding можно добавлять как прогрессивное улучшение, потому что в старых браузерах ничего не сломается, а в понимающих этот атрибут — станет лучше.

Question 16

Q

Расскажи про тег SVG

Answer

A

SVG — векторный формат графики, доступный в вебе. Формат основан на технологии XML.

До появления SVG мы могли использовать только растровые изображения: форматы JPG, PNG. Но растровые изображения имеют ряд недостатков:

Растровые изображения плохо поддаются масштабированию. Это стало особенно актуальным с появлением ретина экранов.
Растровые изображения, как правило, весят существенно больше, чем их svg-собратья.
Растровые изображения можно редактировать только при помощи графических редакторов, в то время как svg-изображения представляют собой читаемый код.
Растровые изображения статичны. SVG внутри себя может содержать CSS-стили или JS-скрипты.

Контейнер svg
SVG не может быть записано без оборачивающего парного тега svg. Так браузер поймёт, что читать этот код нужно по особым правилам и отрисует картинку на странице.

Обводка stroke
Мы можем управлять толщиной и цветом линии, которая будет соединять все перечисленные точки svg-изображения. Причём можно задать один общий атрибут stroke для контейнера <svg>, а можно задавать его каждому отдельному вложенному элементу, сделав обводку разных частей картинки разного цвета.</svg>

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

Есть несколько способов подключения svg-изображения к веб-странице. Каждый из них имеет свои преимущества и недостатки.
<img></img>
Самый простой способ — использовать тег <img></img> и указать путь до svg-картинки в значении атрибута src.
<img></img>
При таком способе мы можем легко управлять размерами картинки на странице. Но есть и минусы — не получится изменить цвет фона или заливки у самого SVG при помощи CSS.

background-image
Если svg-картинка не является контентной, то её без особого труда можно подключить в виде фона для элемента
<a> Facebook </a>
В этом случае мы также не имеем возможности управлять стилями SVG через CSS.

Через тег <svg> мы можем управлять стилями SVG через стили. Это даёт возможность даже анимировать векторное изображение! 🎉
Неприятная особенность: если одна и та же SVG-картинка используется в нескольких местах на сайте, и в какой-то момент вы захотите в ней что-то изменить, то нужно будет найти все вставки и вносить исправления в код. При вставке SVG при помощи <img></img> или background-image достаточно будет внести изменения в svg-файл и правки применяться ко всем картинкам.</svg>

Атрибуты
fill — отвечает за заливку фигуры. Может использоваться как для всего контейнера svg, так и для отдельных частей. Более подробно тут → fill.
stroke — отвечает за обводку фигуры. Может использоваться как для всего контейнера svg, так и для отдельных частей. Более подробно тут → stroke.
viewBox — атрибут, отвечающий за размеры окна отображения. Значением будет 4 цифры: min-x, min-y, width и height. В примере выше у контейнера svg указано следующее viewBox=”0 0 24 24”. Значит окно отображения будет начинаться в координатах 0 по оси x и 0 по оси y, а по ширине и высоте будет 24 пикселя. Может указываться как для отдельных элементов, так и для всего контейнера. При помощи этого атрибута можно кадрировать изображение, указывая нужные значения.
width и height — атрибуты, указывающие размеры svg-элемента. Значением может быть число без указания единиц измерения, тогда браузер будет воспринимать его как пиксели: width=”100” height=”100”. Можно указать в процентах: width=”100%” height=”100%”. Могут указываться как оба сразу, так и по отдельности. Если планируете вставлять SVG в HTML кодом, то отдайте предпочтение атрибуту viewBox вместо указания ширины и высоты. Тогда при изменении размеров через CSS картинка будет подстраиваться под размеры с сохранением пропорций.
preserveAspectRatio — атрибут, значение которого указывает браузеру нужно ли сохранять пропорции при масштабировании изображения. Если значение отличается от none, то состоит из двух частей: первая отвечает за выравнивания, вторая отвечает за пропорции.
Значения для выравнивания:

xMinYMin, xMidYMid, xMaxYMax — выравнивает изображение по левому верхнему углу, по центру по обеим осям или по правому нижнему углу.
Значения для обрезки:

meet — картинка стремиться уместиться целиком с сохранением пропорций. Чем-то похоже на поведение background-size: contain для фона.
slice — изображение пытается заполнить собой всё доступное пространство. Похоже на background-size: cover.

Подсказки Скопировать ссылку “Подсказки”
💡 Если захотите внести какие-то сложные правки в SVG, а дизайнера под рукой нет, то можно использовать SVG-Edit, SVG-Edit Online, inkscape или Adobe Illustrator.

💡 Всегда перед использованием SVG в проекте прогоняйте его через оптимизатор SVGO. Он удалит всё ненужное, код станет приятнее и будет меньше весить.

💡 С SVG можно взаимодействовать при помощи JavaScript 🤟

Question 17

Q

Что такое SVG спрайт?

Answer

A

SVG-спрайт — это файл, получаемый в результате объединения нескольких файлов SVG. Файл-спрайт используется для сокращения количества запросов к сети — вместо загрузки нескольких файлов, грузится только один. Также для уменьшения размеров и читаемости HTML-кода при многократном использовании векторной графики в разметке.

Весь спрайт оборачивается в SVG, каждая SVG-иконка помещается внутрь тега <symbol>, который предоставляет возможность группировать элементы. При этом данные объекты не отображаются до тех пор, пока на них не будут ссылаться при помощи тега <use>.</use></symbol>

Каждый элемент <symbol> содержит атрибут id с уникальным идентификатором, который будет использоваться для ссылки на иконку в HTML. Также, каждая иконка содержит атрибут viewBox, который определяет размеры окна отображения. Управляя данным атрибутом, можно указать в какой части холста находится конкретная иконка. Это позволяет использовать в спрайте иконки разных размеров и масштабировать их.</symbol>

Чтобы использовать иконку из спрайта на странице, нужно добавить внутрь тега <svg> тег <use> с обязательным атрибутом href. Данный атрибут должен ссылаться на файл спрайта с указанием id символа, содержащего нужное изображение.</use></svg>

Преимущества данного метода:
+Сокращение количества HTTP-запросов;
+Возможность стилизации иконок с помощью CSS;
+Адаптивность и масштабируемость изображений без потери качества.
Недостатки:
-Нельзя использовать как фоновое изображение.

SVG-спрайт для фона
Чтобы использовать SVG из спрайта как фоновое изображение, придётся сформировать иконки в спрайте друг за другом (или по сетке).

Изменение фона будет происходить при помощи сдвига области просмотра SVG. Делается это с помощью тега <view>. Этот тег связывает иконку со специальным идентификатором и определяет её область просмотра.</view>

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

В спецификации SVG такой способ называется именованными фрагментами.

Атрибут viewBox здесь работает так же, как для <svg>. Первые два значения определяют сдвиг области просмотра по осям x и y, следующие два — размер иконки. В нашем примере мы имеем три иконки размером 24 на 24 пикселя, расположенные друг за другом по вертикали. Для дальнейшего использования в CSS или HTML необходимо указать путь к файлу и идентификатор конкретного изображения.
.image {
background-image: url('fragments.svg#icon-first-view');
}</svg>

Также можно воспользоваться альтернативным синтаксисом. Вместо того чтобы задавать внутри спрайта каждой иконке именованный фрагмент с использованием тега <view>, можно сразу при подключении файла указать область, которую хотите просмотреть. Для этого после адреса файла необходимо воспользоваться параметрами svgView и viewBox, в котором указать желаемую область просмотра.
.image {
background-image: url('fragments.svg#svgView(viewBox(0, 0, 24, 48))');
}</view>

.image:hover,
.image:focus {
background-image: url(‘fragments.svg#svgView(viewBox(0, 24, 24, 48))’);
}

При наведении курсора на иконку происходит смена области видимости внутри SVG-спрайта.

Недостатком является невозможность стилизовать иконку при помощи CSS.

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

Как и в случае с <symbol>, значки не занимают своё место, поскольку они наложены друг на друга. Но они не скрыты по умолчанию, в отличие от <symbol>. Вот почему нужно скрыть их с помощью display: none;, но не все, а только те, на которые не нацелен идентификатор в URL-адресе спрайта.</symbol></symbol>

      g {
        display: none;
      }
      g:target {
        display: inline;
      }

</style>
</defs>

<g>
<path></path>
</g>

<g>
<path></path>
</g>
</svg>

Question 18

Q

Расскажи про тег <picture>?</picture>

Answer

A

Тег <picture> адаптирует картинки под разные устройства и поддерживаемые форматы. Одна и та же страница может быть открыта на разных устройствах и в браузерных окнах разной ширины. У телефона небольшой экран, и было бы круто не загружать полноразмерные картинки с большим разрешением. В CSS мы можем изменять фон элемента (background-image) в зависимости от ширины экрана, используя медиавыражения. Но если изображение контентное, вставлено в HTML при помощи тега <img></img>, то CSS нам уже не поможет. Мы должны использовать теги <picture> и <source></source>.</picture></picture>

Внутри тега <picture> обязательно должен находиться тег <img></img>, и опционально — теги <source></source>. Браузер анализирует каждый тег <source></source> по порядку, останавливается на первом подходящем под текущие условия и отображает картинку из атрибута srcset. Другие теги <source></source> не анализируются. Если тег <picture> не поддерживается браузером или ни один из тегов <source></source> не подходит под условия, то отображается картинка из тега <img></img>.</picture></picture>

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

💡 Тег <picture> не является полноценным блочным контейнером, как <div>, поэтому стили необходимо применять к тегу <img></img> внутри.</picture>

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

В этом примере пользователи с обычными экранами увидят картинку с надписью 750x100. Пользователи, у которых ретиновые дисплеи, увидят картинку с надписью 1500x200.

Одна из частых ошибок при работе с тегом <picture> — забытый тег <img></img>. Помните, что браузер показывает изображение исключительно при помощи тега <img></img>, а теги <source></source> только помогают выбрать нужный URL картинки для текущих условий. Поэтому если внутри <picture> не будет тега <img></img>, то и показывать браузеру будет нечего.</picture></picture>

Используйте все доступные вам медиавыражения по полной. Не обязательно останавливаться только на размерах картинок для мобильных и ПК. Можно использовать медиавыражения для определения тёмной темы на устройстве пользователя и подменять картинку, делая интерфейс более приятным для глаз.

Question 19

Q

Расскажи про кодировку страницы?

Answer

A

Кодировка страницы определяет, как символы текста будут представлены в браузере. Если кодировка указана неправильно, текст может отображаться некорректно (например, вместо букв будут отображаться “кракозябры”).

Наиболее распространенная кодировка для веб-страниц — UTF-8 ((Unicode Transformation Format — 8-bit) -). Она поддерживает практически все символы из всех языков мира, включая кириллицу, иероглифы и специальные символы.

Чтобы указать кодировку страницы, используется тег <meta></meta> с атрибутами charset. Этот тег должен располагаться внутри <head> вашего HTML-документа.

Чтобы избежать ошибок кодировки, необходимо уместить метатег с атрибутом charset в первых 1024 байтах документа. Для этого старайтесь указывать его в самом начале тега <head>.

Question 20

Q

Расскажи про тег <head>

Answer

A

Элемент <head> содержит основную информацию о документе: метаданные (например, заголовок окна или кодировку), ссылки на скрипты и таблицы стилей. Эта информация не отображается на странице браузера.

<title>
Задает заголовок страницы, который отображается во вкладке браузера и в результатах поиска.
<title>Моя страница</title>

<meta></meta>
Указывает кодировку страницы (например, UTF-8 для поддержки всех символов).
<meta></meta>

<meta></meta>
Задает краткое описание страницы, которое используется поисковыми системами в результатах поиска.
<meta></meta>

<meta></meta>
Указывает ключевые слова, связанные с содержимым страницы (устаревший тег, но иногда используется).
<meta></meta>

<meta></meta>
Указывает автора страницы.
<meta></meta>

<meta></meta>
Управляет масштабированием и адаптивностью страницы на мобильных устройствах.
<meta></meta>

<link></link>
Подключает внешний файл CSS для стилизации страницы.
<link></link>

<link></link>
Указывает фавиконку (иконку для вкладки браузера).
<link></link>

<script>
Подключает внешний JavaScript-файл или содержит JavaScript-код.
<script src="script.js">
</script>

или

<script>
console.log("Привет, мир!");
</script>

<style>

Содержит внутренние стили (CSS) для текущей страницы.
<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
    }

</style>

<base></base>
Задает базовый URL для всех относительных ссылок на странице. Тег <base></base> нужно написать как можно выше к началу разметки, максимально близко к открывающему тегу <head>. Чтобы все идущие ниже относительные ссылки правильно читались.
<base></base>
Атрибут target - Определяет, как на всём сайте будут открываться ссылки и формы:
_self — на текущей странице (значение по умолчанию);
_blank — в новой вкладке;
_parent — в родительском окне;
_top — в контексте верхнего уровня.
Кроме того, в качестве значения можно указать имя фрейма, в котором должен быть загружен результат.
При создании относительных ссылок косая черта / в начале указывает, что адрес нужно строить от корневого каталога. Например, ссылка /new-page.html будет вести на страницу _https://ex.amp/new-page.html_.
Если же в начале относительной ссылки нет слэша, то адрес будет строиться относительно текущего каталога. Предположим, что мы находимся в каталоге about, тогда ссылка new-page.html будет вести на страницу _https://ex.amp/about/new-page.html_.
Если прописан тег <base></base> и в его атрибуте href указан абсолютный адрес, то все ссылки будут строиться именно относительно указанного адреса, а не относительно текущего или корневого каталога.

<template>
Содержит шаблонный контент, который можно клонировать и вставлять с помощью JavaScript.
<template>
<div>Это шаблонный контент.</div>
</template>

<noscript>
Содержит альтернативный контент для браузеров, которые не поддерживают JavaScript.
<noscript>
<p>Ваш браузер не поддерживает JavaScript. Пожалуйста, включите его для корректной работы страницы.</p>
</noscript>

и другие.
</noscript></template></head></title>

Question 21

Q

Расскажи про метатеги?

Answer

A

В теге <meta></meta> хранится краткое описание страницы, ключевые слова и другие данные, которые могут понадобиться браузерам и поисковым системам. Информация в метатегах называется метаданными. Пользователь не видит их содержимое на странице.

Метатегов может быть любое количество. Все они размещаются внутри тега <head>, желательно в самом начале. Метатеги различаются набором атрибутов и их значений. Один тег содержит одно сообщение: например, описание страницы <meta></meta>, ключевые слова <meta></meta>, кодировку страницы <meta></meta> или другие метаданные. Рекомендуется вставить как минимум метатеги description, viewport, charset. Они помогут оптимизировать сайт для браузера пользователя и поисковых систем.

charset
Задаёт кодировку страницы. Мы рекомендуем писать здесь UTF-8 — это самый распространённый вариант.

content
Основное содержимое метатега, которое используется только с http-equiv и name.
1. http-equiv атрибут, который может изменять поведение страницы или серверов. Используется в паре с content. У него есть несколько значений:
- “default-style” — предпочтительный стиль таблиц, который используется на странице. В этом случае в атрибуте content прописывается заголовок из элемента <link></link>, который связан с таблицей CSS-стилей, или заголовок элемента <style>, который содержит таблицу CSS-стилей.
- "refresh" — время автоматического обновления страницы. Страница будет автоматически перезагружаться с интервалом, который указан в секундах.</style>

name имя метатега, которое также определяет его значение. Используется в паре с content. Можно задать следующие значения:
- “keywords” — ключевые слова, которые помогают поисковикам находить страницу в интернете. По сути, это самые важные слова из содержания страницы.

“viewport” — задаёт параметры окна просмотра в браузере. Страницу можно сделать адаптивной, подогнав ширину окна под размеры устройства. В примере ниже width указывает ширину окна просмотра, а initial-scale — коэффициент масштабирования страницы при первом открытии:

“description” — краткое описание страницы, которое видит пользователь, когда находит сайт в поисковике. Например: «Рассказываем, как нарезать картошку тонкими ломтиками» для сайта о кулинарии. Это описание помогает поисковикам найти страницу, а пользователю — узнать, о чём она. Так что не забывайте указывать “description”.

“author” — имя автора страницы.

💡 Чтобы избежать ошибок кодировки, необходимо уместить метатег с атрибутом charset в первых 1024 байтах документа. Для этого старайтесь указывать его в самом начале тега <head>.

💡 Атрибуты http-equiv и name выполняют похожие функции, поэтому их нельзя использовать одновременно.

💡 С помощью атрибута http-equiv=”refresh” можно сделать так, чтобы страница отправляла пользователя на другую страницу через определённое количество секунд. Например, отправим пользователя на главную Яндекса через 15 секунд

Question 22

Q

Что такое SEO оптимизация?

Answer

A

Поисковая оптимизация, SEO (Search Engine Optimization) — это комплекс работ по улучшению позиций сайта в поисковой выдаче. Поисковой выдачей называют результаты поиска по запросу, который пользователь вводит в поисковике. Конечной целью поисковой оптимизации является привлечение большего количества органического трафика (естественных пользователей) на свой сайт.

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

На позицию в поиске влияют внутренние и внешние факторы. Внутренние включают техническую реализацию сайта, качество контента, адаптивность и доступность — всё, что можно изменить напрямую. Внешние факторы, такие как возраст домена, количество переходов из поиска или по прямой ссылке, не контролируются напрямую разработчиком или SEO-специалистом.

Внутренних факторов ранжирования достаточно много, вот наиболее важные из них:

Удобный UI и UX. Очень важным аспектом продвижения сайта являются поведенческие факторы. Интерфейс (UI, user interface) и пользовательский опыт (UX, user experience) непосредственно влияют на то, захочет ли пользователь остаться на вашем сайте надолго или быстро уйдёт с него. Сайт должен привлекать к себе внимание, вести пользователя туда, куда ему нужно, а не быть набором разрозненной информации, в которой пользователю будет сложно ориентироваться.
Оптимизация загрузки. Чем быстрее сайт загружается, тем быстрее пользователь получит нужную информацию. Оптимизировать загрузку сайта можно как со стороны сервера, так и со стороны фронтенда. На скорость загрузки влияет скорость ответа от сервера, размер картинок, запрашиваемых с сервера, количество подключённых CSS и JavaScript файлов и многое другое, вплоть до количества HTML-разметки.
Индексация. На правильную индексацию сайта влияет наличие файлов robots.txt и sitemap.xml. Первый отвечает за то, чтобы дать инструкции поисковому роботу, на какие файлы сайта смотреть он не должен (например, файлы относящиеся к админ-панели сайта). sitemap.xml это навигация по вашему сайту для ботов, по сути полный список ссылок, которые должны попасть в базу данных поиска.
Семантическая вёрстка. Семантическая вёрстка позволяет более качественно разбивать контент вашего ресурса. Благодаря семантическим тегам браузер, поисковая система и скринридеры могут понимать, какой контент за что отвечает.
Контент сайта. Любые медиаматериалы и текстовая информация — это то, за чем на ваш сайт зашёл пользователь. Если контент вашего сайта будет качественный, пользователю захочется сидеть на вашем сайте больше, возвращаться к нему. Также, поисковые системы проверяют содержимое сайта на плагиат и отдают приоритет уникальному контенту или первоисточникам, в случае наличия одинакового контента на разных ресурсах.
Адаптив под разные устройства. Большое количество пользователей сидят с мобильных устройств. Именно поэтому в сервисах от Google и Яндекс для веб-мастеров есть проверки на мобильную адаптацию вашего сайта. Адаптив сайта является важной частью современного веба и UI и UX дизайна и очень сильно влияет на ранжирование сайта в поисковой системе.
Доступность (a11y). Чем больше людей сможет посещать ваш сайт, комфортно его использовать, тем лучше и для пользователей, и для вашего сайта.
Метаразметка. Теги <title>, <meta></meta>, <meta></meta> и другие метатеги помогают и пользователям, и поисковикам. Часть метатегов отображается в карточке сайта в поисковой выдаче. Часть данных помогает поисковым системам ранжировать сайт лучше.
Open Graph разметка. Open Graph — это разметка страницы для красивого превью в социальных сетях. Она позволяет сделать карточку вашего сайта красивой и продуманной, привлекающей внимание.
Schema.org разметка. Она же микроразметка, которая уже отображается в карточке вашего сайта, когда он попадает в поисковую выдачу. Видов такой микроразметки много и под каждый тип страниц на вашем сайте можно подобрать свою, которая будет лучше вписываться в тематику страниц.</title>

Внешние факторы
К внешним факторам относятся ссылки с других ресурсов на ваш сайт и частота переходов на ваш сайт по ссылкам или из поисковой выдачи.

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

Многие SEO-специалисты делают так, но стоит помнить о том, что в поисковых системах реализованы алгоритмы борьбы со спамом ссылок и прочими попытками раскрутить сайт агрессивными методами. В случае, если поисковик посчитает купленные ссылки слишком «ненастоящими», он может понизить рейтинг вашего сайта.

Что уже не работает?
Поисковые системы существуют очень давно. Их алгоритмы не стоят на месте. Разработчики поисковых систем постоянно модифицируют их, стараясь сделать поиск более релевантным для пользователя. Благодаря постоянным модификациям в SEO-оптимизации появляются способы, которые уже устарели и не являются актуальными. О них стоит поговорить по двум причинам: во-первых, экскурс в историю расширит ваш кругозор, а во-вторых, чтобы знать, что действительно полезно, а что нет. Что же уже устарело?

Keywords. Meta-тег <meta></meta> часто использовался для поискового продвижения сайтов. Сейчас он является одним из реликтов SEO-продвижения. Поисковые системы давно убрали его из факторов ранжирования, так как этот метатег являлся одним из самых очевидных и простых способов использовать весь список ключевых слов подходящих странице. Это создавало очевидные проблемы: связь ключевых слов с контентом могла быть очень маленькой, спам.

Количество текста. Долгое время SEO-специалисты гнались за тем, чтобы на продвигаемых ими сайтах было как можно больше текстов. При этом в текстах учитывалась плотность ключевых слов и уникальность. Это действительно работало довольно долгое время, но, к счастью, осталось в прошлом. В современных реалиях писать текст на 30 000 символов, который ориентирован только на поисковую систему — не актуально. Поисковые системы больше стали уделять внимания поведенческим фактором и тому, читают ли пользователи эти тексты. Поэтому качество текста стало важнее всех остальных метрик текстов.

Временные ссылки. Методика продвижения ссылками актуальна и до сих пор, но раньше часто использовалась и другая методика — временные ссылки. Можно было арендовать у других сайтов места в сайдбарах, подвале или других статичных частях сайта, которые не менялись между страницами и платить за ссылку каждый месяц. Как правило, такая ссылка соседствовала с несколькими другими такими же ссылками на другие ресурсы. Выгодным было то, что многие сайты делались из расчёта на доход «здесь и сейчас», существовали они максимум год и в таком случае временные ссылки выходили дешевле.

Чёрное SEO — запрещённые методы поисковой оптимизации. Они весьма эффективны, если использовать их с умом, но зачастую дают хороший результат лишь на короткое время, после чего сайт попадает под санкции от поисковых систем. Что же входит в чёрное SEO?

Private Blog Network (BPN) — закрытая сеть ресурсов, которая может состоять из нескольких десятков сайтов одной тематики, направленных на то, чтобы продвигать один главный ресурс. Продвижение идёт через ссылки и упоминания главного ресурса. Основная сложность и особенность построения такой сети сайтов кроется в названии — Private. Такую сеть максимально маскируют, чтобы поисковые системы «думали», что сайты принадлежат разным людям.
Накрутка поведенческих факторов. Поведенческие факторы являются одним из самых сильных факторов ранжирования для поисковых систем. Исходя из этого были придуманы способы их накрутки. Это может происходить в автоматизированном режиме с реальных устройств, благодаря различным сервисам и скриптам. Но, к счастью, поисковые системы умеют понимать настоящих пользователей и ботов, поэтому при не аккуратном накручивании поведенческих факторов поисковая система быстро понимает, что пользователи не настоящие и сайт попадает под санкции.

Question 23

Q

Расскажи про формы?

Answer

A

Тег <form> добавляет на страницу форму, которую пользователь может заполнить. Сайты используют формы, чтобы получить какую-то информацию от пользователя. Это может быть форма заказа в онлайн-магазине или форма обратной связи. Пользователь заполняет поля или выбирает нужную опцию в списке, а после отправки формы эти данные можно обработать. На странице можно сделать сколько угодно форм. Но одновременно пользователь сможет отправить только одну заполненную форму.

Основным атрибутом у тега <form> является action — путь к файлу, где располагается обработчик данных. Именно туда уйдут данные после отправки формы.

action — здесь указывается ссылка на скрипт, который обработает форму. Это может быть полная URL-ссылка, а может быть относительная, типа html/sendform. Если не указать атрибут action, то страница будет просто обновляться каждый раз, когда отправляется форма.

method — может определять, каким способом будут отправлены на сервер данные, которые ввёл пользователь. Есть два варианта:

get — ответы пользователя дописываются в URL в формате «параметр=значение», например «email=name@yandex.ru». Выглядит это так: site.com/form?name=Max&email=name@yandex.ru. То есть параметр — это то, что вы спрашиваете у пользователя, а значение — его ответ. Пары «параметр=значение» разделяются знаком &. Вариант method=”get” используется по умолчанию, но у него есть ограничение: URL не должен получиться длиннее, чем 3000 символов.
post — данные из формы пакуются в тело формы и отправляются на сервер. В этом случае нет ограничений по объёму данных, поэтому этот способ подойдёт для заполнения базы данных или отправки файлов.
Ещё у атрибута method может быть третье значение — dialog. Если <form> находится внутри <dialog>, то поля формы не очищаются, а сама форма не делает запроса на сервер. Вместо этого, закрывается диалоговое окно.
name — уникальное имя формы. Пользователь его не увидит, зато скрипты смогут найти нужную форму. Например, по этому имени, можно получить доступ к форме из коллекции document.forms.</dialog>

autocomplete — включает или выключает автозаполнение для формы. Браузер может подставить данные, которые пользователь сохранил ранее, например, пароль, номер банковской карты или адрес. Если у пользователя в настройках браузера отключена функция автозаполнения, то этот атрибут уже ни на что не повлияет. Атрибут autocomplete можно задать и для конкретных элементов. Есть два значения:

on — значение по умолчанию. Включает автозаполнение для этой формы.
off — выключает автозаполнение. Например, если форма собирает уникальные данные типа капчи («Введите слово с картинки»).
novalidate — у этого атрибута нет значения. Если его добавить, браузер не будет проверять правильность заполнения формы. Например, верно ли введён адрес почты или URL для тегов <input></input> и <input></input> соответственно. Обычно браузер проверяет, не пропустили ли вы @ или домен. В том числе, проверяется и заполнение обязательных полей.

enctype — определяет, какой вид кодирования будет применён к данным из формы. Этот атрибут обязательно надо ставить, если через форму отправляются файлы, в остальных случаях — не обязательно. Есть три варианта кодирования:

application/x-www-form-urlencoded — это значение по умолчанию. Данные будут кодироваться так, что пробелы превратятся в знак +, а символы вроде кириллицы будут представлены в шестнадцатеричном значении. Например, так будет выглядеть имя Степан: %D0%A1%D1%82%D0%B5%D0%BF%D0%B0%D0%BD 🤡
multipart/form-data — вариант, который надо указать, если через форму отправляются файлы. В этом случае данные не кодируются.
text/plain — в этом случае пробелы меняются на +, а остальные символы передаются без изменений.
accept-charset — задаёт кодировку, в которой сервер принимает данные из формы. Самая распространённая кодировка — UTF-8. Можно указать один вариант или несколько. Например, accept-charset=”UTF-8 Windows-1251”. В этом случае названия кодировок нужно разделять пробелами. Здесь можно задать значение по умолчанию: accept-charset=”UNKNOWN”. Тогда кодировка будет такой, какая используется на странице с формой.

💡 Никогда не используйте method=”get”, если хочется отправить конфиденциальные данные, потому что их можно будет легко прочитать в запросе, который отправляет форма, и даже в адресной строке браузера.

💡 Вариант method=”get” удобен тем, что полученный URL с ответами можно сохранить в закладки. Например, пользователь может заполнить форму и поделиться ссылкой с результатами с кем-нибудь ещё.

Question 24

Q

Что делает атрибут autocomplete у формы?

Answer

A

Атрибут, при помощи которого форма заполняется в один клик — браузер подставит значения в соответствующие поля. Когда вы заполняете формы, браузер сохраняет те или иные данные — логины, пароли, адреса и e-mail. При заполнении очередной формы браузер идёт в список сохранённой информации, выуживает оттуда данные, которые требуются для этой формы, и вставляет в соответствующие поля.

Атрибут autocomplete пишется внутри открывающего тега, и в кавычках прописывается его значение.

Кроме элемента <form>, вы можете указать этот атрибут для любого поля, которое требует ввода данных — <input></input>, принимающий на вход текст или число, <select> или <textarea>.</textarea></select>

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

Включение и выключение автозаполнения
off — отключает автозаполнение.
on — значение по умолчанию; разрешает автозаполнение.

Авторизация
nickname — никнейм.
username — имя пользователя или название аккаунта.
email — адрес электронной почты.
current-password — текущий пароль пользователя.
new-password — новый пароль.
one-time-code — одноразовый код для верификации пользователя.

Формы имени
name — полное имя.
given-name — имя (в странах, где дают два имени, это первое имя).
additional-name — второе имя (для стран, где дают два имени).
family-name — фамилия.
honorific-prefix — звание или префикс для обращения, например, «Mrs.», «Mr.», «Miss», «Ms.», «Dr.», «Mlle.».
honorific-suffix — окончание имени, например, «Jr.», «B.Sc.», «PhD.», «IV», «мл.».

Данные банковской карты и деньги
cc-given-name — имя (в странах, где дают два имени, это первое имя), как на банковской карте.
cc-additional-name — второе имя, как на банковской карте (для стран, где дают два имени).
cc-family-name — фамилия, как на банковской карте.
cc-name — полное имя в том виде, как оно указано на банковской карте.
cc-csc — код безопасности (три цифры на обороте карты).
cc-exp — месяц и год окончания срока действия карты.
cc-exp-month — месяц окончания срока действия карты.
cc-exp-year — год окончания срока действия карты.
cc-number — номер банковской карты или счёта.
cc-type — платёжная система.
transaction-amount — сумма перевода.
transaction-currency — валюта перевода.

Личные данные
bday — полная дата рождения.
bday-day — день рождения (число).
bday-month — месяц рождения.
bday-year — год рождения.
language — язык в формате языкового тега из списка BCP 47.
sex — пол или гендер.
organization — название организации.
organization-title — профессия или должность в организации.
photo - url-адрес изображения.

Адрес
address-level1 — административная единица первого уровня. Обычно это название области, региона или штата.
address-level2 — административная единица второго уровня. В странах с двумя уровнями это чаще всего название населённого пункта.
address-level3 — административная единица третьего уровня.
address-level4 — административная единица четвёртого уровня, если адрес её содержит.
address-line1, address-line2, address-line3 — отдельные строки для адресов, которые используются, если нет поля со значением street-address.
country — код страны.
country-name — страна.
street-address — адрес, начиная с улицы. Не должен содержать название города, страны и индекс.
postal-code — почтовый индекс.

Телефон
tel — полный номер телефона, включая код страны.
tel-area-code — телефонный код региона страны.
tel-country-code — телефонный код страны.
tel-extension — добавочный номер.
tel-local — номер телефона без кодов страны и региона.
tel-local-prefix — номер локальной АТС.
tel-local-suffix — номер абонента внутри сети АТС.
tel-national — номер телефона без кода страны.

Ссылки
impp — адрес сервера для мессенджера, например, xmpp:username@example.net.
url — адрес сайта.

Подсказки
💡 Автозаполнение может быть отключено в настройках браузера.
💡 Если автозаполнение не отключено в браузере и атрибут autocomplete не прописан в теге, то его значение по умолчанию принимается за on.
💡 Если задать autocomplete=”on” для <form>, то это сработает для всех вложенных элементов формы.
💡 Значение атрибута может перебиваться значениями, прописанными в дочерних элементах.
💡 Для правильного автозаполнения желательно, чтобы:
- у элементов <input></input>, <select> и <textarea> были прописаны атрибуты name или id;
- они были обёрнуты в тег <form>;
- сама форма имела кнопку отправки — <input></input> или <button> с атрибутом type="submit".
💡 Если пользователь должен ввести имя, рекомендуется использовать значение autocomplete="name" вместо разделения на поля с отдельными частями имени, потому что имена могут иметь совершенно разную структуру.
💡 По той же причине рекомендуется использовать значение autocomplete="cc-name", если нужно вводить данные банковской карты.
💡 При создании нового аккаунта или изменении пароля следует использовать autocomplete="new-password" для полей «Введите новый пароль» и «Подтвердите новый пароль», но не для поля «Введите текущий пароль». Это сделано, чтобы случайно не вписать существующий пароль, а также предложить помощь в создании безопасного пароля.</button></textarea></select>

Question 25

Q

Расскажи про атрибут novalidate у формы?

Answer

A

Атрибут отключает нативную валидацию формы со стороны браузера.

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

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

При помощи атрибута novalidate браузер можно просто попросить не вмешиваться — например, вместо того чтобы убирать атрибуты required с полей или даже заменять <form> на <div>. Этим атрибут позволяет сохранить семантически верный и доступный код.

💡 Проверка введённых данных происходит только при попытке отправить форму.

💡 Независимо от наличия атрибута novalidate, к полям формы (как и к самой форме и её филдсетам) в любом случае будут применяться псевдоклассы :invalid/:valid.

💡 Эффект атрибута novalidate схож с эффектом атрибута formnovalidate, который можно применить к кнопке отправки формы — <button>, <input></input> или <input></input>. Он тоже даёт браузеру указание закрыть глаза на валидацию.</button>

Question 26

Q

Как сделать многострочное поле ввода?

Answer

A

Тег <textarea> используется для создания многострочного поля ввода. Например, поля ввода комментария. При необходимости поле может иметь изменяемый размер.</textarea>

<label>Расскажите о себе:</label>

<textarea>Frontend-разработчик со стажем</textarea>

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

Значения атрибута:
on — поле будет автоматически заполняться значением, сохранённым в браузере во время предыдущей отправки формы
off — поле не будет заполняться браузером автоматически. Также, это значение нужно использовать, если документ предоставляет собственный метод автозаполнения полей.
Если атрибут не указать совсем, то браузер будет брать значение из атрибута autocomplete родительского элемента <form>, либо — если родительской формы нет — из той формы, на id которой ссылается атрибут form.

autofocus
Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён в данное поле ввода.

cols
Задаёт ширину поля ввода в символах. Если атрибут задан, то должен иметь значением целое положительное число. Если не задан, то по умолчанию берётся как 20

disabled
Атрибут булевого типа. Если задан, то поле отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например у контейнера <fieldset> или <form>). Если ни у одного предка вверх по дереву этот атрибут не задан, то поле доступно для редактирования. При отправке формы значения из disabled-полей не будут отправлены.

form
Атрибут указывает на элемент <form>, с которым связано поле ввода. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то <textarea> обязательно должен находиться внутри тега form>. Но если задать атрибут, то нахождение внутри формы не обязательно и <textarea> может находиться в любом месте страницы.</textarea></textarea>

maxlength
Максимальное число символов в поле (включая пробелы и переводы строк), которое может вводить пользователь. Значением должно быть положительное целое число

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

name
Имя поля. При отправке формы значение атрибута name будет ключом в отправляемом объекте

placeholder
Подсказка для пользователя, что вводить в этом поле. Если подсказка должна быть многострочной, то можно прямо в HTML-коде переносить строки. Плейсхолдер должен давать только подсказку о том, как надо заполнять поле. Но это не полноценная замена тегу <label>.</label>

readonly
Атрибут булевого типа. Если он задан, то пользователь не может редактировать текст в поле, но по-прежнему может с ним взаимодействовать: кликать, копировать текст. При отправке формы значение поля будет отправлено как обычно.

required
Атрибут булевого типа. Указывает, должно ли поле обязательно быть заполнено. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку

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

spellcheck Скопировать ссылку “spellcheck”
Атрибут указывает, должна ли быть включена проверка правописания в поле. Может принимать следующие значения:

true — проверка правописания включена

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

false — проверка правописания выключена

wrap
Атрибут определяет, будут ли добавлены символы переноса строк текста при отправке формы. Может принимать значения:
hard — когда форма отправляется, то браузер, основываясь на значении атрибута cols добавляет в текст служебные символы переноса строки (CR+LF). Таким образом, сохраняется информация о переносах строк, сделанных пользователем в поле ввода.
soft — значение по умолчанию. При отправке формы символы переноса строк добавлены не будут, и текст будет отправлен одной длинной строкой

💡 Поле <textarea> стилизуется так же, как и поле ввода <input></input>. К нему применимы все свойства блочной модели.
💡 По умолчанию поле ввода <textarea> может изменять свой размер, если потянуть за нижний правый угол. Это поведение можно изменить, управляя CSS-свойством resize.</textarea></textarea>

Question 27

Q

Расскажи про Flexbox

Answer

A

CSS Flexbox — это технология для создания гибких макетов за счёт различного размещения элементов на странице.

display: flex - определяет flex контейнер; inline или block в зависимости от заданного значения. Включает flex контекст для всех потомков первого уровня.
flex-direction - устанавливает основную ось, таким образом определяя направление flex элементов, помещаемых в flex контейнер. Flexbox — это (помимо дополнительной упаковки) концепция однонаправленного макета.
row (по умолчанию): слева направо в ltr; справа налево в rtl
row-reverse: справа налево в ltr; слева направо в rtl
column: так же, как и row, но сверху вниз
column-reverse: то же самое, row-reverse, но снизу вверх
flex-wrap - По умолчанию гибкие элементы будут пытаться уместиться на одной строке. Вы можете изменить это и позволить элементам переходить на новую строку по мере необходимости с помощью этого свойства.
nowrap (по умолчанию): все flex элементы будут в одной строке.
wrap: flex-элементы будут перенесены на несколько строк сверху вниз.
wrap-reverse: flex-элементы будут перенесены на несколько строк снизу вверх.
flex-flow (Применяется к: родительскому элементу flex-контейнера) - сокращение для flex-direction и flex-wrap свойств: flex-flow: || .
justify-content - определяет выравнивание вдоль главной оси. Есть также два дополнительных ключевых слова, которые вы можете связать с этими значениями: safe и unsafe. Использование safe гарантирует, что элементы не будут отображаться за пределами экрана таким образом, чтобы содержимое не могло быть прокручено (это называется «потеря данных»).
flex-start (по умолчанию): элементы сдвинуты в начало flex-direction направления.
flex-end: элементы сдвинуты ближе к концу flex направления.
center: элементы центрированы вдоль линии.
space-between: элементы равномерно распределены по линии; первый элемент находится в начале строки, последний элемент в конце строки.
space-around: элементы равномерно распределены по линии с одинаковым пространством вокруг них. Обратите внимание, что визуально пространства могут различаться, так как все элементы имеют одинаковое пространство с обеих сторон, а первый и последний элементы имеют половину пространства.
space-evenly: элементы распределяются таким образом, чтобы расстояние между любыми двумя элементами (и расстояние до краев) было одинаковым.
start: элементы сдвинуты к началу writing-mode направления.
end: элементы сдвинуты в конце writing-mode направления.
left: элементы сдвинуты по направлению к левому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.
right: элементы сдвинуты по направлению к правому краю контейнера, если это не имеет смысла flex-direction, тогда он ведет себя как start.
align-items - Это свойство определяет поведение по умолчанию того, как flex элементы располагаются вдоль поперечной оси на текущей линии. Тут тоже могут быть использованы safe и unsafe.
stretch (по умолчанию): растягивать, чтобы заполнить контейнер (все еще соблюдаются min-width / max-width).
flex-start / start / self-start: элементы размещаются в начале поперечной оси. Разница между ними невелика и заключается в соблюдении flex-direction правил или writing-mode правил.
flex-end / end / self-end: элементы располагаются в конце поперечной оси. Разница опять-таки тонкая и заключается в соблюдении flex-direction или writing-mode правил.
center: элементы центрированы по поперечной оси.
baseline: элементы выровнены по их базовой линии.
align-content - Это свойство выравнивает линии в пределах flex контейнера, когда есть дополнительное пространство на поперечной оси, подобно тому, как justify-content выравнивает отдельные элементы в пределах главной оси.
flex-start / start: элементы сдвинуты в начало контейнера. Более поддерживаемый flex-start использует flex-direction, в то время как start использует writing-mode направление.
flex-end / end: элементы сдвинуты в конец контейнера. Более поддерживаемый flex-end использует flex-direction, в то время как end использует writing-mode направление.
center: элементы выровнены по центру в контейнере.
space-between: элементы равномерно распределены; первая строка находится в начале контейнера, а последняя — в конце.
space-around: элементы равномерно распределены с равным пространством вокруг каждой строки.
space-evenly: элементы распределены равномерно, вокруг них одинаковое пространство.
stretch (по умолчанию): линии растягиваются, чтобы занять оставшееся пространство.
align-self - Это свойство позволяет переопределить выравнивание по умолчанию (или указанное с помощью align-items) для отдельных элементов flex.
flex-basis - Это свойство определяет размер элемента по умолчанию перед распределением оставшегося пространства. Это может быть длина (например, 20%, 5rem и т.д.) Или ключевое слово. Ключевое слово auto означает «смотри на мое width или height свойство». Ключевое слово content означает «размер на основе содержимого элемента» — это ключевое слово все еще не очень хорошо поддерживается, так что трудно проверить что для него используется max-content, min-content или fit-content. Если установлено значение 0, дополнительное пространство вокруг содержимого не учитывается. Если установлено значение auto, дополнительное пространство распределяется в зависимости от его flex-grow значения.
flex-grow: определяет способность flex элемента растягиваться в случае необходимости. Оно принимает значение от нуля, которое служит пропорцией. Если для всех элементов flex-grow установлено значение 1, оставшееся пространство в контейнере будет равномерно распределено между всеми дочерними элементами. Если один из дочерних элементов имеет значение 2, этот элемент займет в два раза больше места, чем остальные (или попытается, по крайней мере).
flex-shrink: Это свойство определяет способность гибкого элемента сжиматься при необходимости.
flex: Это сокращение для использования flex-grow, flex-shrink и flex-basis вместе. Второй и третий параметры (flex-shrink и flex-basis) являются необязательными.

Question 28

Q

Расскажи про Grid

Answer

A

CSS Grid - это мощная система разметки, позволяющая создавать гибкие и сложные макеты на веб-странице. Она основана на концепции сетчатки (grid), где элементы располагаются в ячейках, определенных с помощью сетки.

Для работы с CSS Grid используются следующие свойства:

display: grid; - задает элементу контейнерную сетку.
grid-template-columns: - определяет количество и размеры столбцов в сетке. Можно указать значение в пикселях, процентах или других единицах измерения. Например, grid-template-columns: 1fr 2fr 1fr; создаст три столбца, из которых средний будет занимать в два раза больше места.
grid-template-rows: - определяет количество и размеры строк в сетке. Работает аналогично grid-template-columns, но применяется к строкам.
grid-gap: - определяет пространство между ячейками сетки. Можно указать значение в пикселях, процентах или других единицах измерения. Например, grid-gap: 10px; создаст промежуток шириной 10 пикселей между ячейками.
column-gap используется для добавления отступа между колонками.
row-gap используется для добавления отступов между рядами.
grid-template-areas: - задает расположение ячеек с помощью именованных областей. Например,

grid-template-areas: "header header header" "sidebar main main" "footer footer footer";

grid-column-start: и grid-column-end: - определяют начальную и конечную позиции столбцов для элемента. Можно указывать числовое значение или ключевое слово span с числом, указывающим количество ячеек сетки.
grid-row-start: и grid-row-end: - определяют начальную и конечную позиции строк для элемента. Работают аналогично grid-column-start и grid-column-end.
justify-items: - выравнивает содержимое ячеек вдоль оси столбцов. Можно использовать значения start, end, center и другие.
align-items: - выравнивает содержимое ячеек вдоль оси строк. Можно использовать значения start, end, center и другие.
justify-content: - выравнивает сетку вдоль оси столбцов. Можно использовать значения start, end, center, space-around и другие.
align-content: - выравнивает сетку вдоль оси строк. Можно использовать значения start, end, center, space-around и другие.
justify-self: - выравнивает содержимое отдельного элемента вдоль оси столбцов. Можно использовать значения start, end, center и другие для каждого элемента в сетке отдельно.
align-self: - выравнивает содержимое отдельного элемента вдоль оси строк. Можно использовать значения start, end, center и другие для каждого элемента в сетке отдельно.
grid-auto-columns: - определяет размер автоматически созданных столбцов в сетке.
grid-auto-rows: - определяет размер автоматически созданных строк в сетке.
grid-auto-flow: - определяет, как новые элементы будут размещаться на сетке при превышении заданных столбцов и строк. Можно использовать значения row, column и dense.

Question 29

Q

Какие есть принципы семантической верстки?

Answer

A

Использование подходящих HTML-тегов для разметки различных элементов веб-страницы.
Организация иерархии и структуры контента с помощью правильного вложения тегов и использования семантических контейнеров.
Использование значимых атрибутов HTML для явного указания смысла или значения элементов.
Корректное использование и разметка форм, включая метки, поля ввода, кнопки и другие элементы форм.
Избегание использования элементов только из-за их визуальных или стилевых свойств.
Создание доступной верстки, учитывая использование атрибутов для улучшения доступности, явное описание элементов, предоставление альтернативного контента для изображений и другие принципы доступности.

Question 30

Q

Какую функцию выполняет элемент doctype?

Answer

A

Элемент <!DOCTYPE> передает браузеру информацию о типе данного документа - DTD. Другими словами, передает инструкции браузеру о версии языка HTML, на которой написан документ. Это дает возможность браузеру выбрать правильный вариант интерпретации содержимого документа.

<!DOCTYPE> необходимо ставить самым первым элементом в HTML документе, перед открывающим тегом <html> (документ должен начинаться с DOCTYPE).

<!DOCTYPE html>

Question 31

Q

Опишите разницу между

 ,  и

Answer

A

script — начнет загружать файл JS, как только встретит его, при этом загрузка браузером оставшейся части HTML страницы, продолжится после того, как будет выполнен js скрипт.

script-async — браузер не остановит обработку HTML страницы, а будет читать ее дальше. После того как скрипт загрузится — он выполнится, не дожидаясь загрузки всей HTML страницы. Если скриптов несколько — первым отработает тот, который быстрее загрузится.

При использовании script-defer — также будет асинхронное выполнение скрипта, но в отличие от script-async — первым сработает тот скрипт, который встретился раньше. Еще одно отличие от async — это то, что script-defer сработает, когда вся страница HTML будет обработана браузером.

Question 32

Q

За что отвечает атрибут srcset в тэге <img></img> ? Объясните, каким образом браузер обрабатывает значение этого атрибута.

Answer

A

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

Question 33

Q

Расскажи про float

Answer

A

float - это CSS свойство, которое определяет, как элемент будет выровнен вдоль горизонтальной оси в потоке содержимого. Определяет сторону, по которой будет выровнен элемент. Соседние элементы будут «обтекать» такой элемент по противоположной стороне. При использовании значения float для элемента, элемент будет “плавать” или “плыть” влево или вправо в пределах доступного пространства.

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

Еще одно распространенное использование float - создание макетов с использованием метода “float-основанных колонок”. При этом элементы могут плавать рядом друг с другом и занимать доступное горизонтальное пространство.

Однако, float также имеет свои ограничения и негативные эффекты. Использование float может сложно контролировать поведение элементов, приводить к потере высоты родительского элемента, а также требовать дополнительных мер для исправления проблем с позиционированием.

В современных подходах к веб-разработке часто применяются альтернативные методы верстки, такие как CSS Flexbox или CSS Grid, для более удобного размещения элементов на странице.

Question 34

Q

Какая разница между элементами div и span?

Answer

A

Элементы <div> и <span> являются универсальными контейнерами в HTML.</span>

<div> — это блочный элемент (block-level element). Он занимает всю доступную ширину родительского контейнера и начинается с новой строки.

<span> — это строчный элемент (inline-level element). Он занимает только столько места, сколько нужно для его содержимого, и не начинает новую строку.
</span></div>

Question 35

Q

Что такое валидация? И какие типы проверок HTML документа вы знаете? Основные этапы проверок валидности HTML-документа?

Answer

A

Валидация — это проверка HTML-документа на соответствие стандартам W3C (Консорциума Всемирной паутины). Она помогает выявить синтаксические ошибки, некорректное использование тегов и атрибутов, которые могут привести к проблемам с отображением страницы в браузерах.

Синтаксическая проверка
Проверяет:
Корректность закрытия тегов (<p></p>, а не <p><div></p></div>).
Правильную вложенность элементов.
Наличие обязательных атрибутов (например, alt у <img></img>).
Проверка на соответствие DTD (Document Type Definition)
DTD определяет структуру документа (например, <!DOCTYPE html> для HTML5). Проверяет:
Разрешённые теги и атрибуты.
Корректность использования элементов в соответствии с выбранным DOCTYPE.
Проверка семантики
Проверяет, правильно ли используются теги по их назначению:

<header>, <footer>, <article> — для структуры.
<strong>, <em> — для акцентов, а не <b>, <i>.

4. Кросс-браузерная проверка
Убеждается, что документ корректно отображается в разных браузерах (Chrome, Firefox, Safari, Edge).

5. Проверка доступности (Accessibility, a11y)
Соответствие стандартам WCAG (например, наличие alt у изображений, правильные ARIA-атрибуты).

Валидацию проводят:
Онлайн-валидатор W3C (validator.w3.org) — основной инструмент.
Расширения для браузеров (например, Web Developer Toolbar).
Линтеры в редакторах кода (ESLint, HTMLHint).

Зачем нужна валидация?
✅ Корректное отображение во всех браузерах.
✅ Улучшение SEO (поисковики учитывают валидность кода).
✅ Повышение доступности (a11y) для людей с ограниченными возможностями.
✅ Быстрая загрузка (невалидный код может замедлять рендеринг).
</i></b></em></strong></article></footer></header>

Question 36

Q

Что такое поток документа

Answer

A

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

Даже если к странице не подключено никаких стилей, к каждому элементу всё равно будут применяться CSS-правила, «зашитые» в движке браузера. Благодаря этим правилам заголовок <h1> крупнее заголовка <h2>, а ссылки — синие и подчёркнутые. На основании этих правил условно все элементы на странице можно разделить на две категории: блочные (block) и строчные (inline). Например, <div> будет блочным, а <span> или <a> — строчным. Поменять стандартное поведение можно при помощи CSS-свойства display.</a></span>

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

Правила расположения строчных и блочных элементов в нормальном потоке называются контекстом форматирования. Блочные элементы участвуют в формировании блочного контекста форматирования. Строчные элементы формируют строчный контекст форматирования. Расположение элементов в контексте форматирования зависит от направления письма для конкретного языка. Например, тексты на европейских языках мы читаем и пишем слева направо сверху вниз. Это означает, что по умолчанию контекст форматирования располагает блочные элементы сверху вниз, а строчные — слева направо. Но, например, в случае с восточноазиатскими языками, такими как китайский, японский и корейский, когда используется вертикальное письмо, мы видим совершенно другую картину: блочные элементы будут располагаться справа налево, а строчные — сверху вниз.

Блочные элементы в нормальном потоке располагаются друг под другом, всегда занимая всю доступную ширину родителя. Высота блочного элемента по умолчанию равна высоте его содержимого. Три абзаца, идущие друг за другом в HTML, будут располагаться точно в таком же порядке и на странице. Даже если ширина блочного элемента явно задана и позволяет разместить справа ещё один такой элемент, поток всё равно продолжит выстраивать их друг под другом.

Строчные элементы располагаются друг за другом, как слова в предложении. В зависимости от направления письма в конкретном языке элементы могут располагаться слева направо (например, в русском языке), справа налево (как, например, в иврите) и даже сверху вниз (как иероглифы и знаки слоговых азбук в японском вертикальном письме). Ширина и высота строчного элемента равна ширине и высоте содержимого. В отличие от блочного элемента, мы не можем управлять шириной и высотой строчного элемента через CSS. Несколько строчных элементов будут стремиться уместиться на одной строке, насколько хватает ширины родителя. Если ширины родителя не хватает, то лишний текст строчного элемента переносится на следующую строку.

В рамках блочного контекста форматирования вертикальные расстояния между блоками задаются CSS-свойством margin. Если блоку задан нижний отступ, а следующему за ним — верхний, то можно ожидать, что итоговый отступ между блоками будет равен сумме этих двух отступов. Но в соответствии со спецификацией соприкасающиеся отступы «схлопываются». То есть как бы проваливаются один в другой. Итоговый отступ будет равен бо́льшему отступу из двух.

Выпадение отступов из родителя можно предотвратить несколькими способами, например:
Задать родителю вертикальный внутренний отступ padding-top или padding-bottom в зависимости от того, с какой стороны мы хотим предотвратить выпадение.
Задать родителю верхнюю или нижнюю рамку по такой же логике. Рамка может быть прозрачной, главное, чтобы она была :)
Задать родителю свойство overflow со значением, отличным от visible.
Переопределить родителю свойство display на flow-root, либо на flex или grid (но в последнем случае его потомки будут раскладываться уже не по правилам нормального потока, а по правилам флексбоксов и грид-раскладки соответственно).

Выход из потока
Ранее мы выяснили, что все элементы по умолчанию находятся в нормальном потоке. Но это поведение можно поменять при помощи некоторых CSS-свойств. При изменении значений этих свойств элемент перестаёт взаимодействовать с остальными блоками в потоке. Говорят, что он «вышел из потока». Тут нужно отметить, что элементы, вышедшие из потока, создают внутри себя своего рода мини-поток. Их дочерние элементы будут подчиняться правилам взаимодействия в потоке в пределах родителя.

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

Позиционирование элемента при помощи position
Если задать элементу абсолютное или фиксированное позиционирование, это также приводит к выходу из потока. Но только в этом случае наш элемент не участвует даже в строчном контексте.

Question 37

Q

Есть ли у HTML элементов свои дефолтные специфичные стили?

Answer

A

Да, у всех HTML-элементов есть стандартные (user agent) стили, которые браузеры применяют по умолчанию. Они обеспечивают базовое отображение элементов, даже если CSS не подключен.

Чтобы эти стили не применялись используют сброс стилей или normalize.css.

a {
color: #0000EE; /* Синий цвет /
text-decoration: underline; / Подчёркивание /
}
a:visited { color: #551A8B; } / Фиолетовый для посещённых */

Question 38

Q

Почему хорошей практикой считается располагать <link></link> для подключения CSS стилей внутри тэга <head>, а

 для подключения JS ставить перед закрывающимся тэгом </body>?

Answer

A

CSS в <head> — для быстрого рендеринга
Причины:
Блокировка рендеринга (Render Blocking). Браузер не отобразит контент, пока не загрузит и не обработает CSS (чтобы избежать “мелькания нестилизованного контента” — FOUC). Размещение <link></link> в <head> гарантирует, что стили начнут загружаться как можно раньше.

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

Что будет, если подключить CSS в конце <body>?
Страница сначала отобразится без стилей (FOUC), затем перерисуется.
Ухудшение пользовательского опыта (UI “прыгает”).

JS перед </body> — для ускорения загрузки
Причины:
Блокировка парсинга HTML (Parser Blocking). Когда браузер встречает

, он останавливает парсинг HTML до загрузки и выполнения скрипта (если нет атрибутов async/defer). Размещение скриптов в конце позволяет сначала загрузить видимый контент.

Доступ к DOM. Если скрипты работают с DOM (например, document.querySelector), они должны выполняться после создания DOM-дерева. Подключение перед </body> гарантирует, что весь HTML уже загружен.

Альтернативы: async и defer
Если скрипт должен быть в <head>:

 — загружается параллельно и выполняется сразу после загрузки (порядок не гарантирован).
 — загружается параллельно, но выполняется после полного парсинга HTML (сохраняет порядок).

Question 39

Q

Что такое элемент <canvas>? И для чего он используется?</canvas>

Answer

A

<canvas> — это HTML-элемент, который создаёт растровую область для рисования с помощью JavaScript. Он используется для генерации графики, анимаций, игр, обработки фото и других динамических визуальных эффектов прямо в браузере.
<canvas>
Ваш браузер не поддерживает canvas. 
</canvas>

Основные возможности:
Рисование 2D-графики (фигуры, текст, изображения).
Создание анимаций (например, игры или визуализации данных).
Обработка изображений (фильтры, обрезка, пиксельные манипуляции).
Работа с WebGL (3D-графика через JavaScript API).
</canvas>

Question 40

Q

Разница между <canvas> и <svg>? В каких случаях лучше использовать <canvas>s, а в каких <svg>? Плюсы и минусы <canvas> и <svg>?</svg></canvas></svg></canvas></svg></canvas>

Answer

A

<canvas> — это HTML-элемент для рисования растровой графики через JavaScript. Он создает пиксельную область, в которой можно динамически генерировать изображения.

</canvas>

Плюсы:
Высокая производительность – идеален для сложной анимации, игр и обработки изображений.
Гибкость – можно рисовать что угодно: от простых фигур до сложных визуальных эффектов.
WebGL – поддерживает 3D-графику через API WebGL (Three.js, Babylon.js).

Минусы:
Нет встроенной интерактивности – нельзя просто навесить onclick на элемент, нужно вручную считать координаты.
При увеличении масштаба изображение теряет качество.
Сложнее для SEO – содержимое генерируется скриптами, поисковики его хуже анализируют.

Когда использовать?
Игры (2D/3D).
Динамическая графика (графики в реальном времени, визуализация данных).
Фотофильтры и пиксельные манипуляции.

<svg> (Scalable Vector Graphics) — векторный формат на основе XML. Графика описывается тегами (<circle>, <path>) и стилизуется CSS.

</path></circle></svg>

Плюсы:
Векторное масштабирование – можно увеличивать без потери качества.
Встроенная интерактивность – элементы поддерживают события (click, hover).
Семантичность и доступность – легко интегрируется с ARIA, подходит для иконок и инфографики.
Анимации через CSS/SMIL – не требует JavaScript для простых эффектов.

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

Когда использовать?
Иконки и логотипы (Font Awesome, SVG-спрайты).
Интерактивные диаграммы (D3.js).
Масштабируемые интерфейсы (кнопки, элементы UI).

Что выбрать?

<canvas> – если нужна высокая производительность (игры, динамика) или работа с пикселями.

<svg> – если важны масштабируемость, интерактивность и простота (иконки, графика).
</svg></canvas>

Question 41

Q

Что такое элемент <output> в HTML5?</output>

Answer

A

Тег <output> позволяет выводить результаты вычислений или действий пользователя. Относится к элементам семантической вёрстки.</output>

У тега есть встроенная роль status. Благодаря ей скринридеры и другие вспомогательные технологии автоматически зачитывают содержимое тега, когда оно обновляется. Это делает часть страницы интерактивной или «живой» областью.

<form>
<label>
Для скольких людей приготовить яичницу:
</label>
<input></input>
<p>Необходимое количество яиц:</p>
<output></output>
</form>

Элемент <output> используется в тех случаях, когда пользователю надо показать результат работы программы в реальном времени, например:</output>

информация, которую пользователь вводит или изменяет в форме;
вывод расчётов по данным, которые указал пользователь (калькулятор, гороскоп и тому подобное);
всплывающие уведомления — тосты.

for — значением может быть один или несколько ID, разделённые пробелом. Указывает на связь перечисленных элементов ввода (например, <input></input>) с элементом <output>.
form — указывается ID формы в этом же документе, с которой связывается поле вывода.
name — имя поля вывода. Используется для подписи результата при отправке формы.
Чтобы тег работал во всех браузерах и со всеми скринридерами корректно, рекомендуют явно задавать ему role="status".</output>

Question 42

Q

Что такое атрибут target? Какие значения он принимает?

Answer

A

target — это атрибут, который определяет, где открывать ссылку (<a>) или результат отправки формы (<form>).</a>

🔹 Где применяется?
В ссылках (<a>).
В формах (<form target="...">).
В тегах <base></base> (задает target по умолчанию для всех ссылок на странице).</a>

Основные значения атрибута target
_self (значение по умолчанию)
Открывает ссылку/форму в текущей вкладке/окне.
<a>Открыть здесь</a>
_blank
Открывает ссылку/форму в новой вкладке или окне.
<a>Открыть в новой вкладке</a>
_parent
Открывает в родительском фрейме (если страница вложена во <iframe>).
Если фреймов нет, работает как _self.
<a>Открыть в родительском фрейме</a>
_top
Открывает в полном окне браузера, выходя из всех фреймов.
Если фреймов нет, работает как _self.
<a>Выйти из фреймов</a>

Question 43

Q

Как семантически верно сверстать навигационное меню?

Answer

A

<nav>
<ul>
<li><a>Главная</a></li>
<li><a>О нас</a></li>
<li><a>Контакты</a></li>
</ul>
</nav>

Question 44

Q

Что такое <iframe>?

Answer

A

Question 45

Q

Для чего используются тэги _{и ^?}

Answer

A

Эти теги предназначены для отображения текста в нижнем (_{) (H₂O, xₙ) и верхнем (^{) индексе (E=mc², сноски¹). Они используются в научных, математических, химических формулах, а также для обозначения сносок и других специальных символов.}}

Question 46

Q

Как можно скрыть элемент разметки не используя CSS и JS?

Answer

A

Самый простой и семантически правильный способ сделать это через атрибут hidden

<div>Этот элемент скрыт</div>

Элемент не отображается и не занимает место (аналог display: none).
Поддерживается всеми современными браузерами.
Элемент остается в DOM, но невидим.

Question 47

Q

Разница между <meter> и <progress>?</progress></meter>

Answer

A

В HTML элементы <meter> и <progress> используются для визуального отображения значений, но они имеют разные семантические цели и применения:</progress></meter>

<progress> (прогресс)
Назначение: Отображает ход выполнения задачи (процесса), который может быть как определённым, так и неопределённым.

Использование:
Загрузка файла, выполнение скрипта, ожидание операции.
Может показывать неопределённый прогресс (если value не задан).

Атрибуты:
value – текущее значение прогресса (число).
max – максимальное значение (по умолчанию 1).

Пример:
<progress>70%</progress> 
<progress>Идёт загрузка...</progress> 

2. <meter> (измеритель)
Назначение: Отображает статическое значение в заданном диапазоне (например, уровень заполненности, рейтинг, использование диска).

Использование:
Показывает измеряемую величину, а не прогресс выполнения.
Может иметь оптимальные, допустимые и критические зоны (через low, high, optimum).

Атрибуты:
value – текущее значение (обязательно).
min / max – границы диапазона (по умолчанию 0 и 1).
low, high, optimum – для цветового выделения зон.

Пример:
<meter>3/10</meter> 
<meter>60%</meter> 
</meter></progress>

Question 48

Q

Разница между кнопкой и ссылкой в HTML?

Answer

A

В HTML кнопка (<button>) и ссылка (<a>) выполняют разные функции, хотя внешне могут выглядеть похоже.</a></button>

Кнопка (<button>) используется для выполнения действий на странице, таких как отправка формы, открытие модального окна или запуск JavaScript-функции. Она не перезагружает страницу и не ведёт на другой URL, если только это не прописано в скрипте. Кнопка может быть частью формы и имеет атрибуты type=”submit”, type=”reset” или type=”button”, которые определяют её поведение.</button>

Ссылка (<a>) предназначена для навигации — перехода на другую страницу, раздел текущей страницы (якорь) или внешний ресурс. Она всегда содержит атрибут href, указывающий адрес, куда нужно перейти. Если ссылка используется для JavaScript-действий без перехода, её делают кликабельной с href=”#” или javascript:void(0), но это не рекомендуется — в таких случаях лучше использовать <button>.</button></a>

Question 49

Q

Для чего используется атрибут decoding?

Answer

A

Атрибут decoding в HTML используется для управления тем, как браузер декодирует и отображает изображения (<img></img>), что особенно важно для оптимизации производительности и визуального восприятия.

Значения атрибута decoding:

sync (синхронно)
Браузер декодирует изображение немедленно, блокируя отрисовку страницы до завершения.
Когда использовать: Если изображение критично для макета (например, логотип в шапке сайта).

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

auto (по умолчанию)
Браузер сам выбирает стратегию (обычно ведёт себя как sync для изображений в области просмотра).

Используйте decoding=”async” для большинства изображений, кроме ключевых (например, героев баннеров).

Question 50

Q

Для чего используют атрибут inputmode?

Answer

A

Атрибут inputmode в HTML указывает браузеру, какой тип виртуальной клавиатуры показывать пользователю при вводе данных в поле (<input></input> или <textarea>). Это особенно полезно для мобильных устройств, где экранная клавиатура адаптируется под ожидаемый тип ввода, улучшая UX.</textarea>

none
Полностью отключает виртуальную клавиатуру. Используется, когда ввод осуществляется не через клавиатуру (например, сканером штрих-кода или голосовым вводом).
text
Стандартная текстовоая клавиатура с буквами, цифрами и символами. Подходит для обычного текста: имен, комментариев, многострочного ввода.
decimal
Цифровая клавиатура с десятичным разделителем (точка или запятая, зависит от локали). Идеально для цен, дробных чисел и других числовых значений с дробной частью.
numeric
Цифровая клавиатура только с цифрами (0-9). Подходит для PIN-кодов, возраста, порядковых номеров - там, где не нужны дробные значения.
tel
Оптимизированная клавиатура для ввода телефонных номеров. Содержит цифры, символы *, # и +, часто располагает цифры в телефонном порядке.
search
Текстовая клавиатура с удобной кнопкой “Поиск” (🔍) вместо Enter. Оптимизирована для поисковых запросов.
email
Клавиатура с легким доступом к символу @ и доменным окончаниям (.com и др.). Упрощает ввод email-адресов.
url
Клавиатура с удобным доступом к слэшам (/), точкам и доменным окончаниям. Упрощает ввод веб-адресов.

Question 51

Q

Для чего используется атрибут pattern?

Answer

A

Атрибут pattern в HTML используется для валидации вводимых данных в элементах <input></input> с помощью регулярных выражений (RegExp). Он позволяет проверять формат введённого текста прямо в браузере, без необходимости использовать JavaScript.

🔹 Как работает pattern?
При отправке формы (<form>) браузер автоматически проверяет, соответствует ли введённое значение указанному регулярному выражению.

Если данные не соответствуют шаблону, форма не отправляется, и появляется стандартное сообщение об ошибке (можно кастомизировать через title).

Работает для <input></input> с типами:
✅ text, password, email, tel, url, search, date (и другие, кроме hidden, file, checkbox и т. д.).

<input></input>
[0-9] — только цифры.
{10} — ровно 10 символов.

<input></input>
(?=.\d) — хотя бы одна цифра.
(?=.[a-zA-Z]) — хотя бы одна буква.
.{8,} — минимум 8 символов.

Атрибут title задаёт подсказку, которая показывается при неверном вводе:
<input></input>

Не заменяет серверную валидацию
- pattern можно обойти (отключив JS или через DevTools), поэтому всегда проверяйте данные на сервере.
- Подходит для улучшения UX, но не для безопасности.

Регулярные выражения в pattern
- Должны соответствовать полному значению (как если бы были обёрнуты в ^ и $).
- Например, pattern=”[A-Za-z]” проверит, что весь ввод — одна латинская буква.

Совместимость с мобильными устройствами
На Android/iOS pattern работает, но виртуальная клавиатура не адаптируется под него (для этого используйте inputmode).

Question 52

Q

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

Answer

A

Оптимизация изображений
Изображения являются одним из основных факторов, влияющих на время загрузки страницы. Для оптимизации производительности, следует использовать сжатые современные форматы (например, WebP) и подходящие разрешения изображений.

Размеры должны быть корректно указаны.

Также полезно использовать ленивую загрузку (lazy loading), чтобы избежать загрузки изображений, которые находятся вне видимой области экрана.
<img></img>

Кеширование
Эффективное использование кеша может существенно ускорить загрузку страницы. Используйте HTTP-заголовки кеширования, чтобы браузер сохранял копии ресурсов и не загружал их заново при повторном посещении сайта. Однако, при обновлении контента, удостоверьтесь, что вы правильно управляете кешем, чтобы пользователи видели актуальные данные.
Минификация и компрессия ресурсов
Минификация и компрессия JavaScript, CSS и HTML файлов снижают их размер, что ускоряет время загрузки. Многие современные среды разработки предоставляют инструменты для автоматической минификации и компрессии файлов. Это также снижает использование пропускной способности сети.
Асинхронная загрузка скриптов
Используйте асинхронные и отложенные атрибуты для загрузки скриптов. Это позволит браузеру продолжать загрузку страницы, не блокируя ее выполнение на ожидании загрузки скриптов. Также рассмотрите возможность перемещения скриптов в конец тега <body>, чтобы они не блокировали рендеринг верхней части страницы.
Оптимизация CSS
Избегайте использования избыточных стилей в CSS. Удалите неиспользуемые стили, объедините и минифицируйте файлы CSS. Рассмотрите возможность использования CSS-спрайтов для объединения множества мелких изображений в одно, сокращая количество запросов к серверу.
Отложенная загрузка изображений и видео
Отложенная загрузка изображений и видео может быть особенно полезной на длинных страницах. Загрузка ресурсов только тогда, когда они становятся видимыми для пользователя, сокращает начальное время загрузки. Многие библиотеки и плагины предоставляют легкие способы реализации отложенной загрузки.
Использование Content Delivery Network (CDN)
CDN предоставляет распределенную сеть серверов, что ускоряет загрузку контента за счет использования ближайшего к пользователю сервера. Размещение ресурсов, таких как изображения, на CDN, позволяет снизить время отклика и улучшить производительность.
Применение асинхронных HTTP-запросов (AJAX)
Используйте технологию AJAX для асинхронной передачи данных между браузером и сервером. Это позволяет обновлять части страницы без полной перезагрузки. Такой подход повышает отзывчивость веб-приложений, уменьшая объем передаваемых данных.
Оптимизация шрифтов
Используйте легкие шрифты и устанавливайте только те варианты, которые действительно необходимы. Также рассмотрите возможность загрузки шрифтов асинхронно и лениво, чтобы избежать блокировки рендеринга страницы.
Мониторинг и аналитика производительности
Используйте инструменты мониторинга производительности, такие как Google PageSpeed Insights, Lighthouse или WebPageTest. Они помогут выявить узкие места и предложить рекомендации по оптимизации. Регулярно анализируйте данные производительности, чтобы оперативно реагировать на изменения в требованиях и поведении пользователей.

Question 53

Q

Расскажи про тег button?

Answer

A

<button> создаёт кликабельную кнопку.</button>

К тегу <button> можно применить любой универсальный атрибут, а также специфические атрибуты кнопок:</button>

autofocus — делает так, чтобы при загрузке страницы кнопка уже была выбрана и подсвечена, так что её можно нажать с клавиатуры клавишей Enter.
disabled — делает кнопку неактивной: нажать на неё нельзя, по дефолту отображается серым цветом.
form — связывает кнопку с любой формой в документе через ID. Если ID не указан, то с предшествующей формой.
formaction — задаёт URL-адрес, на который отправляются данные после нажатия на кнопку.
formenctype — определяет формат файла, который пользователь может отправить при нажатии на кнопку. У него есть три значения:
application/x-www-form-urlencoded: стандартное значение, вместо пробелов ставится +, а символы, вроде русских букв, кодируются их шестнадцатеричными значениями (например, %D0%9F%D0%B5%D1%82%D1%8F вместо Петя 🤡);
multipart/form-data — используется, чтобы отправлять файлы, данные при этом не кодируются;
text/plain — буквы и другие символы не кодируются, вместо пробелов появляется +.
formmethod — сообщает браузеру, каким HTTP-методом нужно передавать данные на сервер. Есть два метода:
post — упаковывает данные формы в тело сообщения и передаёт их на сервер, объём данных зависит от настроек сервера;
get — добавляет данные из формы прямо в URL-адрес после знака «?», например https://site.ru/doc/?name=Ivan&age=27 здесь пары «имя=значение» разделяются символом «&», а объём данных не может превышать 4 Кб. Если добавить этот атрибут в кнопку, он переопределит атрибут method у всей формы.
formnovalidate — булевый атрибут, работает как novalidate для тега <form>.
formtarget — показывает данные, которые ввёл пользователь. Где браузер откроет результат, зависит от ключевого слова:
_self: показывает данные в текущем окне. Это значение используется по умолчанию.
_blank: показывает данные в новом окне браузера — его используют чаще всего.
_parent: показывает данные внутри родительского элемента фрейма, а если такого нет, то загружает в текущем окне.
_top: отменяет все родительские фреймы и загружает страницу в полном окне браузера. Если родительских фреймов нет, то показывает данные в текущем окне.
name — уникальное имя кнопки. Передаётся вместе с данными, которые отправляет пользователь.
type — задаёт действие кнопки при нажатии:
submit: отправляет данные на сервер. Это также значение по умолчанию.
reset: удаляет введённые данные из формы.
button: просто кнопка. Действие для неё можно задать через скрипты.
value — задаёт исходное значение кнопки, которое отправляется на сервер вместе с данными пользователя.

Если хочется, чтобы пользователь отправил данные вам на сервер по нажатию кнопки, то <button> либо должен быть внутри контейнера <form>, либо связан с формой при помощи атрибутов id и form</button>

<form>
<label>
Введите ваш email
<input></input>
</label>
</form>

<button>Отправить</button>

💡 Тег <input></input> с атрибутом type=”button | reset | submit” тоже создаёт кнопку, но <button> проще стилизовать, так как внутрь <button> можно добавить любой HTML-контент, например, <em>, <strong> или <img></img>.</strong></em></button></button>

💡 Если создаёте кнопку, которая не отправляет ничего на сервер, убедитесь, что задан атрибут type, иначе может вылезти ошибка.

Мнение профи:
Допустим, вам нужно отправить данные формы на сервер. Если нужна обычная квадратная кнопка с надписью «Отправить», то я ставлю <input></input>, потому что <input></input> проще верстать 🤷‍♂️

Единственный случай, когда я использую <button> — это когда нужно отправить данные из формы на сервер, но кнопка нужна посложнее: с картинкой, заливкой или особым шрифтом, например. В обычный <input></input> картинку не вставить. А с тегом <a> не хочется извращаться, потому что он по умолчанию не отправляет данные формы.</a></button>

🛠 Если вам нужна кнопка вне формы для отправки данных, то проще использовать тег <a>, то есть обычную ссылку. В href я прописываю #, чтобы кнопка никуда не вела, если не надо. Потом навешиваю на неё всякие события: допустим, атрибут, который вызывает всплывающее окно. Тег <a> намного проще использовать, чем <button>, в нём больше возможностей по умолчанию, чтобы накидать внутрь каких-нибудь значений и условий, например, сделать не простую кнопку, с тремя картинками в определённой последовательности. У <button> больше ограничений.</button></button></a></a>

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

В первую очередь вы должны понять, за что отвечает элемент: за перенаправление на другую страницу, раздел сайта, ресурс или выполняет какие-то действия на самой странице (например, отправляет данные формы).

🛠 Если мы по клику на элемент открываем новое окно или перенаправляем пользователя на другую страницу — выбираем тег <a>, ссылку.</a>

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

Вадим Макеев в своём докладе «Жми сюда!» сформулировал следующий способ выбора между кнопкой и ссылкой:

В любой ситуации, где вам нужно выбирать, кнопка это или ссылка, выберите кнопку (<button>).
Если вы можете дать какой-то адрес для перенаправления — тогда это ссылка (<a>).
Всегда начинайте с кнопки.</a></button>

Question 54

Q

Как сделать выпадающий список?

Answer

A

Элемент <select> используется, когда нужно показать выпадающий список.</select>

Это своего рода обёртка над списком опций, которые задаются тегом <option>. Чтобы иметь возможность отправить выбранное значение на сервер, необходимо выполнить несколько условий:</option>

задать тегу <select> атрибут name;
задать каждому тегу <option> атрибут value. Если этот атрибут не задан, то его значение будет равно текстовому содержимому тега <option>.
Если нужно, чтобы изначально был выбран какой-то элемент из списка, нужно задать соответствующему тегу <option> атрибут selected.</option></option></option></select>

Внутри тега <select> могут использоваться только теги <option>, <optgroup> и <hr>. Тегом <option> размечается каждый элемент выпадающего списка <select>, группы опций <optgroup> или перечня <datalist>.</datalist></select></option></option></select>

Часто первый пункт списка option используется для заголовка всего выпадающего списка. В таком случае для него используют атрибут disabled, чтобы заблокировать его для выбора.

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

autofocus
Атрибут булевого типа (без значения, либо атрибут есть в теге, либо его нет совсем). Если он указан, то при загрузке страницы фокус будет автоматически помещён на наш выпадающий список.

disabled
Атрибут булевого типа. Если задан, то выпадающий список отключается для взаимодействия с пользователем. Если атрибут не задан, то он может быть унаследован у одного из предков (например, у контейнера <fieldset> или <form>). Если ни у одного предка вверх по дереву этот атрибут не задан, то выпадающий список доступен для взаимодействия.

form
Атрибут указывает на элемент <form>, с которым связан выпадающий список. Значением атрибута должен быть id формы в пределах текущего документа. Если атрибут не задан, то <select> обязательно должен находиться внутри тега <form>. Но если задать атрибут, то нахождение внутри формы не обязательно и <select> может находиться в любом месте страницы.</select></select>

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

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

required
Атрибут булевого типа. Указывает, должен ли обязательно быть выбран какой-то пункт выпадающего списка, значение атрибута value которого — это не пустая строка. Атрибут учитывается при валидации формы при отправке. Если поле не заполнить, то при попытке отправки формы браузер покажет ошибку.

size
Числовой атрибут. Если включён атрибут multiple, то это число указывает на количество видимых пунктов списка.

💡 Выбрать несколько элементов списка, когда включён атрибут multiple, можно, используя клавиши Ctrl, Cmd и Shift. Клавиши Ctrl (Windows, Linux) и Cmd (Mac OS) работают одинаково. Мы зажимаем эту клавишу на клавиатуре, а затем кликаем мышкой в нужные пункты списка. Этим способом можно выбрать несколько пунктов, находящихся на разном расстоянии друг от друга. Если выбрать пункт списка, зажать клавишу Shift и выбрать любой другой, то будут выбраны последовательно все пункты списка между этими двумя.

У тега <option> есть свои атрибуты:
disabled
Атрибут булевого типа. Если задан, то пункт списка нельзя выбрать. Часто браузеры выделяют такой элемент управления серым цветом, и на нём не срабатывают события клика или фокуса. Даже если атрибут не задан, элемент всё равно может быть отключён, если находится внутри тега <optgroup> с заданным атрибутом disabled.</option>

label
Значение этого атрибута задаёт текст пункта в списке. Если атрибут не задан, то в качестве значения берётся текстовое содержимое тега <option>.
<option>Самара</option>
Выведет option с надписью Куйбышев, так как label задан. Если не задать - выведет Самара.</option>

selected
Атрибут булевого типа. Если он задан, это означает, что пункт списка будет выбран по умолчанию. Если у выпадающего списка <select> не задан атрибут multiple, то атрибут selected может быть задан только одному тегу <option> в пределах этого списка. Если тегу <select> задан атрибут multiple, то атрибут selected может быть задан любому количеству тегов <option> в пределах списка.</option></select></option></select>

value
Если выбран какой-то пункт списка, то при отправке формы на сервер будет передано значение атрибута value этого пункта. Если атрибут не задан, то при отправке будет использоваться текстовое содержимое тега <option>.</option>

Question 55

Q

Что за тег <optgroup>?

Answer

A

Тег <optgroup> позволяет группировать опции внутри элемента <select>. Внутри тега <optgroup> стандартно используется один или несколько тегов <option>. Нельзя вкладывать один <optgroup> в другой.</option></select>

Атрибуты:
disabled — находящиеся внутри группы опции станут недоступны для выбора.

label — обязательный атрибут. Имя группы будет отображено в выпадающем списке. Теоретически мы можем оставить атрибут пустым или не использовать его вообще, но в таком случае над списком будет пустое пространство.

Question 56

Q

Расскажи про тег <datalist>?</datalist>

Answer

A

Элемент <datalist> — это источник предложений, то есть такой элемент, который содержит предопределённые варианты выбора для пользователя. В основном за варианты выбора опций выступают элементы <option>. У тега по умолчанию есть роль listbox.</option></datalist>

Кроме функции автодополнения элемента <datalist>, основное отличие между <select> и этим тегом в том, что в элементе <select> нельзя выбрать или указать значение не из списка предлагаемых. В интерактивных элементах с вводом значений можете указать своё значение или выбрать что-то из предложенного в списке. С другой стороны, если добавить атрибут multiple к <select>, появится возможность выбрать несколько вариантов из выпадающего списка. Множественный выбор у интерактивных элементов, связанных с элементом <datalist>, работает только у типа email.</datalist></select></select></select></datalist>

<datalist>
<option>
<option>
</datalist>

Перед использованием элемент <datalist> нужно связать с элементом <input></input> через атрибут list. Элемент <datalist> не сработает, если между элементами <input></input> и <datalist> будет любой другой элемент с id. Даже если это сам <input></input> со значением, которое равно значению атрибута list элемента <input></input>:

Элемент <datalist> не отображается браузерами, его значение display по умолчанию none. <datalist> просто содержит набор каких-то предопределённых вами вариантов выбора — опций. Их можно будет выбрать из выпадающего списка после того, как свяжите их с <input></input>. Эти значения будут по-разному отображаться в зависимости от значения атрибута type у <input></input>.

Элемент <datalist> можно связать с элементом <input></input> только через атрибут list, но этот атрибут поддерживается не всеми интерактивными элементами.

Элемент <input></input> не будут работать с элементом <datalist>, если у <input></input> одно из следующих значений атрибута type:

hidden;
password;
checkbox;
radio;
file;
submit;
image;
reset;
button.

<datalist> поддерживает следующие интерактивные элементы:
- <input></input> text или search
- <input></input> tel
- <input></input> url
- <input></input> email
- <input></input> date, month, week, time
- <input></input> datetime-local
- <input></input> number
- <input></input> range
- <input></input> color
</datalist></datalist></datalist></datalist></datalist></datalist></datalist></datalist></option></option></datalist>

Question 57

Q

Зачем нужен тег label?

Answer

A

Элемент <label> используется для создания подписи к элементу формы. Помимо текстовой подписи создаётся программная связь между подписью и элементом формы. Это сильно облегчает взаимодействие с формами незрячим или слабовидящим пользователям, использующим скринридеры. Когда фокус попадает на элемент формы, с которым связан <label>, скринридер автоматически зачитывает текст подписи, и пользователь понимает, какие данные необходимо ввести или какие данные представлены в текущем элементе формы.</label></label>

Чтобы связать <label> с элементом формы можно пойти двумя путями:</label>

Задаём элементу формы атрибут id. Такое же значение задаём атрибуту for тега <label>.
Оборачиваем элемент формы в тег <label>. В этом случае связь создаётся автоматически и нет необходимости в атрибутах id и for.</label></label>

for — значение этого атрибута должно соответствовать значению атрибута id связываемого элемента. Первый же элемент в документе, чей id будет совпадать со значением атрибута for, становится связанным с нашим <label>. Единственное условие — элемент должен принадлежать к группе связываемых элементов: <button>, <input></input>, <meter>, <output>, <progress>, <select> и <textarea>. Если элемент с нужным id не является связываемым, то связь не создаётся, и даже если дальше по документу найдётся связываемый элемент с таким же id, то он уже не будет учитываться.</textarea></select></progress></output></meter></button></label>

💡 Один элемент формы может быть связан с несколькими <label>, но один <label> может быть связан ровно с одним элементом формы.</label></label>

💡 При клике на <label> событие клика вызывается также и на связанном элементе формы.</label>

💡 По умолчанию <label> является строчным элементом и стилизуется аналогично <span> или <a>.</a></span></label>

🛠 Обязательно связывайте <label> с чекбоксами и радиокнопками. Это небольшие элементы интерфейса, в которые довольно сложно попасть курсором мыши или пальцем на мобильных устройствах. Если у них есть связанный <label>, то пользователь может кликать по тексту подписи, а не целиться в сам чекбокс.</label></label>

🛠 Даже если дизайнер нарисовал форму, в которой не предусмотрены явные лейблы для элементов, то вам нужно всё равно прописать их в разметке и скрыть через стили. В этом случае их будет не видно, но скринридер их прочитает.

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

Question 58

Q

Какая разница между legend, caption и label с точки зрения доступности? Что между ними общего?

Answer

A

Элемент <legend> используется для создания группового заголовка или подписи элементов внутри <fieldset>. Он помогает описать или идентифицировать группу элементов в форме. С точки зрения доступности использование <legend> может быть полезным для сценариев чтения с экрана, поскольку он явно связывает группу элементов с их заголовком.

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

Элемент <label> используется для связывания подписи с элементом формы — <input></input>, <select> или <textarea>. Он помогает пользователю понять, какому полю ввода принадлежит текст подписи. С точки зрения доступности использование элемента <label> позволяет пользователям использовать элементы формы без необходимости точного наведения на соответствующее поле ввода и повышает удобство использования для людей с инвалидностью.</label></textarea></select></label>

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

Question 59

Q

Расскажи про тег fieldset

Answer

A

Тег <fieldset> группирует элементы формы (поля ввода <input></input>, <textarea>, выпадающие списки <select> и другие) в блок с характерным выделением границ. Опционально с помощью тега <legend> внутри <fieldset> можно задать заголовок для создаваемой группы (он может быть только один и обязательно должен идти первым вложенным элементом).</select></textarea>

<form>
<fieldset>
<legend>Прозвище Дракса из «Стражей Галактики»?</legend>
<label>
<input></input>
Уничтожитель
</label>
<label>
<input></input>
Разрушитель
</label>
</fieldset>
</form>

disabled — блокирует все контролы внутри тега (как будто каждому из них указали этот атрибут — очень удобно);
form — связывает контролы внутри тега с формой (будто они располагаются внутри) — для этого в значении атрибута следует указать ID формы;
также для <fieldset> доступны все глобальные атрибуты.

Самое удобное в использовании <fieldset> — возможность заблокировать все вложенные контролы внутри тега одним атрибутом disabled

Question 60

Q

Зачем нужен тег legend?

Answer

A

Добавляет заголовок в <fieldset>, который по умолчанию оформляется браузером как текст, органично вписанный в рамку.

<legend> позволяет описать содержимое <fieldset>, но семантически он не является «представителем» заголовков, хотя выполняет схожую функцию. Он не задаёт иерархию, а лишь характеризует контент внутри «своей» группы — как <label> для соответствующего контрола.

Важно, чтобы <legend> был первым дочерним элементом внутри <fieldset>. Если внутри <fieldset> будет больше одного <legend>, отобразится только первый, все остальные отобразятся как обычные блочные элементы:
</legend></fieldset></fieldset></legend></label></fieldset></legend>

Question 61

Q

Для чего используется тег figure?

Answer

A

Элемент <figure> используется для вёрстки иллюстраций, изображений или другого автономного содержимого, которое может иметь поясняющую подпись в виде тега <figcaption>.</figure>

<figure>
<img></img>
<figcaption>Слон на фоне заката</figcaption>
</figure>

Обычно тегом <figure> верстают изображение, иллюстрацию, кусок кода и тому подобное, на которые будут ссылаться из основного содержимого документа. При этом <figure> вместе со всем содержимым (картинкой, подписью) может быть перенесён в другую часть документа без нарушения целостности потока документа.</figure></figure>

💡 Если содержимое элемента на странице является автономным (даже в отрыве от основного контента будет иметь смысл) и имеет подпись, то почти наверняка можно верстать его тегом <figure>. Самыми яркими примерами такого содержимого могут быть:</figure>

картинка либо другое медиасодержимое с подписью;
фрагменты кода с пояснением;
цитата с указанием автора;
отрывок стихотворения с указанием автора и т. п.
💡 Разрешено использовать только один тег <figcaption> внутри <figure>.</figure>

💡 Подпись к картинке из <figcaption> должна отличаться от описания из alt.

💡 Элемент <figcaption>, если он есть, обязательно должен быть первым или последним потомком элемента <figure>.</figure>

💡 Лучше не вкладывать внутрь <figure> тег для цитат <blockquote>, хотя спецификация это не запрещает. В этом случае скринридеры будут слишком назойливо озвучивать все роли и повторять несколько раз подпись к цитате, если она завёрнута в <figcaption>.</figure>

Question 62

Q

Зачем используется тег <map>?

Answer

A

Тег <map> в HTML используется для создания клиентской карты изображений (image map), которая позволяет привязывать ссылки к определённым областям изображения.

У тега <map> должен быть атрибут name с уникальным именем, на которое мы будем ссылаться в атрибуте usemap картинки. А внутри тега может быть сколько угодно <area></area> — они размечают на картинке области-ссылки.

💡 Чтобы связь установилась верно, не забудьте поставить знак # перед именем внутри usemap.

Тег <area></area> помещаем внутрь <map> и прописываем два обязательных атрибута:

shape определяет форму области. Можно указать circle для круга, poly для произвольной формы или rect для прямоугольника (он же форма <area></area> по умолчанию);
coords задаёт координаты области. Для круга проще всего: x, y, R, где R — радиус круга, для прямоугольника формат x1, y1, x2, y2, а для произвольной формы x1, y1, x2, y2, … , xn, yn. Поскольку у произвольной формы может быть много точек, будьте готовы к длинному коду 💀
Но пока что область «мёртвая», то есть её нельзя выбрать. Чтобы исправить это, добавим следующие атрибуты:

href для адреса ссылки;
target для способа эту ссылку открыть;
alt для альтернативной подписи.
А ещё можно указать:

download для скачивания файла по ссылке;
ping для перечисления URL-адресов ресурсов, которым нужно уведомление о переходе пользователя по ссылке;
rel для выбора типа ссылки;
referrerpolicy определяет, как JavaScript функция fetch устанавливает HTTP-заголовок Referer 🤖
🫥
Если атрибут href отсутствует, то все остальные атрибуты, кроме shape и coords, должны быть опущены.
Тег <area></area> создаёт на картинке невидимую область по координатам, а потом присваивает ей ссылку. Жмём на область — переходим по ссылке.

💡 Самые ёмкие в записи формы <area></area> — прямоугольник и круг, поскольку они требуют меньше всего координат. Если вам плохо от огромного кода, лучше отказаться от произвольных областей.

💡 Не стоит загружать в Фотошоп картинку и выискивать каждую точку координат. В интернете полно бесплатных ресурсов, где можно загрузить изображение и просто кликать мышью по точкам, а программа выдаст готовый код! Искать можно так: «генератор координат HTML».

💡 С помощью <area></area> можно разметить на картинке отдельные предметы и сделать целый каталог:

Question 63

Q

Для чего используется тег source?

Answer

A

При помощи тега <source></source> можно указать несколько источников для видео (<video>), аудио (<audio>) или изображения (<picture>). Очень пригождается, когда нужно подключить контент в нескольких форматах для лучшей поддержки в разных браузерах.</picture></audio></video>

Пример использования тега <source></source> для адаптивных изображений. При ширине экрана от 0 до 599 пикселей будет загружено изображение small.jpg, на ширине экрана от 600 пикселей будет загружено изображение big.jpg:

Когда мы хотим вставить на страницу аудио- или видеофайл, то используем теги <audio> и <video>. Если у нас есть несколько одинаковых файлов разного формата (например, один и тот же видеоролик в форматах .mp4 и .webm), то можно использовать тег <source></source>. Он поможет определить, какие форматы поддерживает браузер, и загрузить медиафайл в нужном формате.</video></audio>

С адаптивными изображениями чуть сложнее. Тег <source></source> используется совместно с тегами <picture> и <img></img>, чтобы определить, какое изображение должен загрузить браузер при разных условиях.</picture>

Атрибуты:
src
Требуется только для использования внутри тегов <audio> и <video>. В атрибуте указывается путь до медиафайла. Если тег <source></source> находится внутри <picture>, то атрибут src игнорируется.</picture></video></audio>

type
Содержит указание на MIME-тип медиафайла. Если у нас есть несколько одинаковых видеофайлов разного формата, то атрибут type помогает выбрать первый поддерживаемый браузером.

media
Может использоваться в <source></source> только внутри элемента <picture>. Атрибут содержит медиавыражение для выбора нужного изображения.</picture>

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

URL изображения (например,1024x768.png);
целое число, за которым идёт буква w (например, 1024w). Число указывает на ширину изображения в пикселях;
число, за которым идёт буква x (например, 1.5x). Число указывает на плотность пикселей, для которой будет использоваться изображение.

sizes
Атрибут sizes говорит браузеру, какой ширины нам понадобится изображение из текущего элемента <source></source> при отрисовке страницы. Можно сказать, что браузер определяет ширину слота для изображения. Так мы заранее сообщаем браузеру, сколько места на странице «забронировать» под изображение. Значением атрибута может быть либо абсолютное значение (например, 150px или 30em), либо относительное от вьюпорта (например, 20vw). Значения в процентах не разрешены.

Атрибуты srcset и sizes эффективно работают в паре.
Когда браузер разбирает тег <source></source>, он выполняет следующие действия:

смотрит на текущую ширину окна браузера;
ищет подходящий вариант из атрибута sizes, с учётом плотности пикселей;
выбирает из атрибута srcset подходящую картинку для слота: больше или равную ему.

🛠 Использование атрибутов srcset и sizes отлично работает и просто в теге <img></img>, а теги <source></source> чаще всего используются совместно с атрибутом type. Подготовка и указание изображений, видео или аудио различных типов помогает браузеру выбрать наиболее эффективный поддерживаемый формат.

Question 64

Q

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

Answer

A

Растровые форматы

Формат WebP - современный формат изображений. Обладает более хорошим сжатием, чем JPEG и PNG, поддерживает прозрачность и анимацию. Из минусов - не поддерживается старыми браузерами типа IE. Поддержка: Chrome, Edge, Firefox, Opera, Safari

Формат AVIF - Ещё лучшее сжатие, чем WebP. Хороший выбор как для изображений, так и для анимированных изображений из -за высокой производительности. Поддержка: Chrome, Edge, Firefox, Opera, Safari. Поддержка: Chrome, Edge, Firefox, Opera, Safari.

Формат JPEG подходит для фотографий, рисунков с большим количеством разноцветных деталей, изображений с плавным переходом яркости и контраста. При сжатии изображения ухудшается его качество. Поддержка: Chrome, Edge, Firefox, IE, Opera, Safari.

Формат PNG позволяет сохранять изображения, в которых требуется особенная чёткость. Главная особенность этого формата — поддержка прозрачности. Подходит для изображений с прозрачностью и полупрозрачностью, когда необходима повышенная точность полноцветных изображений и для изображений с резкими переходами цветов. Поддержка: Chrome, Edge, Firefox, IE, Opera, Safari.

Формат APNG используется для последовательностей анимации. Формат файла, впервые представленный Mozilla, который расширяет стандарт PNG , добавляя поддержку анимированных изображений. Поддержка: Chrome, Edge, Firefox, Opera, Safari.

Формат GIF используется для простейших анимаций. В последнее время GIF-изображения становятся всё менее используемыми и заменяются на другие, более оптимальные форматы. Поддержка: Chrome, Edge, Firefox, IE, Opera, Safari.

Формат SVG переводится как масштабируемая векторная графика. Качество таких изображений не меняется при изменении размеров, да и вес у них небольшой. Отлично подходит для малоцветных схем, логотипов и иконок. Чаще всего используется в случаях, когда необходимо масштабировать изображение без потерь, изменять цвет элементов изображения, анимировать части изображения. Поддержка: Chrome, Edge, Firefox, IE, Opera, Safari.

Если нужна максимальная совместимость, можно подключать несколько форматов через <picture>.</picture>

Answer 65

A

Тег <audio> добавляет аудиоплеер на веб-страницу.</audio>

Основные атрибуты
1. src — путь к аудиофайлу (можно указать внутри <source></source>).
2. controls — показывает стандартные кнопки управления (play/pause, громкость, прогресс-бар).
3. autoplay — автоматическое воспроизведение (браузеры могут блокировать без muted).
4. loop — зацикливание трека.
5. muted — отключает звук по умолчанию.
6. preload — загрузка аудио заранее:
- auto — загружает полностью.
- metadata — только метаданные (длина трека).
- none — не загружает до воспроизведения.

<audio>
<source></source>
<source></source>
Ваш браузер не поддерживает аудио.
</audio>

Autoplay работает только с muted или если пользователь ранее кликал на странице.
Для Safari лучше добавлять AAC (M4A) или MP3.
Стилизация: стандартный плеер можно скрыть (display: none) и сделать свои кнопки.

🔹 Какой формат выбрать?
Универсальный вариант: MP3 + OGG.
Для Apple-устройств: MP3 или AAC.
Лучшее качество (без сжатия): WAV (но вес большой).

Answer 66

A

Тег <video> парный, в котором, при отсутствии вложенных тегов <source></source>, указывается путь к видео-файлу в атрибуте src. С помощью атрибута controls можно вывести элементы управления для проигрывателя. Визуальное оформление управляющих элементов зависит от конкретного браузера.</video>

С помощью специальных тегов <source></source> возможно добавлять несколько форматов видео. Это необходимо по причине того, что каждый браузер умеет воспроизводить только определённые форматы видео. Формат mp4 корректно обрабатывается большинством браузеров. По возможности используйте именно его.

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

Тег <video> имеет несколько важных атрибутов:</video>

controls — Добавляет элементы управления для видеоплеера
autoplay — Автоматическое воспроизведение после загрузки видео
width — Ширина видеоплеера
height — Высота видеоплеера
Атрибуты width и height принимают значения в пикселях, при этом указывать единицу измерения не нужно.

Если используется один файл, то достаточно добавить атрибут src для тега <video>. В остальных случаях используйте теги <source></source></video>

Answer 67

A

Для корректного отображения разметки HTML браузеры создают специальную копию разметки и вставляют её в «виртуальное окно», которое называется viewport. Зачастую данное окно шире, чем экран текущего устройства. Это сделано для того, чтобы все элементы поместились так, как задумывалось. Данный эффект можно увидеть, если зайти на неадаптированную HTML-страницу с мобильного устройства. В таком случае появляется горизонтальная полоса прокрутки.

Впервые данный метатег появился в браузерах от компании Apple «Safari». До появления мобильных устройств браузер Safari по умолчанию считал, что все страницы в интернете имеют ширину в 980 пикселей, из-за чего на первых версиях iPod и iPhone сайты отображались не полностью, а только первые 320 пикселей по ширине.

Сейчас такая проблема решается указанием ширины сайта для устройств. Наиболее часто используют значение device-width у параметра width, которое устанавливает ширину страницы, равную ширине экрана устройства.

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

Основные параметры метатега viewport
width — ширина сайта. Указывается в пикселях. Возможно использование значения device-width для установки ширины страницы равной ширине устройства.
height — высота сайта. Указывается в пикселях. Возможно использование значения device-height для установки высоты страницы равной высоте устройства.
initial-scale — начальный коэффициент масштабирования. Может принимать значение от 0.1 до 10.0. Значение единица масштабирует страницу по умолчанию.
user-scalable — указывает, может ли пользователь масштабировать страницу, то есть приближать или отдалять её. Принимает значение yes и no

Answer 68

A

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

Для создания радиокнопки, так же, как и чекбокса, используются два тега:

<input></input> с указанием type=”radio”. Обязательным атрибутом является name, значением которого является имя. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута будет возможно выбрать все значения сразу, так как браузер не будет видеть связи между ними
<label>, в котором будет текст, связанный с нужной нам радиокнопкой
Связь <input></input> с <label> происходит уже по одному из двух знакомых нам сценариев:
- Связь по id. Для этого необходимо задать уникальный id для <input></input>, и связать <label> с радиокнопкой с помощью атрибута for
- Вложить <input></input> внутрь тега <label>. При этом указание уникального id не требуется</label></label></label></label>

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

Answer 69

A

Чекбоксы позволяют выбирать множество элементов из представленных.

Для создания чекбокса используются два тега:

<input></input> с указанием type=”checkbox”
<label>, в котором будет текст, связанный с нужным нам чекбоксом</label>

Для создания связи <label> с <input></input> существует два способа:
- Связь по id. Для этого необходимо задать уникальный id для <input></input> и связать <label> с чекбоксом с помощью атрибута for
- Вложить <input></input> внутрь тега <label>. При этом указание уникального id не требуется</label></label></label>

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

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

Answer 70

A

HTML-элемент <main> представляет основное содержимое тела документа. Эта область должна состоять из содержимого, которое напрямую связано с центральной темой документа или с основными функциями приложения.

Документ не должен иметь более одного элемента <main> у которого не указан атрибут hidden.

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

<main> не вносит вклад в структуру документа; то есть, в отличие от таких элементов, как <body>, заголовков, таких как <h2> и т.п., <main> не влияет на концепцию DOM структуры страницы. Он носит исключительно информативный характер.
</main></h2></body></main>

Answer 71

A

HTML-элемент <section> представляет собой автономный раздел — который не может быть представлен более точным по семантике элементом — внутри HTML-документа. Как правило, но не всегда, разделы имеют заголовок. Используется для группировки тематически связанного контента.

Примеры:
- Глава в статье
- Вкладки на странице
- Блок “О нас” на сайте

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

Примеры:
- Пост в блоге
- Новостная статья
- Комментарий пользователя
- Карточка товара

Каждый элемент <article> должен быть идентифицирован, обычно путём добавления заголовка (элементы <h1>-<h6>) в качестве дочернего элемента.
Когда элемент <article> является вложенным, внутренний элемент представляет собой контент связанный с внешним элементом. Например, комментарии к публикации в блоге могут быть элементами <article>, вложенными в другой <article>, являющийся публикацией в блоге.
Информация об авторе в элементе <article> может быть представлена через элемент <address>, но это не применимо к вложенным элементам <article>.
</article></address></article></article></article></article></h6></h1></article></article>

Answer 72

A

HTML-элемент <aside> представляет собой часть документа, чьё содержимое только косвенно связанно с основным содержимым документа. Чаще всего представлен в виде боковой панели, меню раздела, списка определений из статьи, виджетов, сносок или меток.

Answer 73

A

Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют мета‑данные для содержания. Наиболее популярными на сегодняшний день являются форматы Schema.org, Open Graph и микроформаты.

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

По данным Google, некоторые бренды после добавления микроразметки на страницы сайтов смогли повысить CTR на 25-35%.

Для внедрения микроразметки на страницы сайта нужно для начала выбрать словарь и подходящий синтаксис. Словарь — это набор классов и их свойств, с помощью которых можно описать контент страницы. По сути, это язык, который понимают алгоритмы поисковых систем. Самые распространенные словари в мире — Schema.Org и OpenGraph. На одном сайте допускается использовать несколько словарей. Дополняя друг друга, они будут передавать больше данных.

Schema.org — это специальный единый для многих поисковых систем стандартсемантической разметки, который совместно разрабатывается многими поисковыми системами (в том числе Яндексом и Google). Разметка Schema.org упрощает поисковой системе процесс формирования описания сайта в результатах поиска (так называемого сниппета). Размеченная таким образом страница может отображаться в поиске иначе, чем остальные, и содержать дополнительные сведения. Стандарт поддерживает разметку для статей и других творческих работ, событий, описаний различных действий, товаров, информации о людях. Разработка новых словарей разметки в рамках Schema.org происходит на основе потребности поисковых систем и, как правило, совпадает с запуском ими новых сервисов.

Open Graph — это стандарт, который разработал Facebook для того, ссылки на сайт и «лайки» красиво отображались. Сейчас этот стандарт поддерживают и другие крупные социальные сети (Вконтакте, Google+, Twitter, LinkedIn, Pinterest и другие), а также поисковые системы (в частности, Яндекс и Google). При использовании этого стандарта на сайте, ссылки на него лучше отображаются в соцсетях и содержат дополнительную информацию, а поисковики получают более структурированную информацию. Стандарт поддерживает разметку пользовательских профилей, статей, видео- и аудиоматериалов, книг и сайтов в целом. Open Graph нацелен на контент, который наиболее активно распространяется через социальные сети, этим и объясняется состав используемых словарей.

Микроформаты — это стандарт, разработанный W3C, который использует для разметки базовые элементы HTML (классы, если точнее). Стандарт поддерживает разметку контактной информации (hCard), кулинарных рецептов (hRecipe), отзывов (hReview) и товаров (hProduct). Сейчас микроформаты можно считать уже устаревшей технологией, они активно вытесняются стандартами Open Graph и Schema.org, которые развиваются значительно быстрее и более функциональны.

Синтаксис — это набор правил для использования словаря. Синтаксис определяет, как, где и какие теги указывать в HTML-коде сайта. Стандартов синтаксиса, как и словарей, несколько. Наиболее распространенные: JSON-LD, RDFa, микроданные и микроформаты. При этом последние три используются все реже, а JSON-LD — все чаще, так как именно его рекомендует Google.

В рамках словаря можно использовать один или несколько видов синтаксиса, как заявляют представители поисковых систем. Например, для Schema.Org подходят и JSON-LD, и RDF, и микроданные, и микроформаты. Главное — следить, чтобы атрибуты не противоречили друг другу и не создавали путаницу.

Answer 74

A

Тег

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

Встроенный скрипт:


  alert('Привет, мир!');

Подключение внешнего файла:

Модульный скрипт (ES6 модули):

src - указывает URL внешнего скрипта

type - определяет тип скрипта (по умолчанию “text/javascript”).
- text/javascript (по умолчанию).
- module – для ES6-модулей (автоматически defer).
- importmap – для карты импортов модулей.

async - скрипт выполняется асинхронно (загружается параллельно с HTML и выполняется сразу после загрузки)

defer - скрипт выполняется после полной загрузки HTML, но до события DOMContentLoaded/Атрибут defer полезен, поскольку он гарантирует, что HTML будет полностью загружен до запуска JavaScript, так что вы не получите ошибок из-за того, что JavaScript попытается получить доступ к HTML-элементу, которого еще нет на странице.

nomodule – скрипт выполняется только в браузерах без поддержки модулей (фолбэк).

integrity – контроль целостности (SRI) для внешних скриптов.

crossorigin – настройки CORS для скриптов с другого домена.

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

Для критически важного кода, который должен выполняться до отображения контента, можно размещать в <head> с атрибутом defer.

Модули (type=”module”) по умолчанию ведут себя как скрипты с defer.

Answer 75

A

Добавить основной язык можно добавив атрибут lang к открывающему тегу html.

<html>
Это полезно во многих отношениях. Ваш HTML-документ будет эффективнее индексироваться поисковыми системами, если его язык установлен (что позволит ему правильно отображаться в результатах, специфичных для конкретного языка), и это полезно для людей с нарушениями зрения, использующих программы чтения с экрана, так как многие слова, которые пишутся одинаково в разных языках читаются по разному.

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

<p>Japanese example: <span>ご飯が熱い。</span>.</p>

Эти коды определены стандартом ISO 639-1
</html>

Answer 76

A

Инлайновый стиль — это способ добавления CSS-правил напрямую в HTML-элемент через атрибут style.

<p>Текст с инлайновым стилем</p>

Можно ли переопределить инлайновый стиль?
Да, но с оговорками. Инлайновые стили имеют наивысший приоритет (специфичность 1,0,0,0), поэтому обычные CSS-правила их не перекрывают. Однако есть способы их переопределить:
1. Использование !important в CSS
Добавление !important к свойству в CSS перебивает инлайновый стиль:
p {
color: blue !important; /* Переопределит инлайновый color: red */
}

Минусы:
Злоупотребление !important усложняет поддержку кода.
Другие !important в CSS могут снова переопределить ваш стиль.

JavaScript
Можно динамически изменить или удалить атрибут style:
document.querySelector(‘p’).style.color = ‘green’; // Изменит цвет
document.querySelector(‘p’).removeAttribute(‘style’); // Удалит инлайновые стили

Почему лучше избегать инлайновых стилей?
Сложность поддержки: Трудно искать и менять стили, разбросанные по HTML.
Низкая переиспользуемость: Один и тот же стиль придётся дублировать в каждом элементе.
Проблемы с каскадом: Из-за высокого приоритета их сложно переопределить без !important.

Answer 77

A

Хотлинкинг (от англ. hotlinking) — это практика прямого использования файлов (чаще всего изображений, видео или других медиаресурсов) с чужого сервера путём вставки ссылки на них на своём сайте или в другом интернет-контенте.

Как это работает?
У сайта A есть изображение по адресу:
https://site-a.com/image.jpg
Владелец сайта B вставляет это изображение на свою страницу, используя прямую ссылку:
<img></img>

Когда пользователь заходит на сайт B, его браузер загружает изображение с сервера A, расходуя трафик сайта A.

Почему хотлинкинг считается плохой практикой?
Кража трафика – владелец сайта A платит за хостинг и трафик, а пользуется им сайт B.

Нагрузка на сервер – если много сайтов используют хотлинкинг, сервер A может перегружаться.

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

Потеря контроля – владелец сайта A может изменить или удалить файл, и он пропадёт на сайте B. Может передаваться gif 1на 1 пиксель или на изображении будет надпись, что изображение было украдено с сайта.

Answer 78

A

В веб-разработке замененные элементы — это элементы HTML, содержимое которых заменяется внешними ресурсами или содержимым, определенным вне структуры документа, и не рассматривается в модели рендеринга CSS. Это внешние объекты, представление которых не зависит от модели форматирования CSS.

Заменяемыми элементами могут быть:

<video>
<iframe>
<embed></embed>
<fencedframe>

Следующие элементы рассматриваются как заменяемые только в особых случаях:
<audio>
<canvas>
<object>
<input></input>

Заменяемые элементы часто имеют внутренние размеры и внутреннее соотношение . Например, содержимое элемента <img></img>обычно заменяется изображением, определенным его srcатрибутом. Это изображение имеет внутреннюю ширину и внутреннюю высоту, указанные в абсолютных единицах, что определяет соотношение сторон.

Элементы управления формами обычно являются не заменяемыми виджетами , за исключением <input></input>, который заменяется изображением. Объекты, вставленные с использованием contentсвойства CSS, являются анонимными заменяемыми элементами . Они являются «анонимными», поскольку не существуют в разметке HTML.
</object></canvas></audio></fencedframe></iframe></video>