Я не смог найти однозначного ответа на вопрос, являются ли пользовательские теги действительными в HTML5, например:
<greeting>Hello!</greeting>
Я ничего не нашел в спецификации так или иначе:
http://dev.w3.org/html5/spec/single-page.html
А пользовательские теги, похоже, не проверяются с помощью валидатора W3C.
Спецификация пользовательских элементов доступна в Chrome и Opera и становится доступной в других браузерах. Он предоставляет средства для регистрации пользовательских элементов формальным образом.
Пользовательские элементы - это новые типы элементов DOM, которые могут быть определены авторы. В отличие от декораторов, которые не имеют состояния и эфемерны, обычай элементы могут инкапсулировать состояние и предоставлять интерфейсы сценариев.
Пользовательские элементы являются частью более широкой спецификации W3, называемой Веб-компоненты, наряду с шаблонами, импортом HTML и Shadow DOM.
Веб-компоненты позволяют авторам веб-приложений определять виджеты с уровень визуального богатства и интерактивности невозможен с CSS простота составления и повторного использования с помощью сценария невозможна библиотеки сегодня.
Тем не менее, из этой превосходной статьи о разработчиках Google о пользовательских элементах v1:
Имя пользовательского элемента должно содержать тире (
-). Таким образом,<x-tags>,<my-element>и<my-awesome-app>являются действительными именами, а<tabs>и<foo_bar>- нет. Это требование заключается в том, что анализатор HTML может отличать пользовательские элементы от обычных элементов. Это также обеспечивает прямую совместимость при добавлении новых тегов в HTML.
Некоторые ресурсы
Это возможно и разрешено:
Пользовательские агенты должны обрабатывать элементы и атрибуты, которые они не используют понимать как семантически нейтральные; оставляя их в DOM (для DOM процессоры) и стилизация их в соответствии с CSS (для процессоров CSS), но не вызывая никакого значения от них.
http://www.w3.org/TR/html5/infrastructure.html#extensibility-0
Но если вы намерены добавить интерактивность, вам нужно сделать ваш документ недействительным (но все еще полностью функциональным) для размещения IE 7 и 8.
См. http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (мой блог)
Это на самом деле является следствием накопления контентной модели элементов.
Например, корневой элемент должен быть html.
Элемент html может содержать только Элемент head, за которым следует элемент body.
Элемент body может содержать Flow content, где содержимое потока определяется как элементы: a, сокр, адрес, (если он является потомком элемента карты), статья, в стороне, аудио, б, BDI, БДО, BLOCKQUOTE, ш, кнопка, холст, процитировать, код, команда, DataList, дель, Детали, д.ф.н., ДИВ дл, Эм, встраивать FIELDSET, фигура, сноска, форма, h1, h2, h3, h4, h5, h6, заголовок, HGroup, час, я, IFrame, IMG, вход, ины, KBD, серийник, метка, карта, отметка, математика, меню, метр, нав, NoScript, объект, ол, вывод, п, заранее, прогресс, кв, Рубин, s, сэмпл, script, раздел, Выбрать, маленький, пролет сильный, style (если присутствует атрибут scoped) к югу, вир .SVG, Таблица, текстовое поле, время, и, ул, вар, видео, WBR и текст
и т.д.
Ни в коем случае модель контента не говорит "вы можете поместить любые элементы, которые вам нравятся в этом", что необходимо для пользовательских элементов/тегов.
Пользовательские элементы и атрибуты действительны в HTML, при условии, что:
x-data-Например, <x-foo data-bar="gaz"/> или <br data-bar="gaz"/>.
Общим соглашением для элементов является x-foo; x-vendor-feature.
Это относится к большинству случаев, поскольку, пожалуй, редко бывает, что разработчику потребуется вся мощь, связанная с регистрацией их элементов. Синтаксис также является адекватным и стабильным. Ниже приведено более подробное объяснение.
С 2014 года появился новый, значительно улучшенный способ регистрации пользовательских элементов и атрибутов. Он не будет работать в старых браузерах, таких как IE 9 или Chrome/Firefox 20. Но он позволяет использовать стандартный интерфейс HTMLElement, предотвращать конфликты, использовать имена не x-* и не data-*, а также определять пользовательское поведение и синтаксис для браузера. Это требует немного причудливого JavaScript, как описано в ссылках ниже.
HTML5 Rocks - Определение новых элементов в HTML
WebComponents.org - Введение в пользовательские элементы
W3C - веб-компоненты: пользовательские элементы
Использование data-* для имен настраиваемых атрибутов было вполне допустимо в течение некоторого времени и даже работало со старыми версиями HTML.
Как и для пользовательских (незарегистрированных) имен элементов, W3C настоятельно рекомендует против них и считает их несоответствующими. Но браузеры должны их поддерживать, а идентификаторы x-* не конфликтуют с будущими спецификациями HTML, а идентификаторы x-vendor-feature не конфликтуют с другими разработчиками. Пользовательский DTD может использоваться для работы с любыми придирчивыми браузерами.
Вот некоторые соответствующие выдержки из официальных документов:
"Применимые спецификации МОГУТ определить новый документ (например, foobar element) [...]. Если синтаксис и семантика данного Соответствующий документ HTML5 не изменяется при использовании применимых спецификация (ы), то этот документ остается соответствующим HTML5 документ".
"Пользовательские агенты должны обрабатывать элементы и атрибуты, которые они не используют понимать как семантически нейтральные; оставляя их в DOM (для DOM процессоры) и стилизация их в соответствии с CSS (для процессоров CSS), но не вызывая от них никакого значения".
"Пользовательские агенты не могут обрабатывать несоответствующие документы, поскольку они пожалуйста; применяется модель обработки, описанная в этой спецификации к реализациям, независимо от соответствия ввода документы".
"Интерфейс HTMLUnknownElement должен использоваться для элементов HTML, которые не определены этой спецификацией.
W3C - HTML5: Соответствующие документы
WhatWG - стандарт HTML: элементы DOM
Я хотел бы отметить, что слово "действительный" может иметь два различных значения в этом контексте, причем любое из них потенциально может быть действительным.
Следует ли считать HTML-документ с пользовательскими тегами допустимым HTML5? Ответ на это явно "нет". В спецификации указано, какие именно теги допустимы в каком контексте. Вот почему средство проверки HTML не будет принимать документ с пользовательскими тегами или со стандартными тегами в неправильных местах (например, тег "img" в заголовке).
Будет ли HTML-документ с пользовательскими тегами анализироваться и отображаться стандартным, четко определенным образом в браузерах?
Здесь, пожалуй, удивительно, ответ "да". Даже если документ технически не будет считаться допустимым HTML5, спецификация HTML5 действительно определяет, что именно должны делать браузеры, когда они видят пользовательский тег: короче говоря, пользовательский тег действует примерно как <span> - это ничего не значит и ничего не делает по умолчанию, но он может быть стилизован под HTML и доступен через javascript.
Пользовательские HTML-элементы - это новый стандарт W3, в который я вносил вклад, который позволяет вам объявлять и регистрировать пользовательские элементы с помощью синтаксического анализатора, здесь вы можете прочитать спецификацию: Спецификация пользовательских элементов W3 Web Components. Кроме того, Microsoft поддерживает библиотеку (написанную бывшими разработчиками Mozilla) под названием X-Tag - она упрощает работу с веб-компонентами.
Чтобы дать обновленный ответ, отражающий современные страницы.
Пользовательские теги действительны, если либо,
1) Они содержат тире
<my-element>
2) Они встроены в XML
<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>
Предполагается, что вы используете HTML5 doctype <!doctype html>
Учитывая эти простые ограничения, теперь имеет смысл сделать все возможное, чтобы ваша разметка HTML была действительной (пожалуйста, прекратите закрывать теги, такие как <img> и <hr>, это глупо и неправильно, если вы не используете доктрину XHTML, которую вы, вероятно, имеете не нужно).
Учитывая, что HTML5 четко определяет правила синтаксического анализа, совместимый браузер сможет обрабатывать любой тег, который вы бросаете на него, даже если это не является строго достоверным.
Цитата из раздела Расширяемость спецификации HTML5:
Для функций уровня разметки, которые могут быть ограничены сериализацией XML и не нуждаются в поддержке в сериализации HTML, поставщики должны использовать механизм пространства имен для определения пользовательских пространств имен, в которых поддерживаются нестандартные элементы и атрибуты.
Итак, если вы используете сериализацию XML HTML5, вам будет разрешено сделать что-то вроде этого:
<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>
Однако, если вы используете синтаксис HTML, вы гораздо более ограничены тем, что можете сделать.
Для функций уровня разметки, предназначенных для использования с синтаксисом HTML, расширения должны быть ограничены новыми атрибутами формы "x-vendor-feature" [...] Нельзя создавать новые имена элементов.
Но эти инструкции в первую очередь направлены на поставщиков браузеров, которые предположительно будут предоставлять визуальный стиль и функциональность для любых настраиваемых элементов, которые они выбрали для создания.
Однако для автора, хотя может быть законным встраивать пользовательский элемент на страницу (по крайней мере, в сериализацию XML), вы не получите ничего, кроме node в DOM. Если вы хотите, чтобы ваш пользовательский элемент действительно что-то делал или каким-то особым образом отображался, вы должны смотреть на спецификацию пользовательских элементов.
Для более мягкого праймера по этому вопросу прочитайте Введение в веб-компоненты, в котором также содержится информация о Shadow DOM и других соответствующих спецификациях. На данный момент эти спецификации все еще работают над черновиками - вы можете увидеть текущий статус здесь - но они активно развиваются.
В качестве примера простое определение элемента greeting может выглядеть примерно так:
<element name="greeting">
<template>
<style scoped>
span { color:gray; }
</style>
<span>Simon says:</span>
<q><content/></q>
</template>
</element>
Это указывает браузеру отображать содержимое элемента в кавычках и префикс текста "Саймон говорит:", который имеет стиль с серым цветом. Обычно определение пользовательского элемента, как это, будет храниться в отдельном html файле, который вы импортируете со ссылкой.
<link rel="import" href="greeting-definition.html" />
Хотя вы также можете включить его в строку, если хотите.
Я создал рабочую демонстрацию вышеуказанного определения, используя библиотеку Polymer polyfill, которую вы можете увидеть здесь здесь. Обратите внимание, что это используется в старой версии библиотеки Polymer - более поздние версии работают совсем по-другому. Однако, поскольку спецификация все еще находится в разработке, это не то, что я бы рекомендовал использовать в производственном коде в любом случае.
data-* атрибуты действительны в HTML5, и даже в HTML4 все веб-браузеры используют их.
Добавление новых тегов технически хорошо, но не рекомендуется только потому, что:
Я использую пользовательские теги только в тех местах, в которых Google не волнует, для примера в игровом движке iframe я создал тег <log>, содержащий <msg>, <error> и <warning>, но через JavaScript. И это было в полной мере, по словам валидатора. Он даже работает в Internet Explorer с его стилем!;]
Пользовательские теги недействительны в HTML5. Но в настоящее время браузеры поддерживают их синтаксический анализ, а также вы можете использовать их с помощью css. Поэтому, если вы хотите использовать пользовательские теги для текущих браузеров, тогда вы можете. Но поддержка может быть отменена, когда браузеры будут применять стандарты W3C строго для разбора содержимого HTML.
Я знаю, что этот вопрос старый, но я изучал этот вопрос, и хотя некоторые из приведенных выше утверждений верны, они не являются единственным способом создания пользовательских элементов. Например:
<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>
<style type="text/css">
[\?content] {
display: none;
}
</style>
<script type="text/javascript">
S = document.getElementsByTagName("Query?")[0];
Q = S.getAttribute("?content");
A = document.getElementById( S.getAttribute("?attach") );
function find() {
return S.getAttribute("?prov");
}
(function() {
A.setAttribute("onclick", Q);
})();
</script>
будет работать отлично (в новых версиях Google Chrome, IE, FireFox и мобильных Safari до сих пор). Все, что вам нужно, это просто альфа-символ (a-z, A-Z), чтобы запустить тег, а затем вы можете использовать любой из символов без альфа. Если в CSS вы должны использовать "\" (обратную косую черту), чтобы найти элемент, например, потребуется Query\^ {...}. Но в JS вы просто называете это, как видите. Надеюсь, это поможет. Пример здесь
-Mink CBOS
просто используйте все, что вы хотите, без декларации DOM
<container>content here</container>
добавьте свой собственный стиль (display: block), и он будет работать с любым современным браузером