Создание собственных 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 для упрощения создания и управления своими пользовательскими элементами.