# HTML

# Теги

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

Пример

Семантическая верстка была основана на той идее, что названия тегов должны совпадать с их смысловым значением и что html разметка должна правильно описывать свой контент. Рассмотрим примеры самых важных и распространенных семантических тегов HTML5:

<header> - Используется для создания шапки сайта, в теге могут быть меню навигации, встречающиеся почти во всех сайтах, логотип и важные ссылки. В header могут быть описаны любые теги кроме самого header, и footer(исключениями являются основные теги <html>, <head>, <style>, <script>, <body>).

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

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

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

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

<figure> - этот тег предназначен для группировки элементов, например, картинку и текст с описанием можно взять в figure и только потом поместить в тег <article>.

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

Используя HTML 5 семантические теги, ни в коем случае нельзя ими злоупотреблять. Старые <div> можно и нужно использовать там, где семантические теги не являются 100% решением. Если вы не уверены нужно ли употреблять <asign> или <section> (или любой другой HTML 5 тег), то лучше воспользоваться обычным <div>. И это не будет означать, что вы нарушаете структуру пятого html, а наоборот, <div> рекомендуют использовать сами разработчики языка гипертекстовой разметки!

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

  1. Что такое <!DOCTYPE html> и зачем он нужен?

    Элемент <!doctype>DTD (document type definition, описание типа документа) указывает тип документа, который используется при написании html кода. Это непарный тег, который должен стоять самым первым в коде каждой страницы вашего сайта.

    Директива doctype необходима, чтобы браузер понимал как обрабатывать текущую веб-страничку, так как существует несколько версий языка HTML, а еще имеется XHTML (EXtensible HyperText Markup Language, расширенный язык разметки гипертекста), который похож на HTML, но различается с ним по синтаксису.

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

    Подведем итоги:

    • DOCTYPE — это элемент, который указывает тип документа и определяет правила по, которым браузер будет обрабатывать ваш html-код;
    • Элемент doctype всегда должен быть размещен в первой строчке документа;
    • Всегда указывайте doctype, иначе ваши странички могут отображаться некорректно;
    • Если не знаете какой doctype использовать, указывайте doctype html5: <!doctype html>.
  2. Какие есть отличия у тегов <div>, <p>, <span>, <a>?

    Все в HTML предназначено для того, чтобы придать контенту некое значение. В то время как большинство HTML тегов в полной мере выполняют это предназначение (тег <p> создает параграф, тег <a> – ссылку и т.д.), тег <span> и тег <div> никакого значения не имеют, что может вызвать некоторые сомнения в необходимости их существования. Однако эти теги используются чрезвычайно активно совместно с технологией CSS.

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

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

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

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

    Строчным элементам нельзя установить размеры (width и height), задать верхние и нижние margin отступы.

    Для строчного элемента, размещенного на одной линии, можно использовать padding, margin-left и margin-right, border.

    Для строчного элемента, размещенного на нескольких строках padding, margin и border обычно не используют, т.к. они в этом случае бесполезны.

    Примеры элементов, которые имеют display: inline по умолчанию:

    <a>, <abbr>, <audio>, <b>, <bdo>, <button>, <canvas>, <cite>, <code>, <del>, <dfn>, <em>, <i>, <iframe>, <img>, <input>, <ins>, <kbd>, <mark>, <meter>, <q>, <s>, <samp>, <small>, <select>, <span>, <strong>, <sub>, <sup>, <td>, <textarea>, <th>, <var>, <video>.

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

# Таблицы

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

    • border-spacing, border-collapse
    • colspan, rowspan
    • table-layout
    • caption
    • scope
    • display: table, table-cell, table-row и т.д.

    В HTML для создания таблиц используются теги группы table. К ним относятся:

    • <table> - тег обвертка таблицы;
    • <tr> - тег строки (ряда) таблицы;
    • <td> - тег обычной ячейки таблицы;
    • <th> - тег ячейки-заголовка таблицы;
    • <col> - тег колонки таблицы;
    • <colgroup> - тег группы колонок таблицы;
    • <thead> - тег верхнего колонтитула таблицы;
    • <tbody> - тег основной части таблицы;
    • <tfoot> - тег нижнего колонтитула таблицы;
    • <caption> - тег подписи таблицы.

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

    Далее будет рассмотрена практика создания HTML таблиц с примером исходного кода и описанием на русском языке.

  2. Простая HTML таблица

    Чтобы создать простую таблицу HTML достаточно 3 тега: <table>, <tr> и <td>.

    Тег <table> является корневым контейнером таблицы. Все содержимое таблицы должно находится внутри него.

    Далее необходимо определить строки и ячейки - структуру таблицы.

    В HTML таблицах строка (ряд) <tr> является контейнером для ячеек. Колонки таблицы определяются позицией ячеек: первая ячейка <td> внутри строки <tr> будет в первой колонке, второй элемент <td> - во второй колонке и так далее.

    Для разделения таблицы на колонтитулы (об этом ниже) и основную часть, как обвертку строк <tr> основной части таблицы используют тег <tbody>. Его использование не обязательно в простых таблицах, однако некоторые браузеры и HTML редакторы добавляют его автоматически, поэтому в примерах ниже мы также будем его использовать. Если ваша таблица не имеет колонтитулов, вы можете не использовать тег <tbody>.

    Пример простой таблицы HTML

    Заголовок 1 Заголовок 2 Заголовок 3
    Ячейка 1 Ячейка 2 Ячейка 3
    Ячейка 4 Ячейка 5 Ячейка 6
    Ячейка 7 Ячейка 8 Ячейка 9

    Исходный код простой таблицы HTML

    <table>
      <tbody>
        <tr>
          <th>Заголовок 1</th>
          <th>Заголовок 2</th>
          <th>Заголовок 3</th>
        </tr>
        <tr>
          <td>Ячейка 1</td>
          <td>Ячейка 2</td>
          <td>Ячейка 3</td>
        </tr>
        <tr>
          <td>Ячейка 4</td>
          <td>Ячейка 5</td>
          <td>Ячейка 6</td>
        </tr>
        <tr>
          <td>Ячейка 7</td>
          <td>Ячейка 8</td>
          <td>Ячейка 9</td>
        </tr>
      </tbody>
    </table>
    
  3. Заголовки таблицы HTML

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

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

    Пример HTML таблицы с заголовком th

    Volkswagen AG Daimler AG BMW Group
    Audi Mercedes-Benz BMW
    Skoda Mercedes-AMG Mini
    Lamborghini Smart Rolls-Royce

    Исходный код таблицы HTML с заголовками th

    <table>
      <tbody>
        <tr>
          <th>Volkswagen AG</th>
          <th>Daimler AG</th>
          <th>BMW Group</th>
        </tr>
        <tr>
          <td>Audi</td>
          <td>Mercedes-Benz</td>
          <td>BMW</td>
        </tr>
        <tr>
          <td>Skoda</td>
          <td>Mercedes-AMG</td>
          <td>Mini</td>
        </tr>
        <tr>
          <td>Lamborghini</td>
          <td>Smart</td>
          <td>Rolls-Royce</td>
        </tr>
      </tbody>
    </table>
    
  4. Объединение ячеек в таблице HTML

    В HTML таблицах есть возможность объединить ячейки по горизонтали и вертикали.

    Чтобы объединить ячейки по горизонтали используйте атрибут colspan="х", у ячейки <td> или <th>, где x - количество ячеек для объединения.

    Чтобы объединить ячейки по вертикали используйте атрибут rowspan="х", у ячейки <td> или <th>, где x - количество ячеек для объединения.

    Ячейки можно объединять по горизонтали и вертикали одновременно. Для этого используйте оба атрибута colspan и rowspan для нужной ячейки:

    <td colspan="3" rowspan="2">Текст ячейки</td>
    

    Обратите внимание на то, что при объединении ячеек меняется количество элементов в строке <tr>. Например, если в таблице 3 колонки с ячейками <td>, и мы объединяем первую и вторую ячейку, то всего внутри тега <tr>, определяющего данную строку будет 2 элемента <td>, первый из них будет содержать атрибут colspan="2".

    Пример HTML таблицы с объединением ячеек

    Nissan
    Модель Комплектация Наличие
    Nissan Qashqai VISIA +
    TEKNA +
    Nissan X-Trail ACENTA +
    CONNECTA -

    Исходный код таблицы HTML с объединенными ячейками

    <table>
      <tbody>
        <tr>
          <th colspan="3">Nissan</th>
        </tr>
        <tr>
          <th>Модель</th>
          <th>Комплектация</th>
          <th>Наличие</th>
        </tr>
        <tr>
          <td rowspan="2">Nissan Qashqai</td>
          <td>VISIA</td>
          <td>+</td>
        </tr>
        <tr>
          <td>TEKNA</td>
          <td>+</td>
        </tr>
        <tr>
          <td rowspan="2">Nissan X-Trail</td>
          <td>ACENTA</td>
          <td>+</td>
        </tr>
        <tr>
          <td>CONNECTA</td>
          <td>-</td>
        </tr>
      </tbody>
    </table>
    
  5. Колонтитулы и подпись в HTML таблицах

    HTML таблицы можно поделить на 3 области:

    • верхний колонтитул,
    • основная часть,
    • нижний колонтитул.

    Делается это при помощи обвертки строк <tr> выбранной части таблицы тегами. <thead> определяет область верхнего колонтитула, <tfoot> - область нижнего колонтитулы, <tbody> - основную часть таблицы.

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

    Правильный порядок размещения тегов областей в коде HTML таблицы <table> следующий: вначале верхний колонтитул <thead>, за ним нижний колонтитул <tfoot>, после них основная часть <tbody>. При этом на странице основная часть будет выведена между колонтитулами.

    По необходимости к таблице можно добавить подпись. Для этого используйте тег <caption>.

    Подпись <caption>, при использовании, ставится сразу после открывающего тега <table>.

    Пример HTML таблицы с колонтитулами и подписью

    Комплектации Renault Sandero Stepway
    Характеристика SUTA 09H 6R SUTA 09HR6R SUTA 15H 5R
    Наличие + + +
    Мощность двигателя 0,9 (90 л.с.) 0,9 (90 л.с.) 1,5 (90 л.с.)
    Топливо бензин бензин дизель
    Норма токсичности Евро-6 Евро-6 Евро-5

    Исходный код таблицы с колонтитулами и подписью

    <table>
      <caption>
        Комплектации Renault Sandero Stepway
      </caption>
      <thead>
        <tr>
          <th>Характеристика</th>
          <th>SUTA 09H 6R</th>
          <th>SUTA 09HR6R</th>
          <th>SUTA 15H 5R</th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <th>Наличие</th>
          <td>+</td>
          <td>+</td>
          <td>+</td>
        </tr>
      </tfoot>
      <tbody>
        <tr>
          <th>Мощность двигателя</th>
          <td>0,9 (90 л.с.)</td>
          <td>0,9 (90 л.с.)</td>
          <td>1,5 (90 л.с.)</td>
        </tr>
        <tr>
          <th>Топливо</th>
          <td>бензин</td>
          <td>бензин</td>
          <td>дизель</td>
        </tr>
        <tr>
          <th>Норма токсичности</th>
          <td>Евро-6</td>
          <td>Евро-6</td>
          <td>Евро-5</td>
        </tr>
      </tbody>
    </table>
    
  6. Колонки и группы колонок

    HTML таблицу можно делить на колонки и группы колонок с помощью тегов <col> и <colgroup>.

    Такое разделение позволяет задать стили для таблицы используя минимальное количество CSS свойств, тем самым уменьшая объем кода таблицы (вместо определения стилей для каждой ячейки колонки, можно задать стили для одной или нескольких колонок сразу).

    Теги <col> и <colgroup> ставятся внутри тега <table> перед тегами <thead>, <tfoot>, <tbody>, <tr> и после тега <caption>.

    Оба тега могут определять стили для одной или нескольких колонок. Атрибут span="число", указывает количество колонок, на которые будет влиять тег. Если атрибут span не указан, его значение приравнивается к единице.

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

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

    Пример HTML таблицы с разделением на колонки

    ZEN 2E2C AL A ZEN 2E2C J5 A INTENSE 2E3C AL A Характеристика
    1.5 (90 л.с.) 1.2 (115 л.с.) 1.5 (90 л.с.) Мощность двигателя
    дизель бензин дизель Топливо
    АКП6 (EDC) АКП6 (EDC) АКП6 (EDC) Трансмиссия

    Исходный код таблицы HTML c <col> и <colgroup>

    <table>
      <colgroup style="background-color: #ddd;">
        <col />
        <col style="background-color: #ccc;" />
        <col />
      </colgroup>
      <tbody>
        <tr>
          <th>ZEN 2E2C AL A</th>
          <th>ZEN 2E2C J5 A</th>
          <th>INTENSE 2E3C AL A</th>
          <th>Характеристика</th>
        </tr>
        <tr>
          <td>1.5 (90 л.с.)</td>
          <td>1.2 (115 л.с.)</td>
          <td>1.5 (90 л.с.)</td>
          <th>Мощность двигателя</th>
        </tr>
        <tr>
          <td>дизель</td>
          <td>бензин</td>
          <td>дизель</td>
          <th>Топливо</th>
        </tr>
        <tr>
          <td>АКП6 (EDC)</td>
          <td>АКП6 (EDC)</td>
          <td>АКП6 (EDC)</td>
          <th>Трансмиссия</th>
        </tr>
      </tbody>
    </table>
    
  7. Таблицы в макете страниц сайта

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

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

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

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

    checkbox

    Чекбоксов всегда можно выбрать несколько, даже если они относятся к одному вопросу. Т.е. выбрать один, несколько, все или даже не выбрать ни одного. Семантически чекбокс спрашивает согласны ли вы конкретно с тем что в нём написано или нет. Если да -- отмечайте галочкой.

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

    Код в HTML для radiobutton выглядит следующим образом. Обратите внимание, что для того, чтобы объединить элементы в группу им присвоен одинаковый name.

    Первый Второй Третий

    <input name="r1" type="radio" value="5" /> Первый
    <input name="r1" type="radio" value="13" /> Второй
    <input name="r1" type="radio" value="53" /> Третий
    

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

    function fun1() {
      var rad = document.getElementsByName("r1");
      for (var i = 0; i < rad.length; i++) {
        if (rad[i].checked) {
          alert("Выбран " + i + " radiobutton");
        }
      }
    }
    

    Обратите внимание на запись

    var rad = document.getElementsByName("r1");
    

    После выполнения команды getElementsByName переменная rad содержит массив элементов radiobutton. Именно поэтому дальнейшая работа с данной переменной должна вестись как с массивом. В следующих строках мы перебираем каждый элемент массива и проверяем, не выбран ли он. Если выбран — то выводим alert.

# Тэг <label>

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

    Можно подумать, что сделать подпись к полю очень просто. Пишем текст рядом с полем и всё готово:

    Подпись <input type="text" name="username" />
    

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

    Есть специальный тег, который позволяет смело сказать: «Этот кусок текста действительно подпись к этому полю!». Это парный тег <label>.

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

    Создавать подписи к полям с помощью <label> — хороший приём. Используйте его.

    Первый способ создать подпись — просто обернуть текст подписи и тег поля в тег <label>, вот так:

    <label> Подпись <input type="text" name="username" /> </label>
    

    Надо отметить, что при оборачивании текста в тег <label> он визуально никак не меняется, ведь главная задача подписи — создать логическую связь.

    Иногда обернуть поле и текст подписи в тег <label> нельзя. Например, когда они размещены в разных ячейках таблицы.

    В этом случае можно связать подпись с полем с помощью атрибута id. Алгоритм такой:

    • Добавляем к полю ввода идентификатор с помощью атрибута id.

    • Оборачиваем текст подписи в тег <label>.

    • Добавляем тегу <label> атрибут for.

    В атрибут for записываем такое же значение, что и в атрибуте id у поля.

    Например:

    <label for="user-field-id">Имя пользователя</label>
    ... много-много других тегов ...
    <input id="user-field-id" type="text" name="username" />
    

# БЭМ

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

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

  • Блок

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

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

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

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

      <!-- Верно. Семантически осмысленный блок `error` -->
      <div class="error"></div>
      
      <!-- Неверно. Описывается внешний вид -->
      <div class="red-text"></div>
      

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

      Если фрагмент кода может использоваться повторно и не зависит от реализации других компонентов страницы.

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

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

      Пример:

      <!-- Блок `header` -->
      <header class="header">
          <!-- Вложенный блок `logo` -->
          <div class="logo"></div>
      
          <!-- Вложенный блок `search-form` -->
          <form class="search-form"></form>
      </header>
      
    • Почему не стоит задавать внешнюю геометрию блокам?

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

  • Элемент

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

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

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

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

      Пример:

      <!-- Блок `search-form` -->
      <form class="search-form">
          <!-- Элемент `input` блока `search-form` -->
          <input class="search-form__input">
      
          <!-- Элемент `button` блока `search-form` -->
          <button class="search-form__button">Найти</button>
      </form>
      

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

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

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

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

      <!--
          Верно. Структура полного имени элементов соответствует схеме:
          `имя-блока__имя-элемента`
      -->
      <form class="search-form">
          <div class="search-form__content">
              <input class="search-form__input">
              <button class="search-form__button">Найти</button>
          </div>
      </form>
      
      <!--
          Неверно. Структура полного имени элементов не соответствует схеме:
          `имя-блока__имя-элемента`
      -->
      <form class="search-form">
          <div class="search-form__content">
              <!--
                  Рекомендуется:
                  `search-form__input` или `search-form__content-input`
              -->
              <input class="search-form__content__input">
      
              <!--
                  Рекомендуется:
                  `search-form__button` или `search-form__content-button`
              -->
              <button class="search-form__content__button">Найти</button>
          </div>
      </form>
      

      Имя блока задает пространство имен, которое гарантирует зависимость элементов от блока (block__elem).

      Блок может иметь вложенную структуру элементов в DOM-дереве:

      Пример:

      <div class="block">
          <div class="block__elem1">
              <div class="block__elem2">
                  <div class="block__elem3"></div>
              </div>
          </div>
      </div>
      

      Однако эта же структура блока в методологии БЭМ всегда будет представлена плоским списком элементов:

      Пример:

      .block {}
      .block__elem1 {}
      .block__elem2 {}
      .block__elem3 {}
      

      Это позволяет изменять DOM-структуру блока без внесения правок в коде каждого отдельного элемента:

      Пример:

      <div class="block">
          <div class="block__elem1">
              <div class="block__elem2"></div>
          </div>
      
          <div class="block__elem3"></div>
      </div>
      

      Структура блока меняется, а правила для элементов и их названия остаются прежними.

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

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

      Пример:

      <!-- Верно. Элементы лежат внутри блока `search-form` -->
      <!-- Блок `search-form` -->
      <form class="search-form">
          <!-- Элемент `input` блока `search-form` -->
          <input class="search-form__input">
      
          <!-- Элемент `button` блока `search-form` -->
          <button class="search-form__button">Найти</button>
      </form>
      
      <!-- Неверно. Элементы лежат вне контекста блока `search-form` -->
      <!-- Блок `search-form` -->
      <form class="search-form">
      </form>
      
      <!-- Элемент `input` блока `search-form` -->
      <input class="search-form__input">
      
      <!-- Элемент `button` блока `search-form` -->
      <button class="search-form__button">Найти</button>
      
    • Можно ли создавать элемент элемента?

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

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

  • Модификатор

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

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

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

      <div class="button_red">Click me</div>
      
  • Почему в CSS по БЭМ не рекомендуется использовать селекторы по id и по тегам?

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

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

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

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

    <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>
    
  • Зачем нужны метатеги?

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

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

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

# Ресурсы