Czy istnieje sposób na utworzenie własnego tagu HTML5?

Chcę stworzyć coś takiego

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

Czy można to zrobić w HTML5? Wiem, że mogę to zrobić

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

ale jest o wiele mniej czytelny :(

Możesz używać niestandardowych tagów w przeglądarkach, chociaż nie będą to HTML5 (zobacz Czy elementy niestandardowe są zgodne z HTML5? I specyfikacją HTML5 ).

Załóżmy, że chcesz użyć niestandardowego elementu tagu o nazwie <stack>. Oto, co powinieneś zrobić ...

KROK 1

Normalizuj jego atrybuty w swoim arkuszu stylów CSS (pomyśl o resetowaniu css) - przykład:

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

KROK 2

Aby działał w starszych wersjach Internet Explorera, musisz dołączyć ten skrypt do głowy (ważne, jeśli potrzebujesz go do pracy w starszych wersjach IE!):

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

Następnie możesz swobodnie używać niestandardowego tagu.

<stack>Overflow</stack>

Możesz także ustawić atrybuty ...

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

Nie jestem pewien co do tych odpowiedzi. Jak właśnie przeczytałem: „NIESTANDARDOWE TAGI SĄ ZAWSZE DOZWOLONE W HTML”.

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

Chodzi o to, że HTML był oparty na SGML. W przeciwieństwie do XML-a z jego typami dokumentów i schematami, HTML nie traci ważności, jeśli przeglądarka nie zna jednego lub dwóch znaczników. Pomyśl o <marquee>. To nie było w oficjalnym standardzie. Tak więc jego użycie spowodowało, że Twoja strona HTML została „oficjalnie niezatwierdzona”, ale też nie spowodowała uszkodzenia strony.

Następnie jest <keygen>, który był specyficzny dla Netscape, zapomniany w HTML4 i ponownie odkryty, a teraz określony w HTML5. Ponadto mamy teraz niestandardowe atrybuty tagów, takie jak data-XyZzz = "..." dozwolone we wszystkich tagach HTML5.

Tak więc, chociaż nie powinieneś wymyślać całej własnej, niestandardowej, nieokreślonej tabeli znaczników, nie jest całkowicie zabronione umieszczanie niestandardowych tagów w HTML. Dzieje się tak, chyba że chcesz wysłać go z + xml Content-Type lub osadzić inne przestrzenie nazw XML, takie jak SVG lub MathML. Dotyczy to tylko HTML ograniczonego do SGML.

Jak sugerował Michael w komentarzach, to, co chcesz zrobić, jest całkiem możliwe, ale twoja nomenklatura jest błędna. Nie „dodajesz tagów do HTML 5”, tworzysz nowy typ dokumentu XML z własnymi tagami.

Zrobiłem to dla niektórych projektów w mojej ostatniej pracy. Kilka praktycznych porad:

1. Kiedy mówisz, że chcesz „dodać je do HTML 5”, zakładam, że tak naprawdę masz na myśli to, że chcesz, aby strony wyświetlały się poprawnie w nowoczesnej przeglądarce, bez konieczności wykonywania dużej ilości pracy po stronie serwera. Można to osiągnąć, wstawiając „instrukcję przetwarzania arkusza stylów” u góry pliku xml, na przykład <? Xml-stylesheet type = "text / xsl" href = "menu.xsl"?>. Zastąp „menu.xsl” ścieżką do arkusza stylów XSL, który tworzysz w celu konwersji niestandardowych tagów do formatu HTML.

2. Ostrzeżenia: Twój plik musi być dobrze sformułowanym dokumentem XML, z nagłówkiem XML <xml version = "1.0">. XML jest trudniejszy niż HTML w przypadku takich rzeczy, jak niedopasowane tagi. Ponadto, w przeciwieństwie do HTML, w tagach jest rozróżniana wielkość liter. Musisz również upewnić się, że serwer WWW wysyła pliki z odpowiednim typem MIME „application / xml”. Często serwer WWW zostanie skonfigurowany tak, aby robił to automatycznie, jeśli rozszerzenie pliku to „.xml”, ale sprawdź.

3. Duże zastrzeżenie: Wreszcie użycie automatycznej transformacji XSL przeglądarek, jak już opisałem, jest naprawdę najlepsze tylko do debugowania i ograniczonych aplikacji, w których masz dużą kontrolę. Z powodzeniem wykorzystałem go do stworzenia prostego intranetu u mojego ostatniego pracodawcy, do którego dostęp miało najwyżej kilkadziesiąt osób. Nie wszystkie przeglądarki obsługują XSL i te, które nie mają w pełni zgodnych implementacji. Jeśli więc Twoje strony mają zostać udostępnione w „dzikiej” przestrzeni, najlepiej jest przekształcić je wszystkie w HTML po stronie serwera, co można zrobić za pomocą narzędzia wiersza poleceń lub za pomocą przycisku w wielu edytorach XML.

Tworzenie własnych nazw tagów w HTML nie jest możliwe / nieprawidłowe. Do tego służą XML, SGML i inne ogólne języki znaczników.

To, czego prawdopodobnie chcesz, to

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

Albo zamiast <div/>i <span/>coś w rodzaju <ul/>i <li/>.

Aby wyglądał i działał dobrze, po prostu podłącz trochę CSS i JavaScript.

Chcę tylko dodać do poprzednich odpowiedzi, że ma sens używanie tylko dwuskładnikowych tagów dla niestandardowych elementów. Nigdy nie powinny być standaryzowane.

Na przykład chcesz użyć tagu <icon>, ponieważ nie lubisz <img>, ani też nie lubisz <i>...

Cóż, pamiętaj, że nie jesteś jedyny. Być może w przyszłości w3c i / lub przeglądarki określą / zaimplementują ten tag.

Obecnie przeglądarki prawdopodobnie zaimplementują styl natywny dla tego tagu, a projekt Twojej witryny może się zepsuć.

Więc proponuję użyć (zgodnie z tym przykładem) <img-icon>.

W rzeczywistości znacznik <menu>jest dobrze zdefiniowany, tj. Nie jest tak używany, ale zdefiniowany. Powinien zawierać takie, <menuitem>które zachowują się jak <li>.

Niestandardowe znaczniki mogą być używane w Safari, Chrome, Opera i Firefox, przynajmniej o ile używa się ich zamiast „class = ...”.

green {color: green} w css działa

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

Do osadzania metadanych możesz spróbować użyć mikrodanych HTML , ale jest to nawet bardziej szczegółowe niż używanie nazw klas.

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

Oprócz pisania arkusza stylów XSL, jak opisałem wcześniej, istnieje inne podejście, przynajmniej jeśli masz pewność, że zostanie użyty Firefox lub inna pełnoprawna przeglądarka XML (tj. NIE Internet Explorer). Pomiń transformację XSL i napisz kompletny arkusz stylów CSS, który powie przeglądarce, jak bezpośrednio sformatować XML. Plusem jest to, że nie musiałbyś uczyć się XSL, który wielu ludzi uważa za trudny i sprzeczny z intuicją. Wadą jest to, że twój CSS będzie musiał bardzo dokładnie określić styl, w tym co to są węzły blokowe, co to są inline, itp. Zwykle pisząc CSS można założyć, że przeglądarka „wie”, że <em> na przykład jest węzłem wbudowanym, ale nie będzie miał pojęcia, co zrobić z <dish>.

W końcu minęło kilka lat, odkąd to wypróbowałem, ale przypominam sobie, że IE (przynajmniej kilka wersji wstecz) odmówił stosowania arkuszy stylów CSS bezpośrednio do dokumentów XML.

Celem HTML jest to, że tagi zawarte w języku mają uzgodnione znaczenie, na którym każdy na świecie może używać i podejmować decyzje - takie jak domyślny styl, tworzenie klikalnych linków lub przesyłanie formularza po kliknięciu <input type="submit"> .

Zrobione tagi, takie jak Twoje, są świetne dla ludzi (ponieważ możemy nauczyć się angielskiego i dzięki temu wiemy, lub przynajmniej zgadnąć, co oznaczają Twoje tagi), ale nie są tak dobre dla maszyn.

To nie jest opcja w żadnej specyfikacji HTML :)

Prawdopodobnie możesz robić, co chcesz z <div>elementami i klasami, z pytania nie jestem pewien, czego dokładnie szukasz, ale nie, tworzenie własnych tagów nie wchodzi w grę.

Jak powiedział Nick, tagi niestandardowe nie są obsługiwane w żadnej wersji HTML.

Ale nie spowoduje to żadnego błędu, jeśli użyjesz takich znaczników w swoim kodzie HTML.

Wygląda na to, że chcesz utworzyć listę. Możesz użyć listy nieuporządkowanej, <ul>aby utworzyć elementy rool i użyć <li>tagu dla elementów poniżej.

Jeśli to nie jest to, co chcesz osiągnąć, określ dokładnie, czego chcesz. Wtedy możemy znaleźć odpowiedź.

Możesz dodać atrybut niestandardowy za pomocą atrybutów danych HTML 5. Na przykład: Wiadomość, która dotyczy HTML 5. Zobacz http://ejohn.org/blog/html-5-data-attributes/, aby uzyskać szczegółowe informacje.

Znaczniki polimerowe lub X umożliwiają tworzenie własnych tagów HTML. Opiera się na natywnym modelu „shadow DOM” przeglądarki.

Możesz po prostu dostosować styl css, utworzy to tag, który sprawi, że kolor tła będzie czerwony:

redback {background-color:red;}

 

<redback>This is red</redback>

W pewnych okolicznościach może się wydawać, że tworzenie własnych nazw tagów po prostu działa dobrze.
Jednak to tylko procedury obsługi błędów przeglądarki w pracy. Problem w tym, że różne przeglądarki mają różne procedury obsługi błędów!

Zobacz ten przykład.
Pierwsza linia zawiera dwa wymyślone elementy whati ever, które są różnie traktowane przez różne przeglądarki. Tekst jest czerwony w IE11 i Edge, ale czarny w innych przeglądarkach.
Dla porównania, druga linia jest podobna, z tym że zawiera tylko prawidłowe elementy HTML i dlatego będzie wyglądać tak samo we wszystkich przeglądarkach.

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>

Kolejny problem z elementami gotowymi polega na tym, że nie wiesz, co przyniesie przyszłość. Jeśli utworzono stronę internetową kilka lat temu z nazwy znaczników takich jak picture, dialog, details, slot, templateetc, je spodziewa się zachowywać jak przęseł, jesteś w tarapatach teraz!

możesz użyć tego:

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

Znalazłem ten artykuł o tworzeniu niestandardowych tagów HTML i ich tworzeniu. Upraszcza proces i dzieli go na terminy, które każdy może zrozumieć i wykorzystać od razu - ale nie jestem do końca pewien, czy zawarte w nim próbki kodu są prawidłowe we wszystkich przeglądarkach, więc należy ostrzec je i dokładnie przetestować. Niemniej jednak jest to świetne wprowadzenie do tematu na początek.

Elementy niestandardowe: definiowanie nowych elementów w HTML