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

Ответ 1

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

Ответ 2

Я не уверен в этих ответах. Как я только что прочитал: "В 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. Это относится только к SGML-ограниченному HTML.

Ответ 3

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

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

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

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

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

Ответ 4

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

Ответ 5

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

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

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

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

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

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

Ответ 10

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

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

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

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

Ответ 11

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

Ответ 12

Polymer или X-tags позволяют вам для создания собственных тэгов html. Он основан на собственном браузере "shadow DOM".

Ответ 13

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

redback {background-color:red;}

 

<redback>This is red</redback>

Ответ 14

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

См. этот пример. Первая строка содержит два созданных элемента, 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>

Ответ 15

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

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

Ответ 16

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

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

Ответ 17

<head>
  <lunch>
    <style type="text/css">
      lunch{
        color:blue;
        font-size:32px;
        }
      </style>
    </lunch>
  </head>

<body>
  <lunch>
    This is how you create custom tags like what he is asking for its very simple just do what i wrote it works yeah no js or convoluted work arounds needed this lets you do exactly what he wrote.
    </lunch>
  </body>

Ответ 18

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

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

</bloodred>
</body>
<script>
var btn = document.createElement("BLOODRED")

</script>
</html>