Чи є спосіб створити власний тег 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 (think 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>

Я не дуже впевнений у цих відповідях. Щойно я читав: "МИТНІ ТЕГИ ВИНАГИ ДОБАВЛЕНІ В 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. Big Caveat: Нарешті, використання автоматичної трансформації 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>для створення елементів ролика та використовувати <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