Расширяем html своими собственными тэгами

• Сколько html тэгов вы знаете?
• Сколько из них используете?
• А что будет, если вы ошибётесь в названии тэга?

А ничего не будет, любой браузер прекрасно "проглотит" вашу самодеятельность. Главное чтоб разметка была валидной, как XML. Ведь по сути, вначале был придуман XML, исключительно для передачи информации в чётко структурированном виде, а потом уже он перерос в HTML.
Если вы давно занимаетесь вёрсткой, то помните, что в html5 были добавлены новые тэги, такие как article, header, footer, aside и другие.
Точно так же и вы можете ввести свой тэг.

Например вам нужно отрисовать на странице три коричневых квадрата. Для этого в создадите 3 дива, укажите им размеры, фон и позиционирование.
Скажем так:

<div class="bl bl-1"></div>
<div class="bl bl-2"></div>
<div class="bl bl-3"></div>

<style>
  .bl {
    width: 50px;
    height: 50px;
    background-color: brown;
    position: absolute;
  }
  .bl-1 {
    top: 100px;
    left: 35px;
  }
  .bl-2 {
    top: 110px;
    left: 135px;
  }
  .bl-3 {
    top: 5px;
    left: 50px;
  }
</style>

Выглядеть это будет так:

Если у вас будет множество различных фигур-вам может быть не очень удобно ориентироваться в названиях классов и тогда вы можете ввести свой тэг.
Пусть это будет brown-square.
В вёрстке он будет таким:

<brown-square></brown-square>

Передадим ему такие-же свойства, что и классу bl, я лишь подкрасил в другой цвет.

<style>
  brown-square{
    width: 50px;
    height: 50px;
    background-color: #a59460;
    position: absolute;
  }
</style>

И размещаем на странице:

<div class="bl bl-1"></div>
<div class="bl bl-2"></div>
<div class="bl bl-3"></div>
<brown-square></brown-square>

Смотрим:

Таки работает.
Если проверить в дебагере браузера - свойство display у нашего элемента будет иметь значение block, как у дива по-умолчанию. Нас это устраивает.

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

Код на pastebin https://pastebin.com/T6iAF9Zf