Содержание

• HTML5 теги, как сделать верстку семантичной и зачем это нужно?
• Что такое doctype и зачем он нужен?
• Какие есть отличия у тегов div, p, span, a?
• Что такое инлайновые элементы (например, b, i, strong, em)?
• Как создавать таблицы в html?
• В чем заключаются отличие чекбокса от радио кнопок? Как связать радиокнопки в группу?
• Что такое тег и как с ним работать?
• Что такое БЭМ и в чем его польза?
• Зачем нужны метатеги?
• Что такое data-атрибуты, и привести примеры, когда они полезны?
• Когда стоит использовать тег img, а когда background-image?
• Как стилизовать svg? Какие основные атрибуты и CSS-свойства используются для этого?
• Что такое специальные html-сущности (неразрывный пробел, тире, которое не дефис) и как с ними работать?

HTML

HTML5 теги, как сделать верстку семантичной и зачем это нужно?

• Что такое семантическая вёрстка и зачем она нужна
• HTML5 Семантические элементы

Семантикой в вёрстке называют подбор тегов по смыслу элемента. Прошли эпохи вёрстки на таблицах и дивах. Теперь почти для всего есть отдельный тег. Например, для меню есть тег <nav>, а для основного контента страницы — <main>.

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

• <article> Определяет статью
• <aside> Определяет содержание в стороне от содержимого страницы
• <details> Определяет дополнительные сведения, которые пользователь может просматривать или скрывать
• <summary> Определяет видимый заголовок для элемента <Details>
• <figcaption> Определяет заголовок для элемента <Figure>
• <figure> Задает автономное содержимое, например иллюстрации, диаграммы, фотографии, списки кодов и т.д.
• <footer> Определяет нижний колонтитул для документа или раздела
• <header> Задает заголовок для документа или раздела
• <main> Указывает основное содержимое документа
• <mark> Определяет выделенный текст
• <nav> Определяет навигационные ссылки
• <section> Определяет раздел в документе
• <time> Определяет дату и время

Что такое doctype и зачем он нужен?

Элемент <!DOCTYPE> предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, поскольку HTML существует в нескольких версиях, кроме того, имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), похожий на HTML, но различающийся с ним по синтаксису. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>. >>Больше о doctype

Какие есть отличия у тегов div, p, span, a?

Тег <a> предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта. <a> - строчный элемент

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

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

Тег <span> предназначен для определения строчных элементов документа. В отличие от блочных элементов, таких как <table>, <p> или <div>, с помощью тега <span> можно выделить часть информации внутри других тегов и установить для нее свой стиль. Например, внутри абзаца (тега <p>) можно изменить цвет и размер первой буквы, если добавить начальный и конечный тег <span> и определить для него стиль текста.

Что такое инлайновые элементы (например, b, i, strong, em)?

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

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

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

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

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

Таблицы

Как создавать таблицы в html?

Общая информация по таблицам. >>Больше о таблицах

Табличные данные относятся к категории потокового содержимого, они используются в основной части документов и приложений. В таблицах есть строки, столбцы и ячейки. Строки и столбцы образуют сетку. Ячейки таблицы должны полностью заполнять эту сетку без перекрытия. Таблицы нельзя использовать в качестве вспомогательных средств разметки. Исторически сложилось так, что некоторые веб-авторы неправильно использовали таблицы в HTML как способ управления макетом своих страниц. Это использование не соответствует требованиям, поскольку инструменты, пытающиеся извлечь данные из таких документов, могут получить запутанные результаты. В частности, программам чтения с экрана будет сложно перемещаться по страницам с таблицами, используемыми для разметки. Если таблица все же должна использоваться для разметки страницы, ее необходимо пометить атрибутом role="presentation", чтобы браузер правильно представлял таблицу программам чтения с экрана.

Теги для создания таблиц:

<table> - таблица

<caption> - подпись таблицы

<colgroup> - Элемент <colgroup> и его атрибут span участвует в макете таблицы, представляя группу из одного или нескольких столбцов. Примечание: Элемент <colgroup> должен использоваться внутри элемента <table> сразу после элемента <caption> перед элементами <thead>, <tbody>, <tfoot> и <tr>.

<col> - Элемент <col> и его атрибут span участвует в макете таблицы, представляя один или несколько столбцов в группе столбцов, представленных элементом <colgroup>.

<tbody> основные данные таблицы.

<thead> - блок строк, состоящий из заголовков столбцов таблицы.

<tfoot> - нижние колонтитулы.

<tr> - строка

<td> - ячейка

Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <th> должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.

border-spacing, border-collapse

colspan, rowspan

table-layout

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

caption

headers & scope

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

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

Синтаксис

<td id="идентификатор">...< /td>

< td headers="идентификатор">...< /td>

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

Синтаксис

< td scope="col | colgroup | row | rowgroup">...< /td>

Значения

col - >Ячейка заголовка установлена для колонки.

colgroup - Ячейка заголовка установлена для группы колонок.

row - Ячейка заголовка задана для строки.

rowgroup - Ячейка заголовка установлена для группы строк.

display: table, table-cell, table-row и т.д.

Используется для задания не специализированному табличному тегу (например <div>) поведения, аналогичного тегам <table>, <tr>, <td> и т.д.

Примеры верстки

		
			<table id="table5">
			<caption><b>TABLE 5</b></caption>
		
			<thead>
				<tr>
					<th> id="TH10" scope="col">заголовок первой колонки</th>
					<th> id="TH20" scope="col">заголовок второй колонки</th>
					<th> id="TH30" scope="col">заголовок третьей колонки</th>
				</tr>
			</thead>
			<tbody>
		
				<tr>
					<td> headers="TH10">TD внутри TBODY 1</td>
					<td> headers="TH20">TD внутри TBODY 2</td>
					<td> headers="TH30">TD внутри TBODY 3</td>
				</tr>
		
			</tbody>
			<tfoot>
				<tr>
					<th> scope="row">TH внутри TFOOT</th>
					<td>TD внутри TFOOT</td>
					<td>TD внутри TFOOT</td>
					<td>TD внутри TFOOT</td>
				</tr>
			</tfoot>
		</table>
		
	

	
	<table rules='groups'>
	<colgroup>
			<col id='col1' span=2>
			<col id='col2' span=3>
			<col id='col3' span=1>
			<col id='col4' span=2>
			<col id='col5' span=1>
		</colgroup>

		<caption><b>TABLE 1</b></caption>

		<thead>
			<tr>
				<th id="n">TH внутри TR внутри THEAD</th>
				<th>TH внутри TR внутри THEAD</th>
				<th>TH внутри TR внутри THEAD</th>
			</tr>
		</thead>
		<tbody>

			<tr>
				<td headers="n r1-с1">TD внутри TBODY 1</td>
				<th id="r1-с1">TH внутри TBODY 2</th>
				<td>TD внутри TBODY 3</td>

				<td headers="n r1-с2">TD внутри TBODY 4</td>
				<th id="r1-с2">TH внутри TBODY 5</th>
				<td>TD внутри TBODY 6</td>

				<td headers="n r1-с3">TD внутри TBODY 7</td>
				<th id="r1-с3">TH внутри TBODY 8</th>
				<td>TD внутри TBODY 9</td>
			</tr>
		</tbody>
		<tfoot>
			<tr>
				<th scope="row">TH внутри TFOOT</th>
				<td>TD внутри TFOOT</td>
				<td>TD внутри TFOOT</td>
				<td>TD внутри TFOOT</td>
			</tr>
		</tfoot>
	</table>
	

	
		<table id="table2">
		<caption><b>TABLE 2</b></caption>
		<thead>
			<tr>
				<th> id="n">TH внутри TR внутри THEAD</th>
				<th>TH внутри TR внутри THEAD</th>
				<th> colspan="3" id="th1">TH внутри TR внутри THEAD занимает три столбца</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td> headers="n r1-с1" colspan="1" id="td1">TD внутри TBODY 1 занимает один столбец</td>
				<th> id="r1-с1" rowspan="3">TH внутри TBODY 2 занимает три строки</th>
			</tr>
			<tr>
				<td> headers="n r2">TD внутри TBODY 1</td>
			</tr>
			<tr>
				<td>TD внутри TBODY 1</td>
			</tr>
			<tr>
				<td>TD внутри TBODY 1</td>
			</tr>
		</tbody>
	</table>
	

			
				table {
					border: 1px solid rgb(93, 177, 226);
					border-spacing: 5px;
					table-layout: fixed;
					width: 500px;
				}
			
		

		
			table {
				border: 1px solid rgb(93, 177, 226);
				border-spacing: 5px;
				table-layout: auto;
				width: 500px;
			}
		
	

Чекбоксы и радиокнопки

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

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

Чекбокс - это элемент <input> с атрибутом type="checkbox"

Радиокнопка - это тоже элемент <input>, но с атрибутом type="radio". Чтобы связать радиокнопки в группу, каждому элементу нужно прописать атрибут name с именем группы радиокнопок (т.е. значение name должно быть одинаковым у всех кнопок в группе, тогда можно будет выбрать только одну из них). Добавление атрибута name элементам группы чекбоксов не имеет такого же эффекта

			
				<fieldset style="max-width: 200px;">
				<legend>Чекбоксы</legend>
				<label>
					<input type="checkbox" name="checkroup"> 1
				</label>
				<label>
					<input type="checkbox" name="checkroup"> 2
				</label>
				<label>
					<input type="checkbox" name="checkroup"> 3
				</label>
			</fieldset>
			
		

			
				<fieldset style="max-width: 200px;">
				<legend>Радиокнопки</legend>
				<label>
					<input type="radio" name="radiogroup" checked> 1
				</label>
				<label>
					<input type="radio" name="radiogroup"> 2
				</label>
				<label>
					<input type="radio" name="radiogroup"> 3
				</label>
			</fieldset>
			
		

Что такое тег <label> и как с ним работать?

Тег <label> устанавливает связь между определенной меткой, в качестве которой обычно выступает текст, и элементом формы (<input>, <select>, <textarea>). Такая связь необходима, чтобы изменять значения элементов формы при нажатии курсором мыши на текст. Кроме того, с помощью <label> можно устанавливать горячие клавиши на клавиатуре и переходить на активный элемент подобно ссылкам. Существует два способа связывания объекта и метки. Первый заключается в использовании идентификатора id внутри элемента формы и указании его имени в качестве атрибута for тега <label>. При втором способе элемент формы помещается внутрь контейнера <label>.

		<form action="" class="content-form">
		</div>
		<!-- Вариант 1 -->
			<input type="checkbox" id="check1">
			<label> for="check1"> связан с чекбоксом по ID</label>
		</div>
		<div>
		<!-- Вариант 2 -->
			<label>
			<input type="checkbox">
			обернут вокруг чекбокса</label>
		</div>
	</form>

	

БЭМ

Что такое БЭМ и в чем его польза?

БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

Блок

Что такое, когда следует создавать?

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

Особенности:

Название блока характеризует смысл («что это?» — «меню»: menu, «кнопка»: button), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Может ли блок содержать другие блоки?

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

Почему не стоит задавать внешнюю геометрию блокам?

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

Элемент

Что такое, когда следует создавать?

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

Особенности:

Название элемента характеризует смысл («что это?» — «пункт»: item, «текст»: text), а не состояние («какой, как выглядит?» — «красный»: red, «большой»: big).

Структура полного имени элемента соответствует схеме: имя-блока__имя-элемента. Имя элемента отделяется от имени блока двумя подчеркиваниями (__).

Может ли элемент содержать другие элементы?

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

Может ли элемент содержать блоки (блок, к которому он относится, или другие блоки)?

Нет

Можно ли создавать элемент элемента?

Нет. Элемент — всегда часть блока, а не другого элемента. Это означает, что в названии элементов нельзя прописывать иерархию вида block__elem1__elem2. Исключение составляют элементы, реализация которых для упрощения разработки требует разделения на более мелкие части — подэлементы. В БЭМ-методологии нельзя создавать элементы элементов. В подобном случае вместо элемента необходимо создавать служебный блок.

Может ли элемент использоваться вне блока?

Нет. Элемент — всегда часть блока и не должен использоваться отдельно от него.

Может ли существовать блок без элементов?

Да. Элемент — необязательный компонент блока. Не у всех блоков должны быть элементы.

Модификатор

Что такое, когда следует использовать?

Модификатор - cущность, определяющая внешний вид, состояние или поведение блока либо элемента.

Особенности:

Название модификатора характеризует внешний вид («какой размер?», «какая тема?» и т. п. — «размер»: size_s, «тема»: theme_islands), состояние («чем отличается от прочих?» — «отключен»: disabled, «фокусированный»: focused) и поведение («как ведет себя?», «как взаимодействует с пользователем?» — «направление»: directions_left-top).

Имя модификатора отделяется от имени блока или элемента одним подчеркиванием (_).

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

Булевый

Используют, когда важно только наличие или отсутствие модификатора, а его значение несущественно. Например, «отключен»: disabled. Считается, что при наличии булевого модификатора у сущности его значение равно true.

Структура полного имени модификатора соответствует схеме:

имя-блока_имя-модификатора;

имя-блока__имя-элемента_имя-модификатора.

Ключ-значение

Используют, когда важно значение модификатора. Например, «меню с темой оформления islands»: menu_theme_islands.

Структура полного имени модификатора соответствует схеме:

имя-блока_имя-модификатора_значение-модификатора;

имя-блока__имя-элемента_имя-модификатора_значение-модификатора.

Является ли корректным следующий код:

Исправление:

Почему в CSS по БЭМ не рекомендуется использовать селекторы по id и по тегам?

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

Как препроцессоры помогают избежать боли с дублированием названий в коде?

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

<ul>
  <li>Item A</li>
  <li>Item B</li>
  <li>Item C</li>
</ul>

	ul
		li Item A
		li Item B
		li Item C
	

Какие альтернативы есть БЭМ и в чем сила/слабость каждого? Знать хотя бы 2 альтернативы данному подходу, плюсы/минусы подходов.

1. Различные способы организации CSS кода - OOCSS, SMACSS и др.

Кратко различия с БЭМ:
• БЭМ работает не только с CSS, но и с JavaScript.
• БЭМ больше схож с Web Components, чем с перечисленными решениями для CSS.
• БЭМ предоставляет комплексное решение по созданию архитектуры проекта и помогает организовать процессы разработки.

Кратко различия с БЭМ:

Поддержка браузеров:
• Web Components не поддерживается в Safari, iOS Safari, Internet Explorer, Firefox.
• БЭМ работает во всех браузерах.

Инкапсуляция
• В Web Components реализована через Shadow DOM.
• В БЭМ — с помощью элементов блока.

Работа шаблонов
• В Web Components шаблоны всегда выполняются в браузере. Это может потребовать дополнительных решений проблем с индексацией.
• БЭМ генерация шаблона возможна на этапе разработки. Это позволяет отдавать готовый HTML. Шаблоны могут выполняться как в браузере, так и на сервере.
• Web Components использует императивный принцип — интерполяцию строк.
• БЭМ использует декларативный подход, который позволяет гибко управлять шаблонизацией и избегать повторений.

Вместо импорта HTML — сборка
• Web Components использует импорт HTML, который работает непосредственно в браузере. Для объединения HTML-файлов используется инструмент Vulcanize.
• В БЭМ используется сборка. Для объединения файлов используются сборщики: ENB, Gulp.

Вместо Custom Elements — абстракция над DOM-деревом
• В Web Components используются Custom Elements. Такой подход позволяет разместить на одном DOM-узле только один компонент.
• В БЭМ используется БЭМ-дерево. Такой подход позволяет размещать на одном DOM-узле несколько компонентов (БЭМ-сущностей).

Кратко различия с БЭМ:
• Bootstrap — это свободный набор сверстанных блоков для создания сайтов и веб-приложений.
• БЭМ — это методология, позволяющая:
• создавать архитектуру проекта;
• разрабатывать веб-приложения независимыми блоками;
• упрощать поддержку проектов.

Что такое миксы в БЭМе и какие особенности работы с ними есть?

Микс позволяет одинаково форматировать разные HTML-элементы, совмещать поведение и стили нескольких сущностей без дублирования кода и решать задачи абстрактных блоков-оберток. Миксом называется одновременное размещение нескольких БЭМ-сущностей (блоков, элементов, модификаторов) на одном DOM-узле.

Задачи, решаемые с помощью миксов:

1. Создавать семантически разные блоки с некоторыми общими стилями.

	<form class="form" action="/">
	<input class="form__search" name="s">
	<input class="form__submit" type="submit">
	</form>

В селекторе класса .form описаны все стили, которые могут быть у любой формы (заказов, поиска или регистрации): .form {}

Теперь предстоит сделать из универсальной формы форму поиска. Для этого в проекте необходимо создать дополнительный класс search, который отвечает только за поиск. Чтобы объединить стили и поведение класса .form и .search, нужно разместить эти классы на одном DOM-узле:

	<!-- Микс блоков form и search -->
	<form> class="form search" action="/">
		<input class="form__search" name="s">
		<input class="form__submit" type="submit">
	</form>
	

В данном случае класс .search — это отдельный блок, который определяет поведение. У этого блока не может быть модификаторов, отвечающих за форму, темы, размеры. Такие модификаторы уже есть у универсальной формы. Микс помогает совместить стили и поведение этих разных блоков.

2. Внешняя геометрия и позиционирование. Отказываемся от абстрактных HTML-оберток. Миксы применяют, чтобы расположить один блок относительно другого или позиционировать элементы внутри блока. В БЭМ стили, отвечающие за внешнюю геометрию и позиционирование, задаются через родительский блок. Отступ от родительского блока — это не свойство вложенного блока быть с таким отступом. Это свойство родительского блока — знать, что вложенный в него блок должен отступать от границы на определенное количество пикселей. Для задания отступов исполь микс. Знания про позиционирование вложенных блоков описываются в элементах родительского блока. Затем элемент родительского блока миксуется к вложенному блоку. В таком случае вложенный блок не специфицирует никакие отступы и может быть легко переиспользован в любом месте.

		<div>
		<!-- Микс блока menu и элемента header__menu -->
		<ul class="menu header__menu">
			<li class="menu__item"><a href=""></a></li>
			<li class="menu__item"><a href=""></a></li>
			<li class="menu__item"><a href=""></a></li>
		</ul>
		</div>
	

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

Как бы отрефакторили данный код

	<header class="header">
    <img class="logo">
    <form class="search-form">
        <input type="input">
        <button> type="button"></button>
    </form>
    <ul class="lang-switcher">
        <li class="lang-item"><a> class="lang-link" href="url">en</a> </li>
        <li class="lang-item"> <a> class="lang-link" href="url">ru</a> </li>
    </ul>
   </header>

Отрефакторенный код:

	<header class="header">
	<img class="header__logo">
		<!-- search-form - это блок внутри блока header -->
		<form class="header__search-form search-form">
			<input type="search-form__input">
			<button type="search-form__button"></button>
		</form>
		<!-- lang-switcher - это блок внутри блока header -->
		<ul class="header__lang-switcher lang-switcher">
			<li class="lang-switcher__lang-item"><a class="lang-switcher__lang-link" href="url">en</a> </li>
			<li class="lang-switcher__lang-item"> <a class="lang-switcher__lang-link" href="url">ru</a> </li>
		</ul>
	</header>

Зачем нужны метатеги?

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

• заголовок (title) страницы
• ссылки на файлы CSS (если вы хотите применить к вашему HTML стили CSS)
• ссылки на иконки
• другие метаданные (данные о HTML: автор и важные ключевые слова, описывающие документ.)

Пример метаданных:

	<head>
	<!-- название страницы -->
	<title>Моя тестовая страница</title>

	<!-- данные о кодировке страницы -->
	<meta charset="utf-8">

	<!-- данные об имени автора и содержимом страницы -->
	<meta name="author" content="MDN Web Docs">
	<!-- данные для отображения в Twitter -->
	<meta name="twitter:title" content="MDN Web Docs">
	<!-- данные для отображения в Facebook -->
	<meta property="og:title" content="MDN Web Docs">

	<!-- фавиконы -->
	<!-- Для iPad 3 с Retina-экраном высокого разрешения: -->
	<link rel="apple-touch-icon-precomposed" sizes="144x144" href="https://...">
	<!-- Для iPhone с Retina-экраном высокого разрешения: -->
	<link rel="apple-touch-icon-precomposed" sizes="114x114" href="https://...">
	<!-- Для iPad первого и второго поколения: -->
	<link rel="apple-touch-icon-precomposed" sizes="72x72" href="https://...">
	<!-- Для iPhone, iPod Touch без Retina и устройств с Android 2.1+: -->
	<link rel="apple-touch-icon-precomposed" href="https://...">
	<!-- Для других случаев - обычный favicon -->
	<link rel="shortcut icon" href="https://...">
	
	<!-- стили -->
	<link rel="stylesheet" href="my-css-file.css">

	<!-- скрипты -->
	<script src="my-js-file.js"></script>	
	</head>

Что такое data-атрибуты, и привести примеры, когда они полезны?

Когда стоит использовать тег img, а когда background-image?

Когда мы вспоминаем основное назначение html и css оно для нас становится очевидным. Различие состоит в том, что картинки несущие смысловую нагрузку или же каким-либо образом относящиеся к содержанию страницы следует вставлять тегом img (картинки в тексте, баннеры, картинки слайдера, аватарки и тд). Все остальное (просто элементы оформления: различного рода разделители, маркеры, фоны и тд.) следует вставлять в дизайн используя background-image.

Когда следует использовать тег IMG

• Если изображение это часть содержимого, например логотип, или диаграмма или персонаж
• Если изображение имеет важное семантическое значение, например значок предупреждения. Это гарантирует, что смысл изображения может быть передан во всех пользовательских агентах, включая считыватели экрана (при условии, что тег <img> имеет атрибут alt)
• Для возможности менять изображение с backend-a
• Используя img для вывода картинок несущих на себе смысловую нагрузку, мы даем возможность поисковикам прочитать альты этих картинок и лучше понять что они из себя представляют, есть возможность получения дополнительного трафика на сайт из сервисов поиска по картинкам, получаем лучшую уникализацию контента (поисковики любят текст разбавленный картинками, поскольку это обычно улучшает поведенческие факторы посетителей ресурса).
• Если нужно, чтобы при печати страницы изображение было включено по умолчанию
• Img с анимацией меньше нагружает браузеры

Когда следует использовать фоновое изображение CSS

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

Как стилизовать svg? Какие основные атрибуты и CSS-свойства используются для этого?

CSS Свойства / атрибуты svg

• fill

  Заливка элемента

• fill-rule

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

• fill-opacity

  Управление прозрачностью заливки

• stroke

  Цвет обводки

• stroke-width

  Толщина обводки

• stroke-linecap

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

• stroke-linejoin

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

• stroke-dasharray

  Управляет видом пунктирной обводки

• stroke-dashoffset

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

	svg {
		fill: blueviolet;
		fill-opacity: 0.5;
		stroke: blue;
		stroke-opacity: 0.2;
	}
	
	svg:hover {
		opacity: 0.9;
		stroke-opacity: 0.7;
	}

Что такое специальные html-сущности (неразрывный пробел, тире, которое не дефис) и как с ними работать?

Спецсимволы HTML, или символы-мнемоники, представляют собой конструкцию SGML (англ. Standard Generalized Markup Language — стандартный обобщённый язык разметки), ссылающуюся на определенные символы из символьного набора документа. В основном они используются для указания символов, которых нет в стандартной компьютерной клавиатуре, либо которые не поддерживает кодировка HTML-страницы (Windows-1251, UTF-8 и т.д.). Чтобы разместить символ на веб-странице, необходимо указать HTML-код или мнемонику. Спецсимволы чувствительны к регистру, поэтому их необходимо прописывать точно так, как указано в таблице. Спецсимволы, не имеющие мнемоники, могут не отображаться вовсе или же некорректно отображаться в тех или иных браузерах. Для вставки символов внутрь тегов воспользуйтесь HTML-кодом символа, а для использования символов в таблицах стилей, например, в качестве значения свойства content — CSS-код. Спецсимвол наследует цвет от цвета текста родительского элемента. Чтобы изменить цвет спецсимвола, можно поместить HTML-код внутрь тега <span> или задать нужное значение свойства color (при вставке спецсимволов через свойство content). Код неразравного пробела - &nbsp, длинного тире - &mdash. Таблица спецсимволов