Создание собственных HTML-тегов в HTML5: примеры и руководство

Быстрый ответ

Для создания собственных HTML-элементов предлагается использовать API для пользовательских элементов из набора Web Components. Это API позволяет определить поведение элемента на языке JavaScript, который затем можно использовать как обычный HTML-тег. Вот пример:

class MyElement extends HTMLElement {
  // Задаём элементу уникальные возможности
}
// Присваиваем имя нашему элементу
customElements.define('my-element', MyElement);

Так он будет выглядеть в HTML:

<my-element></my-element> <!-- И my-element готов к работе! -->

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

Осознание ограничений пользовательских тегов

Пользовательские теги ведут себя практически так же, как знакомые нам inline-элементы типа <span>. Они являются простыми элементами до тех пор, пока CSS или JavaScript не начинают их модифицировать, вращать, перемещать или скрывать.

Система идентификации пользовательских тегов

Для поддержания порядка в мире пользовательских тегов каждый из них должен иметь стандартные атрибуты. К тем, особые атрибуты data-*:

<x-custom-tag data-purpose="action-button"></x-custom-tag>    <!-- Специальная роль: кнопка действия -->

Подробнее об этом расскажет наш спикер на видео

Обеспечение поддержки старых версий браузеров

Если среди ваших пользователей встречаются любители старых версий Internet Explorer (несмотря на все, такие все еще бывают!), есть способ помочь им:

document.createElement('x-custom-tag');  // Подсказываем IE о 'x-custom-tag'!

Это позволит даже устаревшим браузерам корректно работать с вашими элементами, улучшая в целом впечатление от использования веб-сайта.

Визуализация

Когда вы создаете свой собственный HTML-тег, становитесь настоящим Лего-мастером, способным создавать уникальные блоки!

Обычный HTML: [🧱, 🧱, 🧱]
Ваш пользовательский тег: [🧱+🖌️]

Ваш новый девиз: "Создавайте стили с помощью CSS. Оживляйте с помощью JavaScript."

<x-custom-tag> Я уникален! </x-custom-tag>

💡 О, нечто новое! Браузер обнаружил неизвестный ему тег и применяет ваши стили и указанное поведение!

Результат: ВЫ создали блестящий новый элемент конструктора в цифровом пространстве: ваш собственный HTML-тег!

Подготовка к будущему: HTML6

Если вы работаете над созданием уникального тега, убедитесь, что он будет семантично соответствовать текущей спецификации HTML5.

<custom-menu role="navigation"></custom-menu>

XML + XSLT = ⚡️ Магия

Вместо HTML вы можете попробовать сочетание XML и XSLT для достижения новых результатов.

<?xml version="1.0"?>
<?xml-stylesheet type="text/xsl" href="transform.xsl"?>
<my-custom-tag></my-custom-tag>

Не забывайте о необходимости правильно указать тип контента (mime type) и настроить веб-сервер соответствующим образом.

Сомнения? Воспользуйтесь стандартными тегами

Если вам важна совместимость, вы можете использовать проверенные временем элементы <div> и <span>, присвоив им уникальные идентификаторы (ID) или классы для решения различных задач:

<div class="custom-tag-like">Содержимое здесь</div>

Избегайте пересечения с встроенными тегами HTML

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

<ns-customcontrol>Запустись!</ns-customcontrol>  <!-- ns-customcontrol, новый герой на улицах города! 😎-->

Полезные материалы

1. Использование данных атрибутов – Обучение веб-разработке | MDN — узнайте, как использовать атрибуты data-* в HTML5.
2. Использование пользовательских элементов – Веб-API | MDN — руководство по созданию пользовательских элементов для современного веб-разработчика.
3. Custom Elements v1 – Переиспользуемые веб-компоненты | Статьи | web.dev — ознакомьтесь с спецификацией v1 пользовательских элементов для веб-компонентов.
4. Сервис проверки разметки W3C — проверьте свои пользовательские HTML5-теги с помощью официального валидатора W3C.
5. Создание пользовательского элемента с нуля | CSS-Tricks — пошаговый гид по созданию собственного пользовательского HTML-элемента на чистом JavaScript.
6. Библиотека Polymer – Проект Polymer — воспользуйтесь библиотекой Polymer для упрощения создания и управления своими пользовательскими элементами.