Czy niestandardowe elementy są prawidłowe w HTML5?

181

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.

d13
źródło
2
Być może nie chcesz umieszczać zbyt wiele akcji w artykule HTML5 napisanym ponad 4,5 lat temu.
jessegavin
9
Artykuł Crockforda jest dziwny. Ważne zdanie brzmi: „To moja propozycja bardziej przyjaznego, łagodniejszego HTML 5”. Innymi słowy, nie jest to HTML5, który znamy dzisiaj, ale propozycja innego HTML 5 jako następcy HTML 4. Dziwne, ponieważ jest datowany na listopad 2007, kiedy W3C już pracował nad HTML5 przez prawie rok . Jego użycie słowa „dozwolone” tutaj jest mylące. Tagi niestandardowe nigdy nie były „zgodne” / „prawidłowe”, ale parsery przeglądarki nadal działają w ich obecności. W każdym razie propozycja Crockforda wcale nie zyskała na popularności. Prawie każda jego część jest włączona do HTML5.
Alohci
3
Elementy niestandardowe stają się pierwszą klasą teraz, gdy powstający standard W3 dla komponentów internetowych Elementy niestandardowe zaczynają pojawiać się
csuwldcat
3
Co do Douglasa Crockforda, kusi mnie, by wierzyć we wszystko, co mówi.
wnrph
1
Tabela wsparcia przeglądarki internetowej dla elementów niestandardowych caniuse.com/#feat=custom-elements
Adrien Be

Odpowiedzi:

169

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

jessegavin
źródło
3
To dobra odpowiedź (+1), ale reguła jest nieco okrągła. „Użytkownicy nie mogą robić rzeczy, które są niedozwolone ...”
Alohci
8
@Alohci powinieneś dodać kolejne 3 słowa do cytatu: „według tej specyfikacji”.
jessegavin
1
Przeczytałem również tę część specyfikacji i naprawdę mnie to pomieszało. Oto dlaczego: 1) niestandardowe atrybuty są dozwolone w HTML5. Potwierdza to obserwację kłótni Alochiego. 2) Nigdzie nie podano, że elementy niestandardowe są niedozwolone.
d13
Ten cytat jest co najwyżej niejasny. Z pewnością W3C ma bardziej konkretną postawę w ten czy inny sposób?
Flash
2
Ten link do customelements.io nie jest już przydatny. Czy mógłbyś zaktualizować / usunąć go?
Nisarg
22

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)

svidgen
źródło
Wygląda na to, że nie przeczytałeś całej sekcji. Chodzi nie tylko o atrybuty , ale nawet zdecydowanie zniechęca do dostosowywania.
Andrew Barber
Powtarzając moje inne komentarze, tak, przepraszam, że nie wiedziałem, aby wskazać, że to mój blog. Zakładałem, że to było oczywiste. Artykuł ma jednak bezpośrednie znaczenie. I dodam, że nie ma to służyć jako odniesienie do kopii zapasowej jakiegokolwiek „roszczenia”, które przedstawiłem, ale aby pokazać w dłuższym formacie, jak to zrobić, aby działało.
svidgen
1
Chodzi po prostu o to: specyfikacja wyraźnie zezwala na te rzeczy. I w większości kontekstów zniechęcających , specyfikacja wyraźnie mówi dostawcom agentów użytkowników, a nie autorom HTML.
svidgen
3
Powyższe oświadczenie wydaje się usunięte w najnowszej wersji w3.org/TR/html5/introduction.html#extensibility . Jak dotąd nie mogę znaleźć żadnej dokumentacji dotyczącej tego, czy użycie niestandardowych elementów HTML bez dzielenia wyrazów może być prawidłowe, czy też nie potrzebujesz instrukcji JS do sprawdzania poprawności niestandardowych elementów HTML z dzielonymi łączami ( html5rocks.com/en/tutorials/webcomponents/ elementy niestandardowe ).
John Slegers
@JohnSlegers Tak, wygląda na to, że nieco poprawiono dokumentację i / lub zakotwiczenie. Zaktualizowałem link. Cytat w mojej odpowiedzi znajduje się w dolnej części sekcji połączonej z rozszerzalnością .
svidgen
14

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.

Alohci
źródło
Ok, więc możemy założyć, że jeśli niestandardowe elementy nie zostaną wymienione, to również nie będą dozwolone. To wydaje się dość sprawiedliwe.
d13
4
Ta odpowiedź jest teraz nieprawidłowa, powstający standard W3 Web Components Custom Elements zaczyna teraz pojawiać się
csuwldcat
1
@csuwldcat - Właściwie nie. Standard HTML5 lub nowszy nadal będzie wymagał aktualizacji w jakiś sposób, aby takie niestandardowe elementy stały się częścią jego modelu treści. To ciekawe wiadomości. W jakich przeglądarkach mogę ich używać?
Alohci
3
@Alochi - oczywiście wszelkie inne specyfikacje w starym języku będą musiały zostać zaktualizowane, aby odzwierciedlić tę nową rzeczywistość, ale HTML jest żywym standardem i nie blokuje innych specyfikacji - aktualizacje zostaną wprowadzone, gdy przejdziemy do kolejnych etapów standardu tor. Możesz bawić się z natywnymi implementacjami komponentów internetowych w Chrome Canary, a wkrótce w Firefox Aurora. Dodatkowo dostępne są polypełniania dla 3 z 4 specyfikacji składników Web Components, które działają bardzo dobrze we wszystkich współczesnych przeglądarkach moder - w tym specyfikacja / funkcje elementów niestandardowych.
csuwldcat
Czy w niektórych miejscach można umieścić niestandardowe elementy? A może mówisz, że w ogóle nie są dozwolone?
Melab
12

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

Beejor
źródło
11

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.

Josh
źródło
5

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.

csuwldcat
źródło
1
Czy ten projekt jest pozytywny?
Starx
Niektóre części lądują w przeglądarce Firefox i Chrome - ściśle współpracujemy i spodziewamy się, że do końca 2013 r.
Wylądują
1
Czy teraz w 2014 r. Wylądowały pełne wdrożenia?
Hasib Mahmud
1
@JamieHutber i zobacz, jak Twoje strony pękają w najnowszych przeglądarkach za rok. Zasada nr 1 dotycząca interoperacyjności przeglądarki: przestrzegaj zasad.
Pan Lister
1
@HasibMahmud specyfikacje są teraz sfinalizowane i będą dostępne na Chrome Beta za kilka tygodni, Firefox Aurora za ~ 6 tygodni. Możesz użyć ich dzisiaj w Firefox Aurora, odwracając flagę config dom.webcomponents.enableddo true.
csuwldcat
4

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.

Henrik Vendelbo
źródło
3

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.

James Holderness
źródło
2

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ą

Erick Boileau
źródło
1

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

Петър Петров
źródło
1
Było to poprawne dla walidatora, ponieważ tworzyłeś te elementy za pomocą JavaScript, a walidator ich nie widział, ponieważ nie uruchamia twojego JavaScript. Zobaczy tylko stronę w takiej postaci, w jakiej pojawia się po pierwszym załadowaniu.
animuson
Dokładnie. Chociaż niepoprawny HTML, tagi niestandardowe nadal są poprawnymi SGML, a HTML to w końcu SGML. CSS może służyć do stylizowania niestandardowych tagów i działa idealnie w IE. :) Ponadto możesz określić własne DTD z własnymi niestandardowymi elementami w specyfikacji DOCTYPE, więc moje niestandardowe tagi mogą faktycznie zostać sprawdzone nawet bez JavaScript - ale mnie to nie obchodzi - system GUI silnika gry zdecydowanie nie jest Google praca :)
Петър Петров
1
Cóż, jest haczyk. Nie możesz po prostu wrzucić niestandardowych elementów chcąc nie chcąc. Musisz je zdefiniować i zarejestrować w DTD, aby uznać je za „prawidłowy” HTML. To, że coś działa, nie oznacza, że ​​jest ważne.
animuson
Jeśli po prostu dodasz kwalifikator do nazw elementów, takich jak <x-msg>, <x-log> itp., Wówczas byłbyś zgodny ze specyfikacją Web Components / Custom Elements.
Neil Monroe,
W silniku gry, w którym Webkit służy tylko do renderowania dynamicznego interfejsu GUI, nikt również nie będzie dbał o DTD. Wszelkie nieznany znacznik HTML jest HTMLUnknownElement dla JS, wciąż doskonale działa z jQuery i CSS, więc GUI dostaje jakieś semantykę na końcu: <inventory>, <item type="potion" sprite="2">- więc lepiej być nazywany SGML + CSS zamiast HTML, mimo że elementy HTML, które mają definicję work as is - Przyciski, listy, ...
Петър Петров
1

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.

Nisarg Shah
źródło
1
Może tak się stanie, gdy przestaną wspierać <center>i <marquee>?
Ravenstine
1

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

Ephellon Dantzler
źródło
3
To najdziwniejszy HTML, jaki ostatnio widziałem :)
Dan Dascalescu,