Czy niestandardowe elementy są prawidłowe w HTML5?

Nie udało mi się znaleźć ostatecznej odpowiedzi na pytanie, czy tagi niestandardowe są prawidłowe w HTML5, na przykład:

<greeting>Hello!</greeting>

Nie znalazłem nic w specyfikacji w ten czy inny sposób:

http://dev.w3.org/html5/spec/single-page.html

I tagi niestandardowe nie wydają się sprawdzać poprawności za pomocą walidatora W3C.

Specyfikacja elementów niestandardowych jest dostępna w Chrome i Operze i staje się dostępna w innych przeglądarkach . Umożliwia rejestrowanie niestandardowych elementów w formalny sposób.

Elementy niestandardowe to nowe typy elementów DOM, które mogą być definiowane przez autorów. W przeciwieństwie do dekoratorów , które są bezstanowe i efemeryczne, elementy niestandardowe mogą zawierać stan i zapewniać interfejsy skryptów.

Elementy niestandardowe są częścią większej specyfikacji W3 o nazwie Składniki sieciowe , wraz z szablonami, importami HTML i Shadow DOM.

Komponenty sieciowe umożliwiają autorom aplikacji internetowych definiowanie widżetów o poziomie bogactwa wizualnego i interaktywności niemożliwym tylko w przypadku CSS, a łatwość komponowania i ponownego wykorzystania nie jest możliwa w dzisiejszych bibliotekach skryptów.

Jednak z tego doskonałego przewodnika dla programistów Google na temat niestandardowych elementów v1:

Nazwa elementu niestandardowego musi zawierać myślnik ( -). Tak więc <x-tags>, <my-element>i <my-awesome-app>wszystkie są poprawnymi nazwami, podczas gdy <tabs>i <foo_bar>nie są. To wymaganie jest tak, aby parser HTML mógł odróżnić elementy niestandardowe od zwykłych elementów. Zapewnia również kompatybilność do przodu, gdy nowe znaczniki są dodawane do HTML.

Niektóre zasoby

• Przykładowe komponenty sieciowe są dostępne na https://WebComponents.org
• WebComponents.js służy jako polifill dla składników Web Web, dopóki nie będą one obsługiwane wszędzie. Zobacz także stronę github i przeglądarkę internetową WebComponents.js .

Jest to możliwe i dozwolone:

Programy klienckie muszą traktować elementy i atrybuty, których nie rozumieją, jako semantycznie neutralne; pozostawiając je w DOM (dla procesorów DOM) i projektując je zgodnie z CSS (dla procesorów CSS), ale nie wywodząc z nich żadnego znaczenia.

http://www.w3.org/TR/html5/infrastructure.html#extensibility-0

Ale jeśli zamierzasz dodać interaktywność, musisz unieważnić dokument (ale nadal w pełni funkcjonalny), aby obsługiwać IE 7 i 8.

Zobacz http://blog.svidgen.com/2012/10/building-custom-xhtml5-tags.html (mój blog)

Uwaga: Poniższa odpowiedź była poprawna, kiedy została napisana w 2012 roku. Od tego czasu sytuacja potoczyła się nieco dalej. Specyfikacja HTML definiuje teraz dwa typy elementów niestandardowych - „autonomiczne elementy niestandardowe” i „niestandardowe elementy wbudowane”. Te pierwsze mogą iść wszędzie, gdzie oczekuje się frazowania treści; czyli większość miejsc wewnątrz ciała, ale nie np. elementy potomne elementów ul lub ol, lub w elementach tabeli innych niż td, th lub caption. Te ostatnie mogą iść wszędzie tam, gdzie może iść element, który przedłużają.

Jest to w rzeczywistości konsekwencja akumulacji modelu zawartości elementów.

Na przykład element główny musi być htmlelementem.

htmlElement może zawierać tylko pierwiastek głowy a następnie przez element nadwozia.

bodyElement może zawierać tylko zawartość przepływu , gdzie zawartość przepływu jest zdefiniowany jako elementy: a, abbr, adres, obszar (jeśli jest potomkiem elementu mapy), artykuł, na bok, dźwięk, b, bdi, bdo, blockquote, br, przycisk, płótno, cytat, kod, polecenie, datista, del, szczegóły , dfn, div dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, etykieta, mapa, znak, matematyka, menu, miernik, nawigacja, noscript, obiekt, ol, wyjście, p, pre, progress, q, ruby, s, samp, skrypt, sekcja, wybierz, mały, rozpiętość, silny, styl ( jeśli obecny jest atrybut o zasięgu), sub, sup, svg, table, textarea, time,u, ul, var, wideo, wbr i tekst

i tak dalej.

W żadnym momencie model treści nie mówi „możesz umieścić dowolne elementy w tym jednym”, co byłoby konieczne w przypadku niestandardowych elementów / znaczników.

Podstawowe niestandardowe elementy i atrybuty

Niestandardowe elementy i atrybuty są poprawne w HTML, pod warunkiem, że:

• Nazwy elementów są pisane małymi literami i zaczynają się od x-
• Nazwy atrybutów są pisane małymi literami i zaczynają się od data-

Na przykład <x-foo data-bar="gaz"/>lub <br data-bar="gaz"/>.

Powszechną konwencją dla elementów jest x-foo; x-vendor-featurejest polecany.

Dotyczy to większości przypadków, ponieważ prawdopodobnie rzadko programista potrzebowałby całej mocy związanej z rejestracją ich elementów. Składnia jest również odpowiednio poprawna i stabilna. Bardziej szczegółowe wyjaśnienie znajduje się poniżej.

Zaawansowane niestandardowe elementy i atrybuty

Począwszy od 2014 roku istnieje nowy, znacznie ulepszony sposób rejestrowania niestandardowych elementów i atrybutów. Nie działa w starszych przeglądarkach, takich jak IE 9 lub Chrome / Firefox 20. Ale pozwala korzystać ze standardowego HTMLElementinterfejsu, zapobiegać kolizjom, używać nie- x-*i nienazwanych data-*nazw, a także definiować niestandardowe zachowanie i składnię dla przeglądarki . Wymaga trochę fantazyjnego JavaScript, jak wyszczególniono w poniższych linkach.

Skały HTML5 - Definiowanie nowych elementów w HTML
WebComponents.org - Wprowadzenie do elementów niestandardowych
W3C - Składniki internetowe: elementy niestandardowe

Odnośnie ważności podstawowej składni

Używanie data-*niestandardowych nazw atrybutów przez pewien czas było całkowicie poprawne, a nawet działa ze starszymi wersjami HTML.

W3C - HTML5: Rozszerzalność

Jeśli chodzi o niestandardowe (niezarejestrowane) nazwy elementów, W3C zdecydowanie je odradza i uznaje je za niezgodne. Ale przeglądarki są wymagane do ich obsługi, a x-*identyfikatory nie będą powodować konfliktów z przyszłymi specyfikacjami HTML, a x-vendor-featureidentyfikatory nie będą powodować konfliktów z innymi programistami. Niestandardowego DTD można użyć do obejścia dowolnych wybrednych przeglądarek.

Oto kilka istotnych fragmentów oficjalnych dokumentów:

„Obowiązujące specyfikacje MOGĄ określać nową treść dokumentu (np. Element foobar) [...]. Jeśli składnia i semantyka danego zgodnego dokumentu HTML5 nie ulegnie zmianie przez zastosowanie odpowiednich specyfikacji, wówczas dokument ten pozostaje zgodnym HTML5 dokument."

„Programy klienckie muszą traktować elementy i atrybuty, których nie rozumieją, jako semantycznie neutralne; pozostawiając je w DOM (dla procesorów DOM) i stylizując je zgodnie z CSS (dla procesorów CSS), ale nie wywodząc z nich żadnego znaczenia”.

„Programy klienckie nie mogą dowolnie przetwarzać dokumentów niezgodnych; model przetwarzania opisany w tej specyfikacji ma zastosowanie do implementacji niezależnie od zgodności dokumentów wejściowych.”

„Interfejs HTMLUnknownElement musi być używany dla elementów HTML, które nie są zdefiniowane w tej specyfikacji.”

W3C - HTML5: Dokumenty
zgodne WhatWG - HTML Standard: DOM Elements

Chciałbym zaznaczyć, że słowo „ważne” może mieć w tym kontekście dwa różne znaczenia, z których każde jest potencjalnie, hmm, ważne.

1. Czy dokument HTML z niestandardowymi tagami należy uznać za prawidłowy HTML5? Odpowiedź na to pytanie brzmi „nie”. Specyfikacja wymienia dokładnie jakie tagi są prawidłowe w jakich kontekstach. Dlatego walidator HTML nie akceptuje dokumentu ze znacznikami niestandardowymi lub ze standardowymi znacznikami w niewłaściwych miejscach (np. Znacznik „img” w nagłówku).

2. Czy dokument HTML z niestandardowymi znacznikami będzie analizowany i renderowany w standardowy, jasno określony sposób w różnych przeglądarkach? Tutaj, być może zaskakująco, odpowiedź brzmi „tak”. Mimo że dokument nie byłby technicznie uważany za prawidłowy HTML5, specyfikacja HTML5 dokładnie określa , co przeglądarki powinny zrobić, gdy zobaczą niestandardowy znacznik: krótko mówiąc, niestandardowy znacznik zachowuje się trochę jak <span>- to nic nie znaczy i nic nie robi domyślnie, ale może być stylizowany przez HTML i dostępny w javascript.

Niestandardowe elementy HTML są rozwijającym się standardem W3, do którego przyczyniałem się, który umożliwia deklarowanie i rejestrowanie niestandardowych elementów w analizatorze składni, możesz przeczytać specyfikację tutaj: W3 Web Components Specyfikacja niestandardowych elementów . Ponadto Microsoft obsługuje bibliotekę (napisaną przez byłych twórców Mozilli), o nazwie X-Tag - sprawia, że ​​praca z komponentami sieciowymi jest jeszcze łatwiejsza.

Udzielić zaktualizowanej odpowiedzi odzwierciedlającej nowoczesne strony.

Tagi niestandardowe są ważne, jeśli:

1) Zawierają myślnik

<my-element>

2) Są osadzonymi plikami XML

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Zakłada się, że używasz doctype HTML5 <!doctype html>

Biorąc pod uwagę te proste ograniczenia, warto teraz dołożyć wszelkich starań, aby znaczniki HTML były prawidłowe (przestań zamykać tagi jak <img>i <hr>, jest to głupie i niepoprawne, chyba że użyjesz typu XHTML, którego prawdopodobnie nie potrzebujesz).

Biorąc pod uwagę, że HTML5 wyraźnie określa zasady analizowania, zgodna przeglądarka będzie w stanie obsłużyć każdy rzucony na nią znacznik, nawet jeśli nie jest on ściśle poprawny.

Cytując z sekcji Rozszerzalność specyfikacji HTML5 :

W przypadku funkcji na poziomie znaczników, które mogą być ograniczone do serializacji XML i nie muszą być obsługiwane w serializacji HTML, dostawcy powinni użyć mechanizmu przestrzeni nazw do zdefiniowania niestandardowych przestrzeni nazw, w których obsługiwane są niestandardowe elementy i atrybuty.

Jeśli więc używasz serializacji XML HTML5, możesz zrobić coś takiego:

<greeting xmlns="http://example.com/customNamespace">Hello!</greeting>

Jeśli jednak używasz składni HTML, masz znacznie większe możliwości w zakresie tego, co możesz zrobić.

W przypadku funkcji na poziomie znaczników, które są przeznaczone do użycia ze składnią HTML, rozszerzenia powinny być ograniczone do nowych atrybutów w postaci „x-vendor-feature” [...] Nie należy tworzyć nowych nazw elementów.

Ale te instrukcje są przede wszystkim skierowane do dostawców przeglądarek, którzy prawdopodobnie zapewnią styl wizualny i funkcjonalność dla dowolnych niestandardowych elementów, które zdecydują się stworzyć.

Jednak dla autora, chociaż osadzenie niestandardowego elementu na stronie (przynajmniej w serializacji XML) może być legalne, nie dostaniesz nic więcej niż węzeł w DOM. Jeśli chcesz, aby element niestandardowy faktycznie coś zrobił lub był renderowany w specjalny sposób, powinieneś przyjrzeć się specyfikacji Elementy niestandardowe .

Aby uzyskać bardziej delikatny podkład na ten temat, przeczytaj wprowadzenie do składników sieci Web , które zawiera również informacje o Shadow DOM i innych powiązanych specyfikacjach. Te specyfikacje są jeszcze projekty pracuje w tej chwili - można zobaczyć aktualny stan tutaj - ale są one aktywnie rozwijany.

Na przykład prosta definicja greetingelementu może wyglądać mniej więcej tak:

<element name="greeting">
  <template>
    <style scoped>
      span { color:gray; }
    </style>
    <span>Simon says:</span>
    <q><content/></q>
  </template>
</element>

Mówi to przeglądarce, aby wyświetlała treść elementu w cudzysłowach i poprzedzona tekstem „Simon mówi:”, który ma styl szary. Zazwyczaj taka niestandardowa definicja elementu jest przechowywana w osobnym pliku HTML, który importujesz za pomocą łącza.

<link rel="import" href="greeting-definition.html" />

Chociaż możesz również dołączyć go w linii, jeśli chcesz.

Stworzyłem roboczą demonstrację powyższej definicji za pomocą biblioteki wypełniaczy Polymer, którą można zobaczyć tutaj . Zauważ, że używa to starej wersji biblioteki Polymer - nowsze wersje działają zupełnie inaczej. Jednak ze względu na to, że specyfikacja jest wciąż w fazie rozwoju, i tak nie polecam go używać w kodzie produkcyjnym.

po prostu używaj, co chcesz, bez deklaracji domeny

<container>content here</container>

dodaj swój własny styl (display: block) i będzie działał z każdą nowoczesną przeglądarką

data-*atrybuty są poprawne w HTML5, a nawet w HTML4, wszystkie przeglądarki internetowe ich przestrzegają. Dodawanie nowych tagów jest technicznie w porządku, ale nie jest zalecane tylko dlatego, że:

1. Może kolidować z czymś dodanym w przyszłości, i
2. Unieważnia dokument HTML, chyba że zostanie dynamicznie dodany przez JavaScript.

Używam znaczniki niestandardowe tylko w miejscach, które Google nie obchodzi, bo ecample w iframe silnik gry, zrobiłem <log>znacznik, który zawierał <msg>, <error>a <warning>- ale poprzez JavaScript tylko. Według walidatora było to w pełni poprawne. Działa nawet w Internet Explorerze ze swoim stylem! ;]

Niestandardowe tagi nie są prawidłowe w HTML5. Ale obecnie przeglądarki obsługują je do analizowania, a także można ich używać za pomocą css. Jeśli więc chcesz używać niestandardowych tagów dla bieżących przeglądarek, możesz to zrobić. Ale wsparcie może zostać odebrane, gdy przeglądarki wdrożą standardy W3C wyłącznie w celu parsowania treści HTML.

Wiem, że to pytanie jest stare, ale studiowałem ten temat i chociaż niektóre z powyższych stwierdzeń są poprawne, nie są to jedyne sposoby tworzenia niestandardowych elementów. Na przykład:

<button id="find">click me</button>
<Query? ?attach="find" ?content="alert( find() );" ?prov="Hello there :D" >
I won't be displayed :D
</Query?>

<style type="text/css">

[\?content] {

display: none;

}

</style>

<script type="text/javascript">

S = document.getElementsByTagName("Query?")[0];

Q = S.getAttribute("?content");

A = document.getElementById( S.getAttribute("?attach") );

function find() {

  return S.getAttribute("?prov");

}

(function() {

A.setAttribute("onclick", Q);

})();

</script>

działałoby idealnie dobrze (do tej pory w nowszych wersjach Google Chrome, IE, FireFox i mobilnego Safari). Wszystko czego potrzebujesz to tylko znak alfabetu (az, AZ), aby rozpocząć znacznik, a następnie możesz użyć dowolnego ze znaków innych niż alfabet. Jeśli jest w CSS, musisz użyć „\” (ukośnik odwrotny), aby znaleźć element, taki jak wymagałby Kwerendy \ ^ {...}. Ale w JS nazywasz to tak, jak to widzisz. Mam nadzieję, że to pomoże. Zobacz przykład tutaj

-Mink CBOS