Есть ли способ создать свой собственный HTML-тег в HTML5?

Question

Я хочу создать что-то вроде

<menu>
    <lunch>
        <dish>aaa</dish>
        <dish>bbb</dish>
    </lunch>
    <dinner>
        <dish>ccc</dish>
    </dinner>
</menu>

Можно ли это сделать в HTML5? Я знаю, что могу сделать это с

<ul id="menu">
    <li>
        <ul id="lunch">
            <li class="dish">aaa</li>
            <li class="dish">bbb</li>
        </ul>
    </li>
    <li>
        <ul id="dinner">
            <li class="dish">ccc</li>
        </ul>
    </li>    
</ul>

но это гораздо менее читабельно: (

Answer 1

Вы можете использовать пользовательские теги в браузерах, хотя они не будут HTML5 (см. Допустимы ли пользовательские элементы HTML5? и спецификации HTML5 ).

Предположим, вы хотите использовать пользовательский элемент тега с именем <stack>. Вот что вы должны сделать ...

ШАГ 1

Нормализовать его атрибуты в вашей таблице стилей CSS (думаю, css reset) - Пример:

 stack{display:block;margin:0;padding:0;border:0; ... }

ШАГ 2

Чтобы заставить его работать в старых версиях Internet Explorer, вам нужно добавить этот скрипт в заголовок (Важно, если он нужен для работы в более старых версиях IE!):

 <!--[if lt IE 9]> 
 <script> document.createElement("stack"); </script>
 <![endif]-->

---

Тогда вы можете свободно использовать свой пользовательский тег.

<stack>Overflow</stack>

Не стесняйтесь также устанавливать атрибуты ...

<stack id="st2" class="nice"> hello </stack>

Answer 2

Я не уверен в этих ответах. Как я только что прочитал: «ПОЛЬЗОВАТЕЛЬСКИЕ ТЕГИ ВСЕГДА РАЗРЕШЕНЫ В HTML.»

http://www.crockford.com/html/

Дело в том, что HTML основан на SGML. В отличие от XML с его типами и схемами, HTML не становится недействительным, если браузер не знает один или два тега. Подумайте о . Это не было в официальном стандарте. Таким образом, использование этой страницы сделало вашу HTML-страницу «официально не одобренной», но и не сломало страницу.

Тогда есть

, который был специфичен для Netscape, забыт в HTML4 и заново открыт, а теперь указан в HTML5. Кроме того, теперь у нас есть собственные атрибуты тегов, например data-XyZzz = "...", разрешенные для всех тегов HTML5

Так что, хотя вы не должны изобретать целый собственный нестандартный салат с разметкой, не обязательно запрещать использование пользовательских тегов в HTML. Это, однако, если вы не хотите отправить его с + xml Content-Type или внедрить другие пространства имен XML, такие как SVG или MathML. Это относится только к SGML-ограниченному HTML.

Answer 3

Как Майкл предложил в комментариях, то, что вы хотите сделать, вполне возможно, но ваша номенклатура неверна. Вы не «добавляете теги в HTML 5», вы создаете новый тип документа XML со своими собственными тегами.

Я делал это для некоторых проектов на моей последней работе. Несколько практических советов:

1. Когда вы говорите, что хотите «добавить их в HTML 5», я предполагаю, что вы на самом деле имеете в виду, что вы хотите, чтобы страницы отображались корректно в современном браузере, без необходимости выполнять большую работу над серверная сторона. Это можно сделать, вставив «инструкцию по обработке таблицы стилей» в верхней части XML-файла, например, <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?>. Замените "menu.xsl" на путь к таблице стилей XSL, которую вы создаете для преобразования пользовательских тегов в HTML.

2. Предостережения: Ваш файл должен быть правильно сформированным документом XML с заголовком XML . XML более требователен, чем HTML, к таким вещам, как несоответствующие теги. Кроме того, в отличие от HTML, теги чувствительны к регистру. Вы также должны убедиться, что веб-сервер отправляет файлы с соответствующим типом MIME "application / xml". Часто веб-сервер будет настроен для этого автоматически, если расширение файла - «.xml», но отметьте.

3. Большое предостережение: наконец, использование автоматического преобразования XSL в браузерах, как я уже описал, действительно лучше всего только для отладки и для ограниченных приложений, где у вас есть большой контроль. Я успешно использовал его при настройке простой интрасети у моего последнего работодателя, к которой имел доступ всего несколько десятков человек. Не все браузеры поддерживают XSL, и те, которые не имеют полностью совместимых реализаций. Поэтому, если ваши страницы должны быть переведены в «дикий», лучше всего преобразовать их в HTML на стороне сервера, что можно сделать с помощью инструмента командной строки или с помощью кнопки во многих редакторах XML.

Answer 4

Я просто хочу добавить к предыдущим ответам, что есть смысл использовать только теги из двух слов для пользовательских элементов. Они никогда не должны быть стандартизированы.

---

Например, вы хотите использовать тег <icon>, потому что вам не нравится <img>, и вам не нравится <i> ни ...

Хорошо, имейте в виду, что вы не единственный. Возможно, в будущем w3c и / или браузеры будут указывать / реализовывать этот тег.

В настоящее время браузеры, вероятно, реализуют собственный стиль для этого тега, и дизайн вашего сайта может нарушиться.

Итак, я предлагаю использовать (согласно этому примеру) <img-icon>.

---

На самом деле тег <menu> четко определен, т.е. не так используется, но определен. Он должен содержать <menuitem>, который ведет себя как <li>.

Answer 5

Создание собственных имен тегов в HTML невозможно / недопустимо. Вот для чего нужны XML, SGML и другие общие языки разметки.

То, что вы, вероятно, хотите, это

<div id="menu">
    <div id="lunch">
        <span class="dish">aaa</span>
        <span class="dish">bbb</span>
    </div>
    <div id="dinner">
        <span class="dish">ccc</span>
    </div>
</div>

Или вместо <div/> и <span/> что-то вроде <ul/> и <li/>.

Чтобы он выглядел и работал правильно, просто подключите немного CSS и Javascript.

Answer 6

Пользовательские теги можно использовать в Safari, Chrome, Opera и Firefox, по крайней мере, если использовать их вместо «class = ...».

green {color: green} вcss работает на

<green>This is some text.</green>

Answer 7

Смысл HTML заключается в том, что теги, включенные в язык, имеют согласованное значение, что каждый человек в мире может использовать и принимать решения - например, стилизация по умолчанию, или создание ссылок, которые можно нажимать, или отправка формы при нажатии на <input type="submit">.

Придуманные тэги, подобные вашей, отлично подходят для людей (потому что мы можем выучить английский и, таким образом, знать или, по крайней мере, догадаться, что означают ваши теги), но не очень хороши для машин.

Answer 8

Помимо написания таблицы стилей XSL, как я уже описывал ранее, есть и другой подход, по крайней мере, если вы уверены, что будет использоваться Firefox или другой полноценный XML-браузер (т.е. НЕ Internet Explorer). Пропустите XSL-преобразование и напишите полную таблицу стилей CSS, которая сообщает браузеру, как напрямую форматировать XML. Плюс в том, что вам не придется изучать XSL, который многие считают трудным и нелогичным языком. Недостатком является то, что ваш CSS должен будет полностью определять стиль, включая то, что является блочными узлами, что является встроенными и т. Д. Обычно, при написании CSS, вы можете предположить, что браузер «знает», что, например, , это встроенный узел, но он не знает, что делать с .

Наконец, прошло несколько лет с тех пор, как я попробовал это сделать, но я помню, что IE (по крайней мере, несколько версий назад) отказался применять таблицы стилей CSS непосредственно к документам XML.

Answer 9

Для встраивания метаданных вы можете попробовать использовать микроданные HTML , но это даже более многословно, чем использование имен классов.

<div itemscope>
    <p>My name is <span itemprop="name">Elizabeth</span>.</p>
</div>

<div itemscope>
    <p>My name is <span itemprop="name">Daniel</span>.</p>
</div>

Answer 10

Вы можете просто сделать несколько пользовательских стилей CSS, это создаст тег, который сделает цвет фона красным:

redback {background-color:red;}

 

<redback>This is red</redback>