Требуется ли для пользовательских элементов тире в их названии?

Можно ли назвать ваши собственные элементы <date>, <person>, <city> или другие без использования тире? Можно использовать определения элементов без них?

1 ответ

Все браузеры поддерживают конечный список элементов HTML, которые считаются "известными". Элементы, которые неизвестны (например, <city>, <person>), как правило, не генерировать ошибки с анализатором HTML в современных браузерах, а вместо этого наследовать от HTMLUnknownElement, Однако в более старых версиях IE такие элементы были бы вставлены в DOM как пустой узел без дочерних элементов (1).

Спецификация пользовательских элементов требует, чтобы все пользовательские элементы содержали дефис (-) во имя. Так что вместо <person>, вы бы использовали <my-person> или же <x-person>, Это действительные имена, в то время как <person > считается неизвестным элементом.

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

Вы можете использовать любое имя, разделенное дефисом, за исключением:

  • annotation-xml
  • color-profile
  • font-face
  • font-face-src
  • font-face-uri
  • font-face-format
  • font-face-name
  • missing-glyph

Насколько мне известно, эти имена являются зарезервированными именами из SVG, MathML и других спецификаций. Например, вот больше информации о <font-face> элемент.

(1) Это привело к взлому, когда разработчики создавали фиктивный тег HTML5 в IE (например, <article> ) используя JavaScript, чтобы они могли затем стилизовать его под любой обычный элемент с помощью CSS.

Технически они работают. HTML-код ниже был протестирован в Chrome, Firefox и Edge - но я уверен, что другие браузеры тоже справляются с этим:

<!doctype html>
<html>
<style>

    weirdstuff {
        font:15px arial;
        line-height:1.4;
        display:block;
        background:steelblue;
        color:white;
        border:1px solid black;
        padding:20px;
        margin:10px;
    }

</style>
<body>

    <weirdstuff>

        Seriously.<br>
        <i>What</i> did you expect?<br>
        An error message?

        <weirdstuff style="background:green;color:white;">

            You can even nest them.

        </weirdstuff>

    </weirdstuff>

</body>
</html>

Скрипка: https://jsfiddle.net/zkLwvg96/

Действительно забавная часть - ПОЧЕМУ они работают - это потому, что движки браузера хорошо написаны, и они хотят быть ориентированными на будущее. Они ожидают, что набор допустимых тегов со временем будет расти, поэтому, когда они интерпретируют теги, они не ищут определенный список - вместо этого они идут "что-то между <скобками>". Это хорошая оценка, чтобы рассматривать неожиданные теги как или что-то невинное.

Опять же, неизвестные теги не являются "плохими". Они работают.

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

в те времена, когда это ничего не значило - что за понятный тег, верно? Здесь подробности. Конечно, и затем приходит HTML5, все ваше содержимое исчезло, заменено забавным треугольником с левой стороны и глупой надписью "Подробности", от которой вы даже не можете избавиться. Не говоря уже о щелчке.

Так что - для домашних проектов, конечно же, используйте несуществующие теги. Но никогда в реальном проекте, если вы хотите быть ориентированным на будущее, и под будущим я имею в виду завтрашний день.

Придерживайтесь пунктирных имен - это путь самурая.

Другие вопросы по тегам