Нестандартные HTML теги

#html

Можно ли самому создавать свои нестандартные HTML-теги? Например 
    

Ответы

Ответ 1

По спецификации: да, можно, но их имя должно содержать хотя бы один дефис.

Реально: да, можно - браузеры всё съедят. За исключением старых IE, где нужно вызывать
document.createElement для всех незнакомых ему тегов, чтобы они не стали самозакрывающимися.

А ещё, можно создавать теги в своих пространствах имён.

Спецификация.


Ответ 2

Да, разумеется. http://w3c.github.io/webcomponents/spec/custom/

Вот легковесный полифил document.registerElement для всех актуальных браузеров: https://github.com/WebReflection/document-register-element

Рекомендую его, т.к. сам активно использую в продакшене.

var MyElement = document.registerElement(
  'my-element',
  {
    prototype: Object.create(
      HTMLElement.prototype, {
      createdCallback: {value: function() {
        console.log('here I am ^_^ ');
        console.log('with content: ', this.textContent);
      }},
      attachedCallback: {value: function() {}},
      detachedCallback: {value: function() {}},
      attributeChangedCallback: { value: function(name, previousValue, value ) {}}
    })
  }
);


Кастомные теги повышают семантичность и рекомендуются к применению W3C и Google.
Единственная проблема с ними - непрохождение стандартного валидатора. 

Проблем со стилями на практике не наблюдал ни разу.

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


Ответ 3

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