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

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

<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>

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

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

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

ШАГ 1

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

 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>

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

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

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

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

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

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

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

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

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

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

Создание собственных имен тегов в 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.

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

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

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

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

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

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

Пользовательские теги можно использовать в Safari, Chrome, Opera и Firefox, по крайней мере, если они используются вместо "class = ...".

зеленый {color: green} в css работает для

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

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

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

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

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

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

Это не вариант ни в одной спецификации HTML :)

Вы, вероятно, можете делать то, что хотите, с <div>элементами и классами, из вопроса, я не уверен, что именно вам нужно, но нет, создание собственных тегов не вариант.

Как сказал Ник, пользовательские теги не поддерживаются ни одной версией HTML.

Но, если вы используете такую ​​разметку в своем HTML, это не приведет к ошибке.

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

Если это не то, чего вы хотите достичь, укажите, что именно вы хотите. Тогда мы сможем дать ответ.

Вы можете добавить настраиваемый атрибут через данные HTML 5 - Атрибуты. Например: Сообщение, которое действительно для HTML 5. См. Http://ejohn.org/blog/html-5-data-attributes/ для получения подробной информации.

Полимерные или X-теги позволяют создавать свои собственные HTML-теги. Он основан на «теневой модели DOM» собственного браузера.

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

redback {background-color:red;}

 

<redback>This is red</redback>

В некоторых случаях может показаться, что создание собственных имен тегов просто отлично.
Однако это всего лишь процедуры обработки ошибок вашего браузера. И проблема в том, что разные браузеры имеют разные процедуры обработки ошибок!

См. Этот пример.
Первая строка содержит два выдуманных элемента, whatи ever, и они по-разному обрабатываются разными браузерами. Текст отображается красным в IE11 и Edge, но черным в других браузерах.
Для сравнения, вторая строка похожа, за исключением того, что она содержит только допустимые элементы HTML, и поэтому она будет выглядеть одинаково во всех браузерах.

body {color:black; background:white;} /* reset */

what, ever:nth-of-type(2) {color:red}
code, span:nth-of-type(2) {color:red}

<p><what></what> <ever>test</ever></p>

<p><code></code> <span>test</span></p>

Еще одна проблема с вымышленными элементами заключается в том, что вы не знаете, что ждет вас в будущем. Если вы создали сайт пару лет назад с именами тегов , как picture, dialog, details, slot, и templateт.д., ожидая , что они ведут себя как пролеты, ты в беде сейчас

вы можете использовать это:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>MyExample</title>
  <style>
    bloodred {color: red;}
  </style>
</head>
<body>
  <bloodred>
    this is BLOODRED (not to scare you)
  </bloodred>
</body>
<script>
  var btn = document.createElement("BLOODRED")
</script>
</html>

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

Пользовательские элементы: определение новых элементов в HTML